📈 Trade Paper - Paper Trading Platform

A full-stack web application for paper trading with real-time market data, advanced charting, and portfolio management features.

📋 Table of Contents

Overview
Features
Tech Stack
Quick Start
Project Structure
Installation
Running the Application
API Documentation
Configuration
Development
Testing
Deployment
Troubleshooting
Documentation
Contributing

Overview

Trade Paper is a comprehensive paper trading platform that allows users to practice trading strategies with real-time market data without risking actual capital. The application features professional-grade charting, real-time market data from Yahoo Finance, stop-loss monitoring, and a responsive interface designed for desktop and mobile devices.

Key Highlights

📊 Professional Charts - Full-screen candlestick and line charts with Lightweight Charts & Recharts
🎯 Stop Loss Monitoring - Real-time monitoring with Celery background tasks
💹 Live Market Data - Real-time data from Yahoo Finance API
🔐 Secure Authentication - JWT-based user authentication
📱 Responsive Design - Works seamlessly on mobile, tablet, and desktop
⚡ Fast & Scalable - Built with modern async frameworks and task queues

Features

🎯 Core Features

Real-Time Charts
- Candlestick charts for technical analysis
- Line charts for historical trend analysis
- Full-screen display capability
- Professional styling with smooth animations
Market Data Integration
- Real-time ticker data from Yahoo Finance
- Historical price data
- Market indicators and technical analysis
- Multi-ticker support
Portfolio Management
- Track paper trades
- Stop-loss monitoring
- Position management
- Trade history
User Management
- Secure registration and login
- JWT token-based authentication
- User profiles
- Portfolio tracking
Responsive Design
- Mobile optimization (< 480px)
- Tablet support (480-768px)
- Desktop layout (> 768px)
- Large screen support (> 1024px)

🔄 Background Processing

Celery worker for async task processing
Celery Beat for scheduled tasks
Real-time stop-loss monitoring
Task queue management

📊 Monitoring & Management

Flower dashboard for task monitoring
Django admin interface
Redis for caching and message brokering
Comprehensive logging

Tech Stack

Backend

Framework: Django 5.2.4 + Django REST Framework
API: FastAPI 0.115.0
Authentication: JWT (djangorestframework-simplejwt)
Task Queue: Celery 5.4.0 + Celery Beat
Message Broker: Redis 6.2.0
Real-Time: Channels 4.2.2 + Channels Redis
Database: PostgreSQL / SQLite (development)
Data Processing: Pandas 2.2.0
Market Data: Yahoo Finance (via yfinance)

Frontend

Framework: React 18.2.0
Build Tool: Vite 5.0.0
Router: React Router v6
HTTP Client: Axios
Charting: Lightweight Charts 4.2.1 + Recharts 2.12.7
Icons: Lucide React
CSS: Custom CSS with responsive design

DevOps & Tools

Task Monitoring: Flower 2.0.1
CORS: django-cors-headers
Environment: python-decouple, python-dotenv
WebSockets: Uvicorn with Websockets support

Quick Start

Prerequisites

Python: 3.9 or higher
Node.js: 18 or higher
Redis: Running locally or in Docker
Git: For version control

5-Minute Setup

# 1. Clone and navigate to project
git clone <repository-url>
cd trade_paper

# 2. Setup Python environment
python -m venv venv
venv\Scripts\activate  # Windows
# or source venv/bin/activate  # Linux/Mac

# 3. Install Python dependencies
pip install -r requirements.txt

# 4. Setup frontend
cd frontend
npm install
cd ..

# 5. Start Redis
# Docker: docker run -d -p 6379:6379 redis:latest
# Or native installation: redis-server

# 6. Run migrations
cd backend
python manage.py migrate
cd ..

# 7. Start all services (see Running the Application section)

Project Structure

trade_paper/
├── backend/                          # Django + FastAPI backend
│   ├── main/                         # Main app with core logic
│   │   ├── models.py                 # Database models
│   │   ├── views.py                  # API views
│   │   ├── serializers.py            # DRF serializers
│   │   ├── services/
│   │   │   └── market.py             # Market data service
│   │   ├── tasks.py                  # Celery tasks
│   │   └── urls.py                   # URL routing
│   ├── accounts/                     # User authentication
│   │   ├── models.py                 # User model
│   │   ├── views.py                  # Auth endpoints
│   │   └── serializers.py            # Auth serializers
│   ├── tickers/                      # Ticker data (FastAPI)
│   │   ├── app.py                    # FastAPI app
│   │   └── data/                     # Data files
│   ├── trade_paper/                  # Project settings
│   │   ├── settings.py               # Django settings
│   │   ├── urls.py                   # Main URL config
│   │   ├── wsgi.py                   # WSGI config
│   │   ├── asgi.py                   # ASGI config (WebSockets)
│   │   └── celery.py                 # Celery configuration
│   ├── manage.py                     # Django management
│   ├── main.py                       # FastAPI entry point
│   └── db.sqlite3                    # Development database
│
├── frontend/                         # React + Vite frontend
│   ├── src/
│   │   ├── components/               # React components
│   │   ├── pages/                    # Page components
│   │   ├── api/                      # API client
│   │   ├── context/                  # React context
│   │   ├── hooks/                    # Custom hooks
│   │   ├── services/                 # Services
│   │   ├── styles/                   # Global styles
│   │   ├── App.jsx                   # Main component
│   │   └── main.jsx                  # Entry point
│   ├── public/                       # Static assets
│   ├── package.json                  # NPM dependencies
│   ├── vite.config.js                # Vite configuration
│   └── index.html                    # HTML template
│
├── _MD/                              # Documentation
│   ├── QUICK_START.md                # Quick setup guide
│   ├── DELIVERY_SUMMARY.md           # Project delivery summary
│   ├── CHART_ENHANCEMENT_GUIDE.md    # Chart features
│   ├── STOP_LOSS_IMPLEMENTATION.md   # Stop loss logic
│   ├── TICKER_DETAIL_IMPLEMENTATION.md # Ticker details
│   └── ...                           # More documentation
│
├── requirements.txt                  # Python dependencies
├── package.json                      # Root package config
├── README.md                         # This file
└── pyvenv.cfg                        # Virtual env config

Installation

Backend Setup

# 1. Navigate to project root
cd trade_paper

# 2. Create virtual environment
python -m venv venv
venv\Scripts\activate

# 3. Install Python dependencies
pip install -r requirements.txt

# 4. Create .env file (optional)
# Add environment variables as needed
echo DEBUG=True > backend/.env

# 5. Setup database
cd backend
python manage.py migrate
python manage.py createsuperuser  # Create admin user
cd ..

Frontend Setup

# 1. Navigate to frontend
cd frontend

# 2. Install dependencies
npm install

# 3. Create .env file if needed
# Add API endpoint configuration

# 4. Build for production (optional)
npm run build

# 5. Return to root
cd ..

Redis Setup

Option 1: Docker (Recommended)

docker run -d --name trade-paper-redis -p 6379:6379 redis:latest

Option 2: Windows Native

# Download from https://github.com/microsoftarchive/redis/releases
# Install and run
"C:\Program Files\Redis\redis-server.exe"

Option 3: WSL

wsl redis-server

Running the Application

Start Services (6 Terminals)

Terminal 1: Redis Server

# Docker
docker start trade-paper-redis

# OR native/WSL
redis-server

Terminal 2: Django API Server

cd backend
python manage.py runserver
# Runs on http://localhost:8000

Terminal 3: Celery Worker

cd backend
celery -A trade_paper worker -l info

Terminal 4: Celery Beat (Scheduler)

cd backend
celery -A trade_paper beat -l info

Terminal 5: React Frontend

cd frontend
npm run dev
# Runs on http://localhost:5173

Terminal 6 (Optional): Flower Monitoring

cd backend
flower -A trade_paper --port=5555
# Dashboard at http://localhost:5555

Service URLs

Service	URL	Purpose
Frontend	http://localhost:5173	React application
Django API	http://localhost:8000	REST API
Admin Panel	http://localhost:8000/admin	Django admin
Flower Dashboard	http://localhost:5555	Task monitoring
Redis	localhost:6379	Message broker

Verify Everything is Running

# Test Redis
redis-cli ping
# Output: PONG

# Test Django API
curl http://localhost:8000/api/health
# Should return success

# Check Celery
curl http://localhost:5555  # Opens Flower dashboard

# Check Frontend
# Open http://localhost:5173 in browser

API Documentation

Authentication Endpoints

User Registration

POST /api/accounts/register/
Content-Type: application/json

{
  "username": "string",
  "email": "string",
  "password": "string"
}

User Login

POST /api/accounts/login/
{
  "username": "string",
  "password": "string"
}

Response:
{
  "access": "token",
  "refresh": "token"
}

Market Data Endpoints

Get Ticker Information

GET /api/main/ticker/<symbol>/

Get Historical Data

GET /api/main/ticker/<symbol>/history/?period=1mo

Get Real-Time Prices

GET /api/main/ticker/<symbol>/price/

Portfolio Endpoints

Get User Portfolio

GET /api/main/portfolio/

Create Trade

POST /api/main/trades/
{
  "symbol": "AAPL",
  "quantity": 10,
  "price": 150.50,
  "trade_type": "BUY"
}

Set Stop Loss

POST /api/main/trades/<id>/set-stop-loss/
{
  "stop_price": 140.00
}

Configuration

Django Settings

Located at backend/trade_paper/settings.py

Key Settings:

DEBUG - Set to False in production
ALLOWED_HOSTS - Configure for your domain
DATABASES - Database configuration
CELERY_BROKER_URL - Redis URL (default: redis://localhost:6379)
CORS_ALLOWED_ORIGINS - Frontend URL for CORS

Environment Variables

Create backend/.env:

DEBUG=False
SECRET_KEY=your-secret-key
DATABASE_URL=postgresql://user:password@localhost/tradepaper
REDIS_URL=redis://localhost:6379
ALLOWED_HOSTS=localhost,127.0.0.1,yourdomain.com

Frontend Configuration

Create frontend/.env:

VITE_API_URL=http://localhost:8000/api
VITE_WS_URL=ws://localhost:8000

Development

Code Style

The project follows:

Backend: PEP 8 (Python)
Frontend: ESLint configuration (JavaScript/React)

Running Tests

# Backend tests
cd backend
python manage.py test

# Frontend tests
cd frontend
npm test

Adding New Features

Backend API:
- Create model in main/models.py
- Create serializer in main/serializers.py
- Add endpoint in main/views.py
- Register URL in main/urls.py
Frontend:
- Create component in frontend/src/components/
- Add page in frontend/src/pages/
- Register route in App.jsx

Database Migrations:

cd backend
python manage.py makemigrations
python manage.py migrate

Debugging

Django Debugging:

# In views.py
import logging
logger = logging.getLogger(__name__)
logger.debug("Debug message")

Celery Task Debugging:

# Run worker with debug logging
celery -A trade_paper worker -l debug

React Debugging:

Use React DevTools browser extension
Check browser console for errors
Use console.log() or debugger breakpoints

Testing

Manual Testing Checklist

Charts:

Candlestick chart displays correctly
Line chart displays correctly
Full-screen mode works
Charts responsive on mobile
Chart switching works smoothly

Authentication:

User registration works
Login/logout functions
JWT tokens refreshed correctly
Protected routes require authentication

Market Data:

Real-time prices update
Historical data loads
Multiple tickers work
Data refreshes periodically

Stop Loss:

Stop loss can be set
Alerts trigger at threshold
Monitoring works continuously

Deployment

Production Checklist

# 1. Set production environment
export DEBUG=False
export SECRET_KEY=<generate-strong-key>

# 2. Collect static files
cd backend
python manage.py collectstatic --noinput

# 3. Run migrations
python manage.py migrate --noinput

# 4. Build frontend
cd ../frontend
npm run build

# 5. Run with production server
cd ../backend
gunicorn trade_paper.wsgi:application --workers 4

Deployment Options

Heroku: Use Procfile and buildpacks
AWS: EC2 with RDS, ElastiCache for Redis
Docker: Containerize with Docker Compose
PythonAnywhere: Simple Python hosting
Digital Ocean: App Platform or Droplet

Troubleshooting

Common Issues

Issue: "Connection refused" to Redis

Solution: Ensure Redis is running
docker ps  # Check if Redis container is running
redis-cli ping  # Test Redis connection

Issue: Celery tasks not processing

Solution: 
1. Verify Redis is running
2. Check Celery worker logs
3. Verify CELERY_BROKER_URL in settings

Issue: CORS errors in frontend

Solution:
1. Add frontend URL to CORS_ALLOWED_ORIGINS
2. Check browser console for specific error
3. Verify API_URL in frontend .env

Issue: Database migrations fail

Solution:
cd backend
python manage.py migrate --run-syncdb  # Recreate all tables

Issue: Frontend won't connect to API

Solution:
1. Verify Django server is running (http://localhost:8000)
2. Check VITE_API_URL in frontend/.env
3. Test API endpoint: curl http://localhost:8000/api/

Getting Help

Check the _MD/ folder for detailed documentation
Review Django/React documentation
Check Celery/Redis logs
Use Flower dashboard to monitor tasks

Documentation

Comprehensive documentation is available in the _MD/ folder:

QUICK_START.md - Get up and running in 5 minutes
DELIVERY_SUMMARY.md - Project overview and features
CHART_ENHANCEMENT_GUIDE.md - Charting details
STOP_LOSS_IMPLEMENTATION.md - Stop loss logic
TICKER_DETAIL_IMPLEMENTATION.md - Market data
VERIFICATION_CHECKLIST.md - QA checklist
INDEX.md - Documentation index

Contributing

Development Workflow

Fork or clone the repository
Create a feature branch: git checkout -b feature/your-feature
Make your changes with clear commit messages
Test your changes: npm test (frontend) / python manage.py test (backend)
Push to branch: git push origin feature/your-feature
Create a Pull Request with description

Commit Message Convention

[BACKEND/FRONTEND] Feature: Brief description
- Details of change
- Details of change

Fixes #issue-number

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support & Contact

For issues, questions, or suggestions:

📧 Email: support@tradepaper.app
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions
📚 Docs: See _MD/ folder

Acknowledgments

Built with:

Django & Django REST Framework
React & Vite
Lightweight Charts & Recharts
Yahoo Finance API
Redis & Celery
PostgreSQL

Last Updated: May 31, 2026
Status: Production Ready ✅
Version: 1.0.0

Name		Name	Last commit message	Last commit date
TradePaper		TradePaper
backend		backend
frontend		frontend
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
pyvenv.cfg		pyvenv.cfg
requirements.txt		requirements.txt

Latest commit

History

Folders and files

Repository files navigation