An elite cryptocurrency trading dashboard prototype built with React and Tailwind CSS.
This repository is a frontend / UIβUX showcase. All market data, AI outputs, and alerts are high-fidelity mock data for demonstrationβno live trading backend is connected.
- Live ticker tape β Horizontally scrollable symbol strip with interactive selection (demo quotes).
- Pro charting β Plotly-powered line and candlestick views, compare mode, and a time-machine style slider over mock series.
- AI swarm panel UI β Multi-role narrative layout with confidence and reasoning copy (simulated agent run).
- Market sentiment heatmap β Dense cross-asset sentiment grid for dashboard context.
- Trade history UI β Scrollable audit-style table of mock signals and summaries.
- Whale alerts β Animated feed of simulated large-flow cards.
- Polished shell β Sticky nav, command palette entry point, draggable dashboard tiles, and responsive layout patterns.
| Layer | Tools |
|---|---|
| UI | React Β· Vite Β· TypeScript |
| Styling | Tailwind CSS |
| Icons | Lucide React |
| Charts | Plotly.js Β· react-plotly.js |
npm install
npm run dev
Open the URL shown in the terminal (typically http://localhost:5173).
Other scripts: npm run build (production bundle) Β· npm run preview (preview build) Β· npm run lint
src/
βββ components/ # UI: charts, navbar, ticker, panels, widgets, loaders, β¦
βββ pages/ # Route-level views (e.g. Dashboard)
βββ hooks/ # React hooks (dashboard state, helpers)
βββ utils/ # Client helpers (e.g. time slicing, audio)
βββ constants/ # Shared constants (symbols, etc.)
βββ api/ # Stubs / future API wiring
βββ App.tsx
βββ main.tsx
βββ index.css
| GitHub | aliza-dev |
| Aliza Tariq | |
| [email protected] |
TradePilot AI β UI/UX demo Β· Aliza Tariq