DEEPTRADE

Real-Time. Intelligent. Immersive.
A modern web terminal designed for monitoring financial markets and detecting trading signals.

---

• The Hackathon Vision

"Markets never sleep. Analysts need tools that move just as fast."

DeepTrade was built as part of the ACM Recode MPSTME Hackathon challenge, where the goal was to redesign and rebuild modern analytical interfaces.

Instead of building a static dashboard, we created a dynamic terminal environment where information streams continuously and multiple panels react to market signals in real time.

Timeline	Milestone	Status
0-4 hrs	UI/UX Design & Terminal Layout	✅
4-8 hrs	Panel System & Dashboard Components	✅
8-12 hrs	Real-Time Charts & Market Metrics	✅
Future	Live Market APIs & AI Signal Detection	⏳

---

• Tech Stack

We built DeepTrade using a modern frontend architecture optimized for speed and scalability.

Frontend

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React

State Management

• Global Store: Zustand
• Event Bus: RxJS (Reactive Terminal Signals)

Visualization

• Advanced Candlestick, Bar, and Line charts for financial analytics

Deployment

• Vercel

---

• Key Features

Real-Time Market Terminal

DeepTrade provides a multi-panel analytical dashboard that simulates professional trading terminals used by analysts.

• Live performance metrics
• Dynamic financial charts (Candle / Bar / Line)
• Trading analytics & History
• Market depth monitoring

Performance Tracking

The dashboard tracks performance across different timeframes:

• Weekly / Monthly / Yearly / All-time statistics
• Real-time Balance & PnL tracking
• Dynamic risk/reward assessment

AI Whisper Alerts

DeepTrade includes AI-driven anomaly detection signals that highlight unusual market activity.

• Price shock detection
• Sudden market movement
• Abnormal trading behavior
• Insider flow detection

Multi-Panel Analytical Workspace

The terminal is divided into independent analytical panels, such as:

• Market Charts: High-frequency data visualization.
• Trade Monitoring: Live execution tracking.
• Order Book: Real-time liquidity depth.
• Watchlists: Instant access to trending assets.

---

• Demo & Screenshots

Landing Page	Terminal Dashboard

Features	About Section

---

• Project Structure

.
├── app/               # Next.js App Router (Pages & Layout)
│   ├── terminal/      # Trading Terminal Dashboard
│   └── page.tsx       # Landing Page
├── components/        # React Components
│   ├── terminal/      # Terminal Specific Widgets
│   └── ui/            # Reusable UI Components
├── hooks/             # Custom React Hooks
├── lib/               # Utility functions & Shared logic
├── public/            # Static Assets (Images, Videos)
└── types/             # TypeScript Type Definitions

---

• Local Setup

1. Clone the repository:

   git clone https://github.com/shivam-salkar/acm-recode.git

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Build for production:

   npm run build

---

• Architecture & Data Flow

The system follows a modular architecture, separating UI components from data logic via a reactive event-driven approach.

graph LR

A[User Opens Terminal] --> B[Dashboard Loads Panels]

B --> C[Performance Metrics]
B --> D[Market Charts]
B --> E[Trade Monitoring]
B --> F[Order Book]

C --> G[RxJS Event Bus]
D --> G
E --> G
F --> G

G --> H[Zustand Store]

H --> I[Reactive UI Update]

Loading

---

• Team helloworld

• Shivam Salkar (GitHub)
• Srushti Gaikwad (GitHub)
• Soham Yadav (GitHub)

---

Built with 💙 for the ACM Recode MPSTME Hackathon