stock-bot/apps/web/README.md

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

# 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.