Topstep Trading Platform Boilerplate

A full-stack boilerplate application for the Topstep Trading Platform, implementing all endpoints from the Topstep API specification.

Project Structure

├── api/                # Backend API service (Python FastAPI)
│   ├── app/            # Application code
│   │   ├── core/       # Core functionality and configuration
│   │   ├── models/     # Pydantic data models
│   │   ├── routers/    # API route handlers
│   │   └── services/   # Service layer for API calls
│   ├── main.py         # FastAPI application entry point
│   ├── .env            # Environment variables
│   └── requirements.txt # Python dependencies
│
├── ui/                 # Frontend React application
│   ├── public/         # Static files
│   ├── src/            # Source code
│   │   ├── components/ # React components (atomic design)
│   │   │   ├── atoms/  # Basic building blocks
│   │   │   ├── molecules/ # Combinations of atoms
│   │   │   ├── organisms/ # Combinations of molecules
│   │   │   └── templates/ # Page layouts
│   │   ├── constants/  # Global constants
│   │   ├── context/    # React context providers
│   │   ├── hooks/      # Custom React hooks
│   │   ├── pages/      # Full pages
│   │   ├── services/   # API services
│   │   ├── styles/     # Global styles
│   │   └── utils/      # Utility functions
│   ├── .env            # Environment variables
│   └── package.json    # Dependencies
│
└── config/             # Shared configuration
    └── topstep-swagger.json  # Swagger API specification

Getting Started

Using the Run Scripts

The easiest way to start both the frontend and backend:

On Unix/Mac

./run.sh

On Windows

run.bat

This will start both the frontend and backend servers:

• Frontend (UI): http://localhost:3000
• Backend (API): http://localhost:8000
• API Documentation: http://localhost:8000/docs

Running Components Separately

Running the API Server

cd api
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload

The API server will run on http://localhost:8000

Running the UI

cd ui
npm install
npm start

The UI will run on http://localhost:3000

Features

• Authentication with API key
• Account management
• Contract search and details
• Order management (search, place, cancel, modify)
• Position management
• Trade history
• Historical data retrieval
• Clean and minimal UI built with atomic design principles

Technologies

Frontend

• React.js
• React Router
• Styled Components
• Axios

Backend

• Python 3.8-3.11 (Python 3.13 not currently supported)
• FastAPI
• Pydantic for data validation
• JSON Web Tokens (JWT)
• HTTPX for API calls

Implementation

This project follows the atomic design methodology for better component reusability and maintenance:

1. Atoms: Basic UI components like buttons, inputs, and typography
2. Molecules: Combinations of atoms that form simple UI components
3. Organisms: Complex UI components composed of molecules and atoms
4. Templates: Page layouts that organize organisms, molecules, and atoms
5. Pages: Specific instances of templates with real content

The backend is a FastAPI application that serves as a middleware for the Topstep API, handling authentication, validation, and proxying requests while providing comprehensive API documentation via Swagger UI.