TradeSim Pro - Prop Trading Simulator

Repository: GitHub

Project Overview

Purpose

TradeSim Pro is a comprehensive prop trading simulator designed for beginner traders who want to practice trading cryptocurrencies, stocks, and forex pairs in a completely risk-free environment. The platform provides real-time market data, portfolio tracking, and performance analytics to help users develop their trading skills without risking real money.

Target Audience

Beginner Traders: Individuals new to trading who want to learn market dynamics
Finance Students: Students studying finance, economics, or trading
Strategy Testers: Traders wanting to test new strategies without financial risk
Educational Institutions: Schools and courses teaching financial markets

Value Proposition

Practice trading with virtual $10,000 starting balance
Real-time prices from Binance (crypto) and Alpha Vantage (stocks/forex)
Track performance with detailed statistics and charts
Learn from mistakes without losing real money

Application Flowchart

API Request Flowchart

The flowchart above shows the main user journey through the application, from registration to trading operations.

UX Design

Strategy

Project Goals

Goal	Description
Educational	Provide a safe environment for learning trading
Practical	Simulate real market conditions with live prices
Analytical	Offer insights through performance statistics
Accessible	Easy to use for complete beginners

User Goals

User Type	Goal
New Trader	Learn how to execute trades safely
Student	Understand market dynamics practically
Hobbyist	Test trading ideas without risk

User Stories

Epic 1: User Authentication

ID	As a...	I want to...	So that I can...	Priority
1.1	New User	Register an account	Start trading with virtual money	Must Have
1.2	Registered User	Log in to my account	Access my portfolio and trades	Must Have
1.3	Logged-in User	Log out securely	Protect my account	Must Have
1.4	User	See my login status	Know if I'm logged in	Must Have

Epic 2: Market Data

ID	As a...	I want to...	So that I can...	Priority
2.1	Trader	See real-time crypto prices	Make informed trading decisions	Must Have
2.2	Trader	See stock prices	Trade popular stocks	Must Have
2.3	Trader	See forex rates	Trade currency pairs	Must Have
2.4	Trader	See prices update automatically	Have current market data	Should Have

Epic 3: Trading

ID	As a...	I want to...	So that I can...	Priority
3.1	Trader	Open a BUY position	Enter the market	Must Have
3.2	Trader	Close my position (SELL)	Exit and realize profit/loss	Must Have
3.3	Trader	View my open positions	Monitor current trades	Must Have
3.4	Trader	View trade history	Analyze past performance	Must Have
3.5	Trader	Set Stop-Loss	Limit potential losses	Should Have
3.6	Trader	Set Take-Profit	Secure profits automatically	Should Have

Epic 4: Portfolio

ID	As a...	I want to...	So that I can...	Priority
4.1	Trader	See my account balance	Know available capital	Must Have
4.2	Trader	See total PnL	Track overall performance	Must Have
4.3	Trader	See win rate	Evaluate trading success	Should Have
4.4	Trader	See performance chart	Visualize progress	Should Have

Epic 5: Watchlist

ID	As a...	I want to...	So that I can...	Priority
5.1	Trader	Add assets to watchlist	Track interesting assets	Should Have
5.2	Trader	Remove from watchlist	Keep list relevant	Should Have

Wireframes

Desktop Views

Landing Page

Dashboard

Trading View

Mobile Views

Mobile Landing

Mobile Dashboard

Design Choices

Colour Scheme

Color	Hex	Usage
Accent Teal	`#00d4aa`	Primary buttons, success states
Success Green	`#00d4aa`	Profit indicators, buy buttons
Danger Red	`#ff6b6b`	Loss indicators, sell buttons
Warning Yellow	`#ffd93d`	Forex badges, warnings
Dark Background	`#0a0a0f`	Page background
Card Background	`#1a1a2e`	Cards, containers
Text Primary	`#ffffff`	Main text
Text Secondary	`#b8b8d3`	Secondary text

Typography

Element	Font	Weight
Headings	Inter	600-700
Body	Inter	400
Numbers/Data	JetBrains Mono	500

Design Rationale

Clean Interface: Trading requires focus, so minimal distractions
Color-Coded Data: Green/red for instant profit/loss recognition
Monospace Numbers: Easier to read and compare financial data
Responsive Layout: Trading on any device
Video Backgrounds: Immersive, professional FinTech aesthetic

Features

Existing Features

F1: User Authentication

Secure registration with email validation
Login with JWT token authentication
Password hashing with Django
Session management
Video background for immersive experience

F2: Real-Time Market Data with TradingView Charts

Live cryptocurrency prices (BTC, ETH) from Binance
Stock quotes (TSLA, META, AAPL) from Alpha Vantage
Forex rates (GBPUSD, EURUSD, USDJPY) from Alpha Vantage
TradingView mini charts for each asset
Full TradingView chart modal on click
Auto-refresh every 30 seconds

F3: Trading Simulator

Open BUY/SELL positions with one click
Real-time price display
Quick amount buttons ($100, $500, $1000, $5000)
Trade summary before execution
Live prices sidebar
Video background for immersive experience

F4: Portfolio Dashboard

Real-time account balance
Total unrealized PnL calculation
Open positions count
Trading tier display
Reset Balance button to restart with $10,000
Quick action buttons with professional icons

F5: Positions Management

View all open positions
Real-time PnL updates
Close positions with one click
Position details (entry price, current price, quantity)
Total unrealized PnL summary

F6: Watchlist

Add/remove favorite assets
Quick access to watched prices
One-click trade from watchlist
Asset type badges (Crypto, Stock, Forex)

F7: Mobile Responsive Design

Fully responsive on all devices
Hamburger menu for mobile navigation
Touch-friendly interface
Optimized layouts for small screens

F8: Video Backgrounds

Dynamic video backgrounds on key pages:
- Home page - Trading animation
- Login/Register - Chart visualization
- Trade page - Market data animation
- Positions/Watchlist - Trading theme

F9: Professional UI with React Icons

Feather/Lucide icons throughout the app
Clean, modern FinTech aesthetic
TradingView-inspired design
Consistent visual language

F10: User Feedback System

Success notifications on actions
Error messages for validation
Confirmation dialogs for critical actions
Loading indicators

Future Features

Feature	Description	Priority
Trade Journal	Notes and emotions per trade	Medium
Paper Trading Leagues	Compete with other users	Low
Advanced Charts	More TradingView features	Medium
Mobile App	Native iOS/Android app	Low
Email Alerts	Price alert notifications	Medium

Database Design

Entity Relationship Diagram

Models

CustomUser Model

Field	Type	Description
id	AutoField	Primary key
username	CharField	Unique username
email	EmailField	Unique email (used for login)
password	CharField	Hashed password
account_balance	DecimalField	Virtual balance (default: $10,000)
trading_tier	CharField	BASIC, PRO, MASTER
bio	TextField	Optional user bio
date_joined	DateTimeField	Registration date

Asset Model

Field	Type	Description
id	AutoField	Primary key
symbol	CharField	Trading symbol (BTC, TSLA, EURUSD)
name	CharField	Full name
asset_type	CharField	CRYPTO, STOCK, FOREX
api_source	CharField	BINANCE, ALPHAVANTAGE
is_active	BooleanField	Available for trading

Trade Model

Field	Type	Description
id	AutoField	Primary key
user	ForeignKey	Link to CustomUser
asset	ForeignKey	Link to Asset
trade_type	CharField	BUY or SELL
quantity	DecimalField	Amount traded
entry_price	DecimalField	Price at open
exit_price	DecimalField	Price at close (nullable)
stop_loss	DecimalField	Stop-loss price (nullable)
take_profit	DecimalField	Take-profit price (nullable)
pnl	DecimalField	Profit/Loss (nullable)
pnl_percent	DecimalField	PnL percentage
status	CharField	OPEN or CLOSED
opened_at	DateTimeField	Trade open time
closed_at	DateTimeField	Trade close time (nullable)

Portfolio Model

Field	Type	Description
id	AutoField	Primary key
user	OneToOneField	Link to CustomUser
total_pnl	DecimalField	All-time realized PnL
total_pnl_percent	DecimalField	PnL percentage
win_rate	DecimalField	Winning trade percentage
total_trades	IntegerField	Total closed trades
winning_trades	IntegerField	Winning trades count
losing_trades	IntegerField	Losing trades count
updated_at	DateTimeField	Last update

Watchlist Model

Field	Type	Description
id	AutoField	Primary key
user	ForeignKey	Link to CustomUser
asset	ForeignKey	Link to Asset
added_at	DateTimeField	Date added

Technologies Used

Languages

Python 3.12
JavaScript (ES6+)
HTML5
CSS3

Frameworks & Libraries

Backend

Technology	Version	Purpose
Django	5.0.1	Backend framework
Django REST Framework	3.14.0	API development
Simple JWT	5.3.1	JWT authentication
django-cors-headers	4.3.1	CORS handling
django-allauth	0.60.1	User authentication
dj-rest-auth	5.0.2	REST authentication
psycopg2-binary	2.9.9	PostgreSQL adapter
dj-database-url	2.1.0	Database configuration
gunicorn	21.2.0	WSGI server
whitenoise	6.6.0	Static files
requests	2.31.0	HTTP requests

Frontend

Technology	Version	Purpose
React	18.2.0	UI framework
React Router DOM	6.21.0	Client-side routing
Axios	1.6.2	HTTP client
React Toastify	9.1.3	Toast notifications
React Icons	5.0.1	Professional icons (Feather/Lucide)
Vite	5.0.10	Build tool & dev server

External Services

Service	Purpose
TradingView Widgets	Interactive charts
Binance API	Cryptocurrency prices
Alpha Vantage API	Stock & forex prices

Databases

Database	Usage
SQLite	Local development
PostgreSQL	Production (Heroku)

Tools & Services

Tool	Purpose
Git	Version control
GitHub	Repository hosting
GitHub Projects	Agile project management
Heroku	Cloud deployment
Postman	API testing
VS Code	Code editor
Draw.io	Flowcharts & ERD diagrams

Agile Methodology

GitHub Projects Board

This project was developed using Agile methodology with GitHub Projects as the management tool.

Board Link: TradeSim Pro Project Board

Sprint Structure

Sprint	Focus
Sprint 1	Setup, Auth, Models
Sprint 2	Trading, Prices, API
Sprint 3	Frontend, Testing, Deploy

User Stories

All user stories were created as GitHub Issues with:

Acceptance Criteria
Tasks checklist
Labels (Must Have, Should Have, Could Have)
Linked to Epics

Testing

Validation Testing

Python (PEP8 / Flake8)

All Python files were validated using Flake8 with --max-line-length=120.

File	Lines	Status	Screenshot
`manage.py`	23	✅ Pass
`config/settings.py`	205	✅ Pass
`config/urls.py`	53	✅ Pass
`config/wsgi.py`	16	✅ Pass
`authentication/models.py`	44	✅ Pass
`authentication/views.py`	99	✅ Pass
`authentication/serializers.py`	71	✅ Pass
`authentication/urls.py`	32	✅ Pass
`trading/models.py`	125	✅ Pass
`trading/views.py`	263	✅ Pass
`trading/serializers.py`	86	✅ Pass
`trading/urls.py`	26	✅ Pass
`portfolio/models.py`	82	✅ Pass
`portfolio/views.py`	47	✅ Pass
`portfolio/serializers.py`	47	✅ Pass
`portfolio/urls.py`	23	✅ Pass
TOTAL	1,242	100%	-

Validate Python Code →

JavaScript/JSX (ESLint)

All React components and JavaScript files were validated using ESLint.

File	Lines	Status	Screenshot
`main.jsx`	19	✅ Pass
`App.jsx`	43	✅ Pass
`context/AuthContext.jsx`	68	✅ Pass
`api/auth.js`	28	✅ Pass
`api/trading.js`	33	✅ Pass
`api/portfolio.js`	28	✅ Pass
`components/common/Navbar.jsx`	95	✅ Pass
`components/common/TradingViewChart.jsx`	55	✅ Pass
`components/common/ChartModal.jsx`	45	✅ Pass
`pages/Home.jsx`	85	✅ Pass
`pages/Login.jsx`	75	✅ Pass
`pages/Register.jsx`	80	✅ Pass
`pages/Dashboard.jsx`	180	✅ Pass
`pages/Trade.jsx`	165	✅ Pass
`pages/Positions.jsx`	120	✅ Pass
`pages/History.jsx`	95	✅ Pass
`pages/Watchlist.jsx`	110	✅ Pass
TOTAL	1,424	100%	-

Validate JS Code →

Validate JSX/Reac Code →

CSS (W3C CSS Validator)

All CSS files were validated using the W3C CSS Validation Service.

File	Lines	Status	Screenshot
`styles/index.css`	150	✅ Pass
`components/common/Navbar.css`	185	✅ Pass
`components/common/ChartModal.css`	65	✅ Pass
`pages/Home.css`	140	✅ Pass
`pages/Auth.css`	120	✅ Pass
`pages/Dashboard.css`	280	✅ Pass
`pages/Trade.css`	220	✅ Pass
`pages/Positions.css`	175	✅ Pass
`pages/Watchlist.css`	160	✅ Pass
TOTAL	1,495	100%	-

Validate CSS Code →

--

HTML (W3C HTML Validator)

File	Issues	Status	Screenshot
`frontend/index.html`	0	✅ Pass
`backend/templates/index.html`	0	✅ Pass

Validate HTML Code →

Lighthouse Performance

Page	Performance	Accessibility	Best Practices	SEO	Screenshot
Home (Desktop)	🟢 100	🟢 96	🟢 100	🟠 92
Home (Mobile)	🟢 99	🟠 85	🟢 100	🟠 92

Run Lighthouse →

Automated Testing

Python Tests (Django)

# Run all tests
python manage.py test

# Run with coverage
coverage run manage.py test
coverage report

Test Results: 29 tests passing ✅

Bugs

Resolved Issues

Bug #1: Custom User Model Migration Error

Issue: AUTH_USER_MODEL refers to model 'accounts.CustomUser' that has not been installed
Cause: Custom User Model was defined after initial Django migrations were created
Fix: Deleted all migration files and database, created CustomUser before first migration:

rm -rf accounts/migrations/0*.py
rm db.sqlite3
python manage.py makemigrations accounts
python manage.py migrate

Status: ✅ Resolved

Bug #2: CORS Error - No Access-Control-Allow-Origin

Issue: Browser blocking API requests with No 'Access-Control-Allow-Origin' header present
Cause: Django backend rejecting requests from React frontend running on different port (3000)
Fix: Installed and configured django-cors-headers in settings.py:

INSTALLED_APPS = [
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
    'http://127.0.0.1:3000',
]

Status: ✅ Resolved

Bug #3: JWT Token 401 Unauthorized

Issue: API returning 401 Unauthorized even with valid JWT token
Cause: Missing "Bearer " prefix when sending token in Authorization header
Fix: Updated frontend to use correct header format:

headers = {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}

Status: ✅ Resolved

Bug #4: User Has No Portfolio Error

Issue: RelatedObjectDoesNotExist: User has no portfolio when accessing portfolio endpoint
Cause: Portfolio instance not automatically created when new user registers
Fix: Added Django signal to create Portfolio on user creation:

@receiver(post_save, sender=User)
def create_user_portfolio(sender, instance, created, **kwargs):
    if created:
        Portfolio.objects.create(user=instance)

Status: ✅ Resolved

Bug #5: Floating Point Precision Error

Issue: Prices showing incorrect decimals (e.g., BTC: 97000.12345678901234)
Cause: Using FloatField for monetary values
Fix: Changed all monetary fields to DecimalField:

entry_price = models.DecimalField(max_digits=18, decimal_places=8)

Status: ✅ Resolved

Bug #6: Alpha Vantage Returning None

Issue: Stock and forex prices returning None
Cause: Free tier API rate limit (5 calls/minute) exceeded
Fix: Implemented 30-second price caching:

cache_key = f'price_{symbol}'
cached = cache.get(cache_key)
if cached:
    return Decimal(str(cached))

Status: ✅ Resolved

Bug #7: Static Files 404 on Heroku

Issue: React app showing white screen, 404 for CSS and JS files
Cause: backend/static/assets/ folder was in .gitignore
Fix: Force-added static files to git:

git add -f backend/static/assets/

Status: ✅ Resolved

Bug #8: React Router Routes Not Working on Heroku

Issue: Direct URL access to /dashboard returning Django 404
Cause: Django not configured to serve React app for client-side routes
Fix: Added catch-all URL pattern:

re_path(r'^(?!api|admin|static).*$', 
        TemplateView.as_view(template_name='index.html'))

Status: ✅ Resolved

Bug #9: MIME Type Error for CSS on Heroku

Issue: Refused to apply style... MIME type ('text/html')
Cause: Static files returning HTML error page
Fix: Properly configured WhiteNoise and ran collectstatic:

cd backend && python manage.py collectstatic --noinput

Status: ✅ Resolved

Known Issues

Issue	Description	Impact	Workaround
API Rate Limiting	Alpha Vantage limited to 5 calls/minute	Medium	30-second caching
Price Delay	First price fetch takes 1-2 seconds	Low	Prices cached after first load
UTC Timezone	Timestamps displayed in UTC	Low	None currently

Deployment

Heroku Deployment

The application is deployed on Heroku using GitHub integration.

Live URL: https://tradesim-pro-stiven-62203fadbb77.herokuapp.com

Deployment Steps

Create Heroku App
- Log in to Heroku Dashboard
- Click "New" → "Create new app"
- Enter app name and select region (Europe)
Connect GitHub Repository
- Go to "Deploy" tab
- Select "GitHub" as deployment method
- Connect your repository
Add PostgreSQL Database
- Go to "Resources" tab
- Search for "Heroku Postgres"
- Select "Essential 0" plan
Configure Environment Variables
- Go to Settings → "Reveal Config Vars"
- Add:
Key Value

SECRET_KEY Your Django secret key

DEBUG False

ALPHA_VANTAGE_KEY Your API key
Deploy
- Go to Deploy tab
- Click "Deploy Branch"
Run Migrations
- Click "More" → "Run console"
- Enter: cd backend && python manage.py migrate
Collect Static Files
- Enter: cd backend && python manage.py collectstatic --noinput

Local Development

Prerequisites

Python 3.12+
Node.js 18+
Git

Setup Steps

Clone Repository

git clone https://github.com/SteveDok22/TradeSim-Pro.git
cd TradeSim-Pro/backend

Create Virtual Environment

python -m venv venv
venv\Scripts\activate  # Windows

Install Dependencies

pip install -r requirements.txt

Run Migrations

python manage.py migrate

Run Server

python manage.py runserver

Frontend Setup

cd frontend
npm install
npm run dev

Forking the Repository

Go to GitHub Repository
Click "Fork" button
Clone your forked repository

Cloning the Repository

git clone https://github.com/YOUR-USERNAME/tradesim-pro.git
cd tradesim-pro

Credits

For detailed code attribution, see CODE_ATTRIBUTION.md

Quick Summary

Category	Source
Backend Framework	Django 5.0
API Framework	Django REST Framework
Authentication	SimpleJWT
Charts	TradingView Widgets
Icons	React Icons
Crypto Prices	Binance API
Stock/Forex Prices	Alpha Vantage

Acknowledgements

Code Institute - For the learning materials and project guidelines
My Mentor - For guidance and feedback throughout the project
Slack Community - For support and troubleshooting help

Developed by Stiven | GitHub | 2025

Name		Name	Last commit message	Last commit date
Latest commit History 203 Commits
backend		backend
docs		docs
frontend		frontend
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
requirements.txt		requirements.txt
runtime.txt		runtime.txt

Key	Value
`SECRET_KEY`	Your Django secret key
`DEBUG`	`False`
`ALPHA_VANTAGE_KEY`	Your API key

SteveDok22/TradeSim-Pro

Folders and files

Latest commit

History

Repository files navigation

TradeSim Pro - Prop Trading Simulator

Table of Contents

Project Overview

Purpose

Target Audience

Value Proposition

Application Flowchart

API Request Flowchart

UX Design

Strategy

Project Goals

User Goals

User Stories

Epic 1: User Authentication

Epic 2: Market Data

Epic 3: Trading

Epic 4: Portfolio

Epic 5: Watchlist

Wireframes

Desktop Views

Mobile Views

Design Choices

Colour Scheme

Typography

Design Rationale

Features

Existing Features

F1: User Authentication

F2: Real-Time Market Data with TradingView Charts

F3: Trading Simulator

F4: Portfolio Dashboard

F5: Positions Management

F6: Watchlist

F7: Mobile Responsive Design

F8: Video Backgrounds

F9: Professional UI with React Icons

F10: User Feedback System

Future Features

Database Design

Entity Relationship Diagram

Models

CustomUser Model

Asset Model

Trade Model

Portfolio Model

Watchlist Model

Technologies Used

Languages

Frameworks & Libraries

Backend

Frontend

External Services

Databases

Tools & Services

Agile Methodology

GitHub Projects Board

Sprint Structure

User Stories

Testing

Validation Testing

Python (PEP8 / Flake8)

JavaScript/JSX (ESLint)

CSS (W3C CSS Validator)

HTML (W3C HTML Validator)

Lighthouse Performance

Automated Testing

Python Tests (Django)

Bugs

Resolved Issues

Bug #1: Custom User Model Migration Error

Bug #2: CORS Error - No Access-Control-Allow-Origin

Bug #3: JWT Token 401 Unauthorized

Bug #4: User Has No Portfolio Error

Bug #5: Floating Point Precision Error

Bug #6: Alpha Vantage Returning None

Packages