CryptoX - Cryptocurrency Trading Application

A modern cryptocurrency trading platform case study project. Developed using Next.js 15, React 19, TypeScript, and Tailwind CSS.

🎯 About the Project

This project is a case study for developing the frontend of a cryptocurrency trading platform using modern web development technologies. It includes real-time data streaming, user management, and responsive design features.

🚀 Features

• Real-Time Data: Live price tracking with Binance WebSocket API integration
• User Management: State management with Zustand and persistent authentication
• Responsive Design: UI optimized for mobile and desktop
• Modern UI Components: Professional appearance with Shadcn/ui
• Form Management: React Hook Form and Zod validation
• Portfolio Tracking: User investment portfolio and profit/loss calculation
• Theme Support: Dark/Light mode support

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Main layout
│   ├── page.tsx           # Landing page
│   ├── market/            # Market page
│   │   ├── page.tsx       
│   │   └── components/    # Market-specific components
│   │       ├── market-dashboard/
│   │       └── market-table/
│   ├── dashboard/         # Dashboard page  
│   │   ├── page.tsx
│   │   ├── components/    # Dashboard-specific components
│   │   │   ├── portfolio-dashboard/
│   │   │   └── portfolio-table/
│   │   └── hooks/         # Dashboard-specific hooks
│   ├── login/             # Login page
│   │   ├── page.tsx
│   │   └── components/    # Login-specific components
│   ├── types/             # Type definitions
│   └── constants/         # Constants
├── components/            # Shared UI components
│   ├── ui/               # Shadcn/ui components
│   ├── auth-guard.tsx    # Route protection
│   ├── header.tsx        # Main header
│   └── ...
├── hooks/                # Custom hooks
├── lib/                  # Utility functions
├── providers/            # Context providers
├── services/             # API services
└── stores/               # Zustand stores

🏗️ Architectural Decisions

Component Organization

This project adopts a page-based component structure:

Why This Approach?

1. Page-Specific Components: Each page has its own components/ folder

   • app/market/components/ - Components used only on the market page
   • app/dashboard/components/ - Components used only on the dashboard page
   • app/login/components/ - Components used only on the login page

2. Shared Components: In the general src/components/ folder

   • Header, AuthGuard, UI components and other components used in multiple places

Advantages

• Modular Structure: Each page manages its own components
• Easy Maintenance: Page-specific changes don't affect other areas
• Performance: Optimized loading with Next.js code splitting
• Developer Experience: Related files are located close together

State Management Strategy

• Zustand: Simple and performant global state management
• Persist Middleware: Stores authentication state in localStorage
• Local State: Component-based useState usage

🛠️ Technology Stack

Frontend

• Next.js 15: Modern React framework with App Router
• React 19: Latest React version
• TypeScript: Type safety and developer experience
• Tailwind CSS v4: Utility-first CSS framework
• Shadcn/ui: Radix UI-based component library

Form Management

• React Hook Form: Performant form management
• Zod: Schema validation
• @hookform/resolvers: React Hook Form integration

State & Data

• Zustand: Global state management
• JSON Server: Mock backend API
• WebSocket: Real-time data streaming

Development Tools

• Biome: Linting and code formatting
• TypeScript: Static type checking
• Bun: Fast package manager and runtime

🚀 Installation and Running

Requirements

• Node.js 18+ or Bun
• Modern web browser

Installation Steps

1. Clone the repository

git clone https://github.com/raelsei/crypto-x.git
cd crypto-x

2. Install dependencies

# With Bun (recommended)
bun install

# or with npm
npm install

3. Start the mock backend

# Terminal 1 - JSON Server
bun run start:server
# Will run at http://localhost:3001

4. Start the development server

# Terminal 2 - Next.js App
bun dev
# Will run at http://localhost:3000

Production Build

bun run build
bun start

📱 Application Usage

Main Pages

1. Landing Page (/): Platform introduction and quick access
2. Market (/market): Crypto prices - public access
3. Login (/login): User login
4. Dashboard (/dashboard): Portfolio management - logged in users only

Demo Information

Demo account you can use for testing:

Email: admin
Password: admin123

💰 Supported Cryptocurrencies

The application supports the following cryptocurrency pairs:

• BTC/USDT - Bitcoin
• ETH/USDT - Ethereum
• XRP/USDT - Ripple
• BNB/USDT - Binance Coin
• SOL/USDT - Solana
• DOGE/USDT - Dogecoin
• TRX/USDT - Tron
• ADA/USDT - Cardano
• LINK/USDT - Chainlink
• AVAX/USDT - Avalanche

🔧 API Endpoints

Mock Backend (JSON Server)

GET    /users          # User list
POST   /users          # New user registration
GET    /orders         # User orders
POST   /orders         # Create new order

WebSocket Connection

• Binance WebSocket API: Real-time crypto prices
• Stream Format: {pair}@trade (e.g., btcusdt@trade)
• Connection Status: Visible in header

🎨 UI/UX Features

• Responsive Design: Mobile-first approach
• Dark/Light Theme: System preference or manual selection
• Modern Component Library: Consistent design with Shadcn/ui
• Loading States: Skeleton loaders and progress indicators
• Toast Notifications: User notifications with Sonner
• Form Validation: Real-time validation and error handling

🔄 Key Features

WebSocket Integration

• Real-time price updates
• Automatic connection renewal
• Connection status indicator

Authentication Flow

• Zustand-based state management
• LocalStorage persistence
• Route protection with AuthGuard
• Automatic redirect operations

Portfolio Calculation

• Real-time profit/loss calculation
• Investment amount vs current value comparison
• Trend analysis and visualization