95 lines
2.3 KiB
Markdown
95 lines
2.3 KiB
Markdown
# Stock Bot Web Dashboard
|
|
|
|
A modern React web dashboard for the Stock Bot trading system.
|
|
|
|
## Features
|
|
|
|
- **Modern UI**: Built with React 18 and TypeScript
|
|
- **Tailwind CSS**: For beautiful, responsive styling
|
|
- **Headless UI**: Accessible components for dialogs and interactions
|
|
- **Heroicons**: Beautiful SVG icons
|
|
- **Responsive Design**: Works on desktop and mobile
|
|
- **Side Navigation**: Clean navigation with mobile-responsive sidebar
|
|
|
|
## Tech Stack
|
|
|
|
- **React 18** with TypeScript
|
|
- **Vite** for fast development and building
|
|
- **Tailwind CSS** for styling
|
|
- **Headless UI** for accessible components
|
|
- **Heroicons** for icons
|
|
- **Bun** for package management
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Bun (for package management)
|
|
- Node.js 18+
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Install dependencies
|
|
bun install
|
|
|
|
# Start development server
|
|
bun run dev
|
|
|
|
# Build for production
|
|
bun run build
|
|
|
|
# Preview production build
|
|
bun run preview
|
|
```
|
|
|
|
## Available Scripts
|
|
|
|
- `bun run dev` - Start development server
|
|
- `bun run build` - Build for production
|
|
- `bun run preview` - Preview production build
|
|
- `bun run lint` - Run ESLint
|
|
- `bun run type-check` - Run TypeScript type checking
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── App.tsx # Main app component with sidebar navigation
|
|
├── main.tsx # React app entry point
|
|
└── index.css # Global styles with Tailwind directives
|
|
```
|
|
|
|
## Dashboard Features
|
|
|
|
The dashboard includes:
|
|
|
|
- **Responsive Sidebar**: Navigation that works on desktop and mobile
|
|
- **Dashboard Overview**: Portfolio value, returns, and active strategies
|
|
- **Navigation Sections**:
|
|
- Dashboard (current page)
|
|
- Portfolio
|
|
- Analytics
|
|
- Reports
|
|
- Settings
|
|
|
|
## Development
|
|
|
|
The app is set up with:
|
|
|
|
- TypeScript for type safety
|
|
- ESLint for code quality
|
|
- Tailwind CSS for utility-first styling
|
|
- Headless UI for accessible components
|
|
- Hot module replacement for fast development
|
|
|
|
## Integration
|
|
|
|
This web app is part of the larger Stock Bot system and will integrate with:
|
|
|
|
- Data Service (for market data)
|
|
- Portfolio Service (for portfolio management)
|
|
- Strategy Service (for trading strategies)
|
|
- Execution Service (for trade execution)
|
|
|
|
The web dashboard will communicate with these services via REST APIs to provide a complete trading dashboard experience.
|