OKX Cosmos - Cryptocurrency Trading Platform

🚀 Overview

OKX Cosmos is a modern, high-performance cryptocurrency trading platform built with cutting-edge technologies. The platform features real-time market data, advanced charting, secure authentication, and a responsive design optimized for both desktop and mobile trading.

✨ Key Features

• Real-time Market Data: Live price updates via SignalR
• Advanced Trading Interface: Professional-grade charts and order management
• Multi-theme Support: Light, dark, and custom themes
• Responsive Design: Optimized for all devices
• Secure Authentication: JWT-based authentication with refresh tokens
• Performance Optimized: Code splitting, lazy loading, and caching
• Accessibility First: WCAG 2.1 AA compliant
• Enterprise Ready: Production-grade security and monitoring

🏗️ Architecture

Frontend (Next.js 15)

nextjs-frontend/
├── src/
│   ├── app/                 # App Router pages
│   ├── components/          # React components
│   ├── lib/                 # Utilities and configurations
│   ├── hooks/               # Custom React hooks
│   ├── stores/              # Zustand stores
│   ├── types/               # TypeScript definitions
│   └── styles/              # Global styles
├── public/                  # Static assets
└── docs/                    # Documentation

Backend (.NET 8)

src/
├── Api/                     # ASP.NET Core Web API
├── Shared/                  # Shared libraries
├── Worker.Ingestion/        # Background services
└── Frontend/                # Legacy Blazor (deprecated)

🛠️ Technology Stack

Frontend

• Framework: Next.js 15 with App Router
• UI Library: React 19
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• UI Components: Radix UI primitives
• State Management: Zustand
• Data Fetching: SWR
• Real-time: SignalR
• Charts: Recharts
• Forms: React Hook Form + Zod
• Icons: Lucide React

Backend

• Framework: ASP.NET Core 8.0
• ORM: Entity Framework Core 9.0
• Database: SQLite (dev), SQL Server (prod)
• Authentication: JWT Bearer tokens
• Real-time: SignalR
• API Documentation: Swagger/OpenAPI

🚀 Quick Start

Prerequisites

• Node.js 18+
• .NET 8 SDK
• Git

Installation

1. Clone the repository

   git clone https://github.com/your-org/okx-cosmos.git
   cd okx-cosmos

2. Setup Backend

   cd src/Api
   dotnet restore
   dotnet ef database update
   dotnet run

3. Setup Frontend

   cd nextjs-frontend
   npm install
   npm run dev

4. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000
   • API Documentation: http://localhost:5000/swagger

📖 Documentation

• API Documentation
• Frontend Development Guide
• Backend Development Guide
• Deployment Guide
• Migration Guide
• Contributing Guidelines

🔧 Development

Available Scripts

Frontend:

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks
npm run test         # Run tests

Backend:

dotnet run           # Start development server
dotnet build         # Build project
dotnet test          # Run tests
dotnet ef migrations add <name>  # Add migration
dotnet ef database update       # Update database

Environment Variables

Create .env.local in the frontend directory:

NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_SIGNALR_URL=http://localhost:5000/hubs
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=http://localhost:3000

🧪 Testing

Frontend Testing

npm run test         # Unit tests
npm run test:e2e     # End-to-end tests
npm run test:a11y    # Accessibility tests
npm run test:perf    # Performance tests

Backend Testing

dotnet test          # All tests
dotnet test --filter Category=Unit      # Unit tests only
dotnet test --filter Category=Integration  # Integration tests only

🚀 Deployment

Production Build

# Frontend
npm run build
npm run start

# Backend
dotnet publish -c Release

Docker Deployment

docker-compose up -d

Vercel Deployment

npm run deploy:vercel

See Deployment Guide for detailed instructions.

🔒 Security

• JWT authentication with refresh tokens
• HTTPS enforcement
• CORS configuration
• Input validation and sanitization
• CSP headers
• Rate limiting
• SQL injection prevention

📊 Performance

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: Optimized for LCP, FID, CLS
• Bundle Size: < 200KB gzipped
• Load Time: < 2s on 3G networks

🌐 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contributing

Please read our Contributing Guidelines before submitting pull requests.

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📄 License

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

🆘 Support

• Documentation
• Issues
• Discussions

🙏 Acknowledgments

• Next.js - The React framework
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Low-level UI primitives
• Zustand - State management
• SWR - Data fetching library

---

Made with ❤️ by the OKX Cosmos Team