vf_react/CLAUDE.md

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

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

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

Python Dependencies

Install from requirements.txt:

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)