🚀 DigitalFortune - Crypto Trading Platform# 🚀 DigitalFortune - Crypto Trading Platform# 🚀 DigitalFortune - Real-Time Crypto Trading Platform

Real-time cryptocurrency trading platform with microservices architecture

⚡ Quick Start

git clone https://github.com/abdulbaqui17/DigitalFortune.git![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?logo=postgresql&logoColor=white)![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?logo=postgresql&logoColor=white)

cd DigitalFortune

docker-compose up -d --build

Full-stack real-time cryptocurrency trading platform built with React, TypeScript, and microservices****Full-stack cryptocurrency trading platform with real-time features and microservices architecture

Visit http://localhost → New users get $5,000 demo balance!

---

🛠️ Built With

Frontend

• React 19 + TypeScript------

• Vite (build tool)

• Tailwind CSS (styling)

• Framer Motion (animations)

• Zustand (state management)## ⚡ Quick Start## ⚡ Quick Start

Backend

• Node.js + Express.js

• TypeScriptbashbash

• WebSocket (real-time data)

• JWT + bcrypt (auth)git clone https://github.com/abdulbaqui17/DigitalFortune.gitgit clone https://github.com/abdulbaqui17/DigitalFortune.git

Databasecd DigitalFortunecd DigitalFortune

• PostgreSQL (users, orders, positions)

• Redis (sessions, cache)docker-compose up -d --builddocker-compose up -d --build

DevOps``````

• Docker + Docker Compose

• Nginx (reverse proxy)

---Open http://localhost → Sign up → Get $5,000 demo balance → Start trading!Open http://localhost - Every new user gets $5,000 demo balance!

✨ Features

Trading Platform------

• Real-time candlestick charts (1m to 1D)

• Market/limit/stop-loss/take-profit orders

• Up to 100x leverage trading

• Live P&L tracking## ✨ Features## ✨ Key Features

• Automated liquidation engine

• Position management

Security & Auth****Trading### Trading

• JWT token authentication

• bcrypt password encryption- Real-time candlestick charts (1m to 1D timeframes)- Real-time candlestick charts with multiple timeframes

• Protected API routes

• User-isolated trading accounts- Market, limit, stop-loss, take-profit orders- Market, limit, stop-loss, and take-profit orders

UI/UX- Up to 100x leverage with margin tracking- Up to 100x leverage trading

• Animated landing page (20+ floating particles)

• 3D effects with parallax scrolling- Live P&L and position management- Live P&L tracking and position management

• Responsive mobile design

• Real-time balance updates- Automated liquidation system- Automated liquidation engine

---

🏗️ ArchitectureTech Highlights### Technical

React Client (Nginx)

      ↓- WebSocket real-time data streaming- WebSocket real-time data streaming

HTTP API + WebSocket + Poller

      ↓- Microservices architecture (6 containers)- Microservices architecture (HTTP, WS, Poller services)

PostgreSQL + Redis

```- PostgreSQL + Redis persistence- PostgreSQL + Redis for data persistence



**6 Docker Containers:**- Framer Motion landing page animations- Framer Motion animations on landing page

1. **Client** - React SPA

2. **HTTP Server** - REST API, auth, orders- Responsive design with Tailwind CSS

3. **WebSocket** - Real-time price streaming

4. **Poller** - Market data aggregation

5. **PostgreSQL** - Persistent storage

6. **Redis** - Session cache---



------



## 📁 Structure## 🛠️ Tech Stack



```## 🛠️ Tech Stack

DigitalFortune/

├── client/          # React + TypeScript frontend**Frontend:** React 19, TypeScript, Vite, Tailwind CSS, Framer Motion, Zustand  

├── httpserver/      # Express.js API

├── wsserver/        # WebSocket server**Backend:** Node.js, Express.js, TypeScript, WebSocket  **Frontend:** React 19, TypeScript, Vite, Tailwind CSS, Framer Motion, Zustand  

├── poller/          # Market data service

├── db/              # PostgreSQL schemas**Database:** PostgreSQL, Redis  **Backend:** Node.js, Express.js, TypeScript, WebSocket  

└── docker-compose.yml

```**DevOps:** Docker, Docker Compose, Nginx**Database:** PostgreSQL, Redis  



---**DevOps:** Docker, Docker Compose, Nginx



## 🔧 Development---



```bash## �️ Architecture

# Start services

docker-compose up -d## 🏗️ Architecture



# View logsMicroservices setup with 6 Docker containers:

docker-compose logs -f

```- **Client** - React SPA with Nginx

# Stop services

docker-compose down┌─────────────┐- **HTTP Server** - REST API, auth, orders (Express.js)

│ React SPA │ (Nginx :80)- WebSocket Server - Real-time data streaming

---

└──────┬──────┘- Poller - Market data aggregation

👨‍💻 Author

   │- **PostgreSQL** - User accounts, orders, positions

Abdul Baqui

GitHub: @abdulbaqui17 ┌───┴────────────┬─────────────┐- Redis - Session cache

--- │ │ │

┌──▼───────┐ ┌────▼────┐ ┌─────▼─────┐## � Development

Built with React, TypeScript, Docker & PostgreSQL│ HTTP API │ │ WebSocket│ │ Poller │

⭐ Star this repo if you find it useful!│ :3001 │ │ :3002 │ │ (Background)│```bash

└────┬─────┘ └────┬────┘ └─────┬─────┘# Start dev environment

 │             │              │docker-compose up -d

 └─────────┬───┴──────────────┘

           │# View logs

    ┌──────┴──────┐docker-compose logs -f httpserver

    │             │

┌────▼────┐ ┌────▼────┐# Stop services

│PostgreSQL│ │ Redis │docker-compose down

│ :5432 │ │ :6379 │```

└─────────┘ └─────────┘

**Services:**## 📁 Project Structure

- **Client** - React SPA with landing page + trading dashboard

- **HTTP Server** - REST API, auth, order management, risk engine```

- **WebSocket Server** - Real-time price updates and trade eventsDigitalFortune/

- **Poller** - Market data aggregation and candle generation├── client/                    # React Frontend

- **PostgreSQL** - User accounts, orders, positions│   ├── src/

- **Redis** - Session storage and caching│   │   ├── components/       # Reusable components

│   │   │   ├── landing/      # Landing page components

---│   │   │   │   ├── LandingNavbar.tsx

│   │   │   │   ├── HeroSection.tsx (with animations)

## 📁 Project Structure│   │   │   │   ├── FeaturesSection.tsx

│   │   │   │   ├── DashboardPreview.tsx (3D effects)

```│   │   │   │   └── LandingFooter.tsx

DigitalFortune/│   │   │   ├── chart/        # Trading chart components

├── client/          # React frontend (Vite + TypeScript)│   │   │   ├── orders/       # Order management UI

├── httpserver/      # Express.js API server│   │   │   └── positions/    # Position tracking UI

├── wsserver/        # WebSocket server│   │   ├── pages/

├── poller/          # Market data poller│   │   │   ├── Landing.tsx   # Landing page

├── db/              # PostgreSQL init scripts│   │   │   └── Dashboard.tsx # Trading dashboard

└── docker-compose.yml│   │   ├── hooks/            # Custom React hooks

```│   │   ├── lib/              # Utilities & helpers

│   │   ├── store/            # Zustand state management

---│   │   └── types/            # TypeScript definitions

│   ├── Dockerfile

## 🔧 Development│   ├── package.json

│   └── vite.config.ts

```bash│

# Start all services├── httpserver/               # HTTP API Server

docker-compose up -d│   ├── src/

│   │   ├── index.ts          # Main server & routes

# View logs│   │   ├── riskEngine.ts     # Risk management

docker-compose logs -f httpserver│   │   ├── sl_tp_watcher.ts  # Stop-loss/Take-profit watcher

│   │   ├── engine/

# Rebuild specific service│   │   │   ├── margin.ts     # Margin calculations

docker-compose up -d --build client│   │   │   └── simpleMargin.ts

│   │   ├── lib/

# Stop everything│   │   │   ├── liquidation.ts

docker-compose down│   │   │   ├── money.ts

```│   │   │   └── risk.ts

│   │   └── risk/

**Access Points:**│   │       ├── liquidation.ts

- Frontend: http://localhost│   │       ├── liquidator.ts

- API: http://localhost:3001│   │       └── snapshot.ts

- WebSocket: ws://localhost:3002│   ├── Dockerfile

│   └── package.json

---│

├── wsserver/                 # WebSocket Server

## 📦 What's Inside│   ├── src/

│   │   ├── index.ts          # WebSocket handler

**Landing Page**│   │   └── alerts.ts         # Alert system

- Eye-catching hero with 20+ floating particles│   ├── Dockerfile

- Feature cards with hover animations│   └── package.json

- 3D dashboard preview with parallax scrolling│

- Mobile-responsive design├── poller/                   # Market Data Poller

│   ├── src/

**Trading Dashboard**│   │   └── index.ts          # Price polling & candles

- Left sidebar: Instrument list│   ├── Dockerfile

- Center: Real-time charts + positions panel│   └── package.json

- Right sidebar: Order panel with leverage slider│

- Live balance and margin display├── db/

│   └── init.sql              # Database schema

**Backend**│

- JWT auth with 7-day token expiration├── docker-compose.yml        # Service orchestration

- User-specific order isolation└── README.md                 # This file

- Real-time margin monitoring```

- Automated stop-loss/take-profit execution

- Liquidation engine triggers at 0% margin---



---## 📡 API Documentation



## 🚀 Deployment### Authentication Endpoints



### Docker (Recommended)#### `POST /api/v1/signup`

```bashRegister a new user (receives $5,000 demo balance).

# On your server

git clone https://github.com/abdulbaqui17/DigitalFortune.git**Request:**

cd DigitalFortune```json

docker-compose up -d --build{

```  "email": "user@example.com",

  "password": "securePassword123",

### Manual  "username": "trader123"

```bash}

# Install dependencies```

cd client && npm install && cd ..

cd httpserver && npm install && cd ..**Response:**

cd wsserver && npm install && cd ..```json

cd poller && npm install && cd ..{

  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",

# Start services  "user": {

docker-compose up -d postgres redis    "id": 1,

cd httpserver && npm start &    "email": "user@example.com",

cd wsserver && npm start &    "username": "trader123"

cd poller && npm start &  }

cd client && npm run build && npx serve dist}

---#### POST /api/v1/signin

Login existing user.

🤝 Contributing

Request:

1. Fork the repo```json

2. Create feature branch (git checkout -b feature/amazing){

3. Commit changes (git commit -m 'Add amazing feature') "email": "user@example.com",

4. Push to branch (git push origin feature/amazing) "password": "securePassword123"

5. Open Pull Request}

---

---

## 📄 License

### Account Endpoints

MIT License - feel free to use for your projects!

#### `GET /api/v1/account`

---Get account balance and margin info.



## 👨‍💻 Author**Headers:** `Authorization: Bearer {token}`



**Abdul Baqui**  **Response:**

GitHub: [@abdulbaqui17](https://github.com/abdulbaqui17)```json

{

---  "balance": 5000.00,

  "equity": 5234.50,

<div align="center">  "free": 4500.00,

  "used": 734.50,

### ⭐ Star this repo if you find it helpful!  "upnl": 234.50,

  "level": 712.5,

Built with ❤️ using React, TypeScript, and Docker  "maintenance": 367.25

}

</div>```


---

### Trading Endpoints

#### `POST /api/v1/orders`
Place a new order.

**Request:**
```json
{
  "symbol": "BTCUSDT",
  "side": "buy",
  "type": "market",
  "quantity": 0.1,
  "leverage": 10,
  "stopLoss": 45000,
  "takeProfit": 55000
}

GET /api/v1/orders

Get open orders.

GET /api/v1/positions

Get open positions with P&L.

POST /api/v1/positions/:id/close

Close a position.

---

Market Data Endpoints

GET /api/v1/candles/:symbol

Get historical candles.

Query Params:

• interval: 1m, 5m, 15m, 1h, 4h, 1d
• limit: Number of candles (default: 100)

---

WebSocket Events

Client → Server:

// Subscribe to market data
ws.send(JSON.stringify({
  type: 'subscribe',
  symbol: 'BTCUSDT'
}));

Server → Client:

// Price update
{
  type: 'price',
  symbol: 'BTCUSDT',
  price: 43521.50,
  timestamp: 1699267200000
}

// Trade execution
{
  type: 'trade',
  orderId: 123,
  status: 'filled',
  price: 43521.50
}

// Position update
{
  type: 'position',
  positionId: 456,
  upnl: 234.50,
  roe: 4.69
}

---

💻 Development

Available Scripts

Client

npm run dev          # Start dev server (Vite)
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Backend Services

npm run dev          # Start with nodemon (auto-reload)
npm run build        # Compile TypeScript
npm start            # Start production server

Environment Variables

Create .env files in each service directory:

httpserver/.env:

DATABASE_URL=postgresql://postgres:postgres@postgres:5432/trading
JWT_SECRET=your-super-secret-jwt-key-change-in-production
PORT=3001
REDIS_URL=redis://redis:6379

wsserver/.env:

WS_PORT=3002
REDIS_URL=redis://redis:6379

---

🚢 Deployment

Production Deployment

Option 1: VPS/Cloud Server

# On your server
git clone https://github.com/abdulbaqui17/DigitalFortune.git
cd DigitalFortune

# Configure environment variables
nano .env

# Build and start services
docker-compose -f docker-compose.yml up -d --build

# Setup Nginx reverse proxy (optional)
sudo nano /etc/nginx/sites-available/trading

Sample Nginx config:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /ws {
        proxy_pass http://localhost:3002;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

Option 2: Docker Swarm

docker swarm init
docker stack deploy -c docker-compose.yml trading

Option 3: Kubernetes

kubectl apply -f k8s/

---

📸 Screenshots

Landing Page

• Eye-catching hero section with 20 floating particles
• Animated gradients and pulsing orbs
• 3D dashboard preview with parallax scrolling
• Feature cards with hover effects

Trading Dashboard

• Real-time candlestick charts
• Order panel with leverage slider
• Position tracking with live P&L
• Balance display with margin info

---

🎓 What You'll Learn

By exploring this project, you'll understand:

1. Full-Stack TypeScript Development

   • Type-safe frontend and backend
   • Shared types between services
   • Advanced TypeScript patterns

2. Real-Time Systems

   • WebSocket implementation
   • Event-driven architecture
   • Live data streaming

3. Microservices Architecture

   • Service separation
   • Inter-service communication
   • Docker orchestration

4. Advanced Frontend

   • Complex state management
   • Real-time UI updates
   • Performance optimization
   • Advanced animations

5. Trading Systems

   • Order matching engines
   • Margin calculations
   • Risk management
   • Liquidation logic

6. DevOps Practices

   • Containerization
   • Multi-stage Docker builds
   • Service orchestration
   • Production deployment

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

Contribution Ideas

• Add more cryptocurrency pairs
• Implement order book visualization
• Add trading indicators (RSI, MACD, etc.)
• Implement social trading features
• Add mobile app (React Native)
• Integrate real exchange APIs
• Add backtesting functionality
• Implement trading bots

---

📄 License

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

---

👨‍💻 Author

Abdul Baqui

• GitHub: @abdulbaqui17
• Project: DigitalFortune

---

🙏 Acknowledgments

• TradingView for Lightweight Charts
• Framer Motion for animation library
• Tailwind Labs for Tailwind CSS
• Vercel for Zustand state management
• The open-source community

---

📊 Project Stats

• Lines of Code: ~15,000+
• Components: 40+
• API Endpoints: 20+
• WebSocket Events: 10+
• Database Tables: 8
• Docker Services: 6
• Technologies Used: 15+

---

🎯 Future Roadmap

• Phase 1: Real exchange integration (Binance API)
• Phase 2: Mobile app development
• Phase 3: Social trading features
• Phase 4: Algorithmic trading bots
• Phase 5: Copy trading functionality
• Phase 6: NFT marketplace integration

---

⭐ Star this repository if you find it helpful!

🔗 Live Demo | Documentation | Issues

Built with ❤️ by Abdul Baqui