A cryptocurrency trading and DeFI dashboard built with Next.js 16, React 19, TypeScript, PostgreSQL and Tailwind CSS.
- Multi-Network Support: Seamlessly switch between Ethereum, Polygon, BSC, Arbitrum, Optimism, and Avalanche
- Real-time Portfolio Metrics: Track balance, deposits, and accrued yield
- Theme Support: Full light/dark mode with CSS color variables
- Advanced Price Charts: Multiple timeframes (15M, 1H, 4H, 1D, 1W, 1M)
- Candlestick Analysis: OHLC data with volume bars
- Professional Trading Panel: Buy/Sell orders with leverage control
- Order Book: Real-time bid/ask visualization
- Market Data: Live token prices, 24h changes, and market caps
- Deposit Methods: Credit card, bank transfer, crypto deposit
- Withdrawals: Multi-network support with fee optimization
- Payment Methods Management: Secure storage of payment information
- Transaction History: Complete audit trail
- Vault Discovery: Browse available yield strategies
- Portfolio Tracking: Monitor active positions and returns
- Risk Assessment: Low/Medium/High risk classifications
- APY Optimization: Compare yields across protocols
- Security Settings: 2FA, password management
- Notification Preferences: Customizable alerts
- Profile Settings: Account information and preferences
- Support Center: Integrated help and documentation
- Next.js 16: Latest App Router with React 19
- React 19.2.5: Modern UI development
- TypeScript 5.9.3: Type-safe code
- Tailwind CSS 4.1.17: Utility-first styling
- Recharts 2.15.0: Professional charting
- shadcn/ui: Accessible component library
- Lucide React: Beautiful icon set
- Radix UI: Headless component primitives
- React Context: Global app state (network, navigation)
- Client-side hooks: Efficient data fetching
- PostgreSQL: Comprehensive schema for all features
- SQL Scripts: 7 migration files with sample data
``` ├── app/ │ ├── layout.tsx # Root layout with providers │ ├── page.tsx # Main dashboard │ └── globals.css # Global styles with CSS variables ├── components/ │ ├── pages/ # Page components │ ├── charts/ # Chart components │ ├── ui/ # shadcn UI components │ └── [features]/ # Feature-specific components ├── hooks/ │ ├── use-app-state.tsx # Network and app state │ ├── use-navigation.tsx # Page navigation │ └── use-mobile.tsx # Responsive utilities ├── lib/ │ ├── data-utils.ts # Data utilities and mock data │ └── utils.ts # Helper functions ├── scripts/ │ ├── 01_create_networks_schema.sql │ ├── 02_create_portfolios_schema.sql │ ├── 03_create_transactions_schema.sql │ ├── 04_create_market_data_schema.sql │ ├── 05_create_yield_vaults_schema.sql │ ├── 06_create_payment_methods_schema.sql │ └── 07_insert_sample_data.sql └── styles/ └── globals.css # CSS variables and utilities ```
-
Clone the repository ```bash git clone cd crypto-dashboard ```
-
Install dependencies ```bash npm install ```
-
Set up environment variables ```bash cp .env.example .env.local ```
-
Run development server ```bash npm run dev ```
-
Open in browser ``` http://localhost:3000 ```
To connect to a PostgreSQL database:
- Create a PostgreSQL instance (local or cloud)
- Run migration scripts in order: ```bash psql -U postgres -d crypto_dashboard -f scripts/01_create_networks_schema.sql ```
- Update environment variables ``` DATABASE_URL=postgresql://user:password@localhost:5432/crypto_dashboard ```
Located in the overview page header, allows switching between 6 major blockchain networks with real-time updates across the dashboard.
Full-featured order entry with:
- Market/Limit order selection
- Quick allocation buttons (25%, 50%, 75%, 100%)
- Leverage control (1-10x)
- Real-time total calculation
- 2FA security warning
Interactive token watchlist with:
- Star-based favorites system
- Filter by watchlist, gainers, losers
- Quick trade execution
- Live market data
Secure deposit/withdrawal with:
- Multiple payment methods
- Network fee optimization
- Transaction history
- Security features (2FA, SSL encryption)
All colors use CSS variables defined in styles/globals.css:
- Clean white backgrounds
- Dark text for readability
- Vibrant accent colors
- Deep navy backgrounds
- Light text
- Subtle accent colors
--background,--foreground: Base colors--primary,--secondary,--muted: Component states--success,--warning,--error: Status indicators--chart-1through--chart-5: Chart colors--bullish,--bearish,--neutral: Trading colors
The dashboard is ready to connect to your backend:
- Create API routes in
app/api/ - Implement database queries using your PostgreSQL connection
- Replace mock data in
lib/data-utils.ts - Add error handling and loading states
Example API route structure: ```typescript // app/api/portfolio/route.ts import { neon } from '@neondatabase/serverless'
export async function GET() { const sql = neon(process.env.DATABASE_URL) const portfolio = await sql('SELECT * FROM user_portfolios WHERE user_id = $1', ['user-123']) return Response.json(portfolio) } ```
- Chrome/Edge: Latest 2 versions
- Firefox: Latest 2 versions
- Safari: Latest 2 versions
- Next.js 16: Optimized bundling with Turbopack
- Code Splitting: Automatic route-based code splitting
- Image Optimization: Next.js Image component ready
- CSS-in-JS: Tailwind CSS with purging
- 2FA Support: Two-factor authentication ready
- SSL Encryption: Payment data encryption
- CSRF Protection: Built-in Next.js protection
- Row-Level Security: PostgreSQL RLS policies
- Environment Variables: Sensitive data management
- WebSocket support for real-time data
- Advanced technical indicators
- Portfolio rebalancing automation
- Alerts and notifications
- Mobile app (React Native)
- Advanced charting (TradingView Lightweight Charts)
MIT License - See LICENSE file for details
For issues, questions, or contributions, please open a GitHub issue or contact support. ```