STACK Dashboard is a feature-rich, single-page application built with React 19, TypeScript, and Vite. It showcases a distinctive neo-brutalist design system with 19+ fully functional page components and real-time analytics.

Perfect as a starting point for admin dashboards, business tools, or as a reference implementation for modern React patterns.

🚀 Live Demo: https://tje3d.github.io/stack-dashboard/

• Real-time Metrics - Animated stat cards with trend indicators
• Interactive Charts - Revenue and activity visualizations with Recharts
• Activity Feed - Real-time user activity tracking

• Customer Management - CRM-style customer table with actions
• Analytics - Data visualization and reporting
• Support Tickets - Ticket management system
• Kanban Board - Drag-and-drop task management
• Billing - Invoice and payment tracking
• Inventory - Stock management interface

• Chat - Real-time messaging interface
• Email Client - Full email management UI
• File Manager - Browse and manage files
• Calendar - Event scheduling and management
• Timeline - Project timeline visualization
• Gallery - Image gallery with grid view

• Market Overview - Cryptocurrency market data
• Trading Terminal - Buy/sell interface
• Wallet - Portfolio tracking
• Converter - Real-time crypto exchange rates

• Settings - User preferences and configuration
• Notifications - Alert management center
• Authentication - Login page (demo)

• Bun (recommended) or Node.js 18+

1. Clone the repository

   git clone https://github.com/tje3d/stack-dashboard.git
   cd stack-dashboard

2. Install dependencies

   bun install
   # or with npm: npm install

3. Run the development server

   bun run dev
   # or with npm: npm run dev

   Open http://localhost:3000 in your browser.

stack-dashboard/
├── components/
│   ├── layout.tsx           # Sidebar & Header
│   ├── DashboardWidgets.tsx # Dashboard components
│   ├── ui.tsx               # Reusable UI elements
│   └── [Pages]/             # Individual page components
├── types.ts                 # TypeScript definitions
├── App.tsx                  # Main application
├── index.tsx                # Entry point
├── index.html               # HTML template + Tailwind config
└── vite.config.ts           # Vite configuration

STACK uses a custom neo-brutalist design language defined in index.html:

• Colors: neo-yellow, neo-red, neo-blue, neo-green, neo-purple, neo-pink, neo-black
• Shadows: 4px offset for distinctive depth
• Typography: Space Grotesk (headings), Space Mono (code)
• Borders: Heavy 2px solid borders for high contrast

bun run build
# or with npm: npm run build

Preview the production build:

bun run preview
# or with npm: npm run preview

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow existing code patterns and component structure
• Maintain the neo-brutalist design consistency
• Add TypeScript types for new props/interfaces
• Test across different screen sizes (responsive design)

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

• Design inspiration from neo-brutalist design movement
• Icons by Lucide
• Fonts by Google Fonts