This document outlines the design of a web application for stock and cryptocurrency analysis.

App Functionality

The application offers three core functionalities:

1. Screener:

   • A table displaying tickers with columns for open, high, low, close, MACD, and strategy_1 prices.
   • Users can filter the table based on any of these fields.

2. Charts:

   • A dedicated page to view interactive charts for a selected ticker.
   • The chart options include candlestick, MACD, ADX, and RSI.

3. Backtesting:

   • A page allowing users to select a ticker and strategy to observe backtesting results.

Background Tasks:

• The backend runs price data queries and updates technical indicators every 4 hours.
• This updated data is then stored in the database.

Technology Stack

Frontend:

• React
• Typescript
• CSS with Bootstrap
• Plotly for charts

Backend:

• Python with FastAPI
• FastAPI Security for authentication
• yfinance (stock data)
• Binance API (cryptocurrency data)
• pandas-ta (technical indicator calculations)
• backtesting.py (custom script for backtesting strategies)
• SQLAlchemy (database interaction)

Database:

• PostgreSQL hosted on Supabase

Deployment:

• Backend: Render
• Frontend: Vercel

Project Structure

trading-app/ ├── frontend/ # Frontend code │ ├── src/ # Source code directory │ │ ├── components/ # Reusable UI components │ │ │ ├── common/ # Common components like Navbar, Loading, ErrorBoundary │ │ │ ├── screener/ # Screener table and filter panel components │ │ │ ├── charts/ # Chart components for candlestick, MACD, ADX, RSI │ │ │ └── backtesting/ # Strategy selector and results display components │ │ ├── pages/ # Application pages (Login, Screener, Charts, Backtesting) │ │ ├── services/ # Services for interacting with API and authentication │ │ └── utils/ # Utility functions and formatters │ ├── .env.local # Environment variables for local development │ └── vite.config.js # Configuration for frontend build tool (Vite) ├── backend/ # Backend code │ ├── app/ # Application core logic │ │ ├── api/ # API endpoints for screener, charts, and backtesting │ │ ├── core/ # Core functionalities like configuration, security, and database interaction │ │ ├── models/ # Data models for users, tickers, and backtests │ │ ├── schemas/ # Data validation schemas for API requests and responses │ │ ├── services/ # Services for market data retrieval, technical analysis, and backtesting │ │ └── tasks/ # Background tasks for data updates │ ├── tests/ # Unit and integration tests │ ├── requirements.txt # Backend dependencies │ └── render.yaml # Configuration for Render deployment ├── database/ # Database files (migrations and initialization script) │ └── migrations/ │ └── init.sql └── README.md # Project documentation

This structure promotes code organization, maintainability, and scalability.

Let me know if you have any questions about the application or the technology stack used!