# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a hybrid React dashboard application with a Flask/Python backend. The project is built on the Argon Dashboard Chakra PRO template and includes financial/trading analysis features.

### Frontend (React + Chakra UI)
- **Framework**: React 18.3.1 with Chakra UI 2.8.2
- **Styling**: Tailwind CSS + custom Chakra theme
- **Build Tool**: React Scripts with custom Gulp tasks
- **Charts**: ApexCharts, ECharts, and custom visualization components

### Backend (Flask/Python)
- **Framework**: Flask with SQLAlchemy ORM
- **Database**: ClickHouse for analytics + MySQL/PostgreSQL
- **Features**: Real-time data processing, trading analysis, user authentication
- **Task Queue**: Celery for background processing

## Development Commands

### Frontend Development
```bash
npm start                    # Start development server (port 3000, proxies to localhost:5001)
npm run build               # Production build with license headers
npm test                    # Run React test suite
npm run lint:check          # Check ESLint rules
npm run lint:fix            # Auto-fix ESLint issues
npm run install:clean       # Clean install (removes node_modules and package-lock)
```

### Backend Development
```bash
python app_2.py            # Start Flask server (main backend)
python simulation_background_processor.py  # Background data processor
```

### Python Dependencies
Install from requirements.txt:
```bash
pip install -r requirements.txt
```

## Architecture

### Frontend Structure
- `src/layouts/` - Main layout components (Admin, Auth, Home)
- `src/views/` - Page components organized by feature (Dashboard, Company, Community, etc.)
- `src/components/` - Reusable UI components (Charts, Cards, Buttons, etc.)
- `src/theme/` - Chakra UI theme customization
- `src/routes.js` - Application routing configuration
- `src/contexts/` - React context providers
- `src/services/` - API service layer

### Backend Structure
- `app_2.py` - Main Flask application with routes and business logic
- `simulation_background_processor.py` - Background data processing service
- `wechat_pay.py` / `wechat_pay_config.py` - Payment integration
- `tdays.csv` - Trading days data

### Key Integrations
- ClickHouse for high-performance analytics queries
- Celery + Redis for background task processing
- Flask-SocketIO for real-time data updates
- Tencent Cloud services (SMS, etc.)
- WeChat Pay integration

## Configuration

### Proxy Setup
The React dev server proxies API calls to `http://localhost:5001` (see package.json).

### Environment Files
- `.env` - Environment variables for both frontend and backend

### Build Process
The build process includes custom Gulp tasks that add Creative Tim license headers to JS, CSS, and HTML files.

### Styling Architecture
- Tailwind CSS for utility classes
- Custom Chakra UI theme with extended color palette
- Component-specific SCSS files in `src/assets/scss/`

## Testing
- React Testing Library setup for frontend components
- Test command: `npm test`

## Deployment
- Build: `npm run build`
- Deploy: `npm run deploy` (builds the project)