A modern, real-time cryptocurrency trading platform frontend built with React, TypeScript, and Vite. This application provides a seamless trading experience with live market data, order management, and portfolio tracking through WebSocket connections.
This frontend connects to the Spectuel backend API. For backend setup and documentation, visit: https://github.com/JadoreThompson/spectuel-backend
- Live Market Data: Real-time price updates and candlestick charts via WebSocket connections
- Order Management: Place, modify, and cancel orders with instant feedback
- Live Order Book: Real-time order book updates showing market depth
- Activity Log: Live event stream showing order fills, cancellations, and system events
- Asset Overview: View your portfolio distribution with interactive pie charts
- Balance Tracking: Real-time balance updates including available and escrowed funds
- Asset Balances: Detailed breakdown of all asset holdings
- Transaction History: Complete history of all trading activities
- Interactive Charts: Candlestick charts with multiple timeframes (1m, 5m, 15m, 1h, 4h, 1d)
- Market Statistics: 24-hour price changes, highs, lows, and volume
- Multiple Markets: Support for various trading pairs
- Price Alerts: Real-time price updates for active markets
- Dark/Light Mode: Toggle between themes for comfortable viewing
- Responsive Design: Optimized for desktop and mobile devices
- Type-Safe: Full TypeScript support with auto-generated API types
- Modern UI: Built with Radix UI and Tailwind CSS for a polished interface
Trading interface with chart loading state
Full trading interface with live market data
- Node.js 18+ and npm/yarn/pnpm
- Access to the Spectuel backend API (see backend repository)
- Clone the repository:
git clone https://github.com/yourusername/spectuel-frontend.git
cd spectuel-frontend- Install dependencies:
npm install- Configure the API endpoint:
Create a
.envfile in the root directory:
VITE_API_BASE_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000- Start the development server:
npm run devThe application will be available at http://localhost:5173
- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- React Router 7 - Client-side routing
- TanStack Query - Server state management and caching
- Zustand - Client state management
- WebSocket - Real-time data streaming
- Radix UI - Accessible component primitives
- Tailwind CSS - Utility-first styling
- shadcn/ui - Pre-built component library
- Lucide React - Icon library
- Sonner - Toast notifications
- Lightweight Charts - High-performance candlestick charts
- Recharts - Portfolio pie charts and data visualization
- Orval - Auto-generate TypeScript API client from OpenAPI spec
src/
├── components/ # Reusable UI components
│ ├── ui/ # shadcn/ui components
│ ├── layouts/ # Layout components
│ ├── ChartPanel.tsx # Trading chart component
│ ├── EventLog.tsx # Activity log component
│ └── ...
├── hooks/ # Custom React hooks
│ ├── auth-hooks.ts # Authentication hooks
│ ├── order-hooks.ts # Order management hooks
│ ├── user-hooks.ts # User data hooks
│ └── market-hooks.ts # Market data hooks
├── lib/ # Utility libraries
│ ├── query/ # TanStack Query configuration
│ ├── api/ # Auto-generated API client
│ └── utils.ts # Helper functions
├── pages/ # Page components
│ ├── TradingPage.tsx # Main trading interface
│ ├── UserOverviewPage.tsx # Portfolio overview
│ ├── LoginPage.tsx # Authentication
│ └── ...
├── stores/ # Zustand stores
├── types/ # TypeScript type definitions
└── App.tsx # Root component
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run orval- Generate API client from OpenAPI spec
The application maintains persistent WebSocket connections to the backend for real-time updates:
- Instant balance changes when orders are placed or filled
- Real-time escrow balance tracking
- Live available balance calculations
- Order placement confirmations
- Fill notifications with execution details
- Cancellation updates
- Order status changes
- Live price updates
- Real-time candlestick data
- Order book depth changes
- Trade execution stream
- Automatic reconnection on disconnect
- Connection status indicators
- Graceful error handling
The application uses JWT-based authentication:
- Register: Create a new account with email and password
- Login: Authenticate to receive access tokens
- Session Management: Automatic token refresh and secure storage
- WebSocket Auth: Separate WebSocket tokens for real-time connections
- Select Market: Choose a trading pair from the instrument selector
- Analyze: View charts, order book, and recent trades
- Place Order: Enter price and quantity, select order type (limit/market)
- Monitor: Track order status in the activity log
- Manage: View and cancel open orders as needed
The application includes a CloneTradingPage with static dummy data for demonstration purposes:
- Pre-generated candlestick data
- Mock order book and trades
- No API calls or WebSocket connections
- Perfect for testing UI without backend
The API client is auto-generated from the backend's OpenAPI specification using Orval:
npm run orvalThis generates TypeScript types and API functions in src/lib/api/ based on the backend schema.
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License.
- Built with Vite
- UI components from shadcn/ui
- Charts powered by Lightweight Charts
- Backend API: Spectuel Backend