|
1 | 1 | # Vibe Dashboard |
2 | 2 |
|
3 | | -A modern frontend dashboard for displaying different metrics using bar charts. |
| 3 | +Dashboard for dog-fooding and displaying metrics for VoidZero projects. |
4 | 4 |
|
5 | | -## 🚀 Features |
6 | | - |
7 | | -- **Interactive Bar Charts**: Visualize metrics with responsive Recharts components |
8 | | -- **Multiple Metrics**: Switch between Sales, User Activity, and Revenue data |
9 | | -- **Modern UI**: Clean, professional dashboard design with smooth transitions |
10 | | -- **Responsive Design**: Works across desktop and mobile devices |
11 | | -- **TypeScript**: Full type safety throughout the application |
12 | | -- **Monorepo Structure**: Organized with pnpm workspaces |
13 | | - |
14 | | -## 📦 Tech Stack |
15 | | - |
16 | | -- **Frontend Framework**: React 19 with TypeScript |
17 | | -- **Build Tool**: Vite 7 with Rolldown bundler (rolldown-vite) |
18 | | -- **Charts**: Recharts |
19 | | -- **Icons**: Lucide React |
20 | | -- **Package Manager**: pnpm |
21 | | -- **Monorepo**: pnpm workspaces |
22 | | - |
23 | | -## ⚡ Performance |
24 | | - |
25 | | -The dashboard uses **rolldown-vite** for significantly faster build times and **oxlint** for ultra-fast linting: |
26 | | - |
27 | | -- **Build Performance**: ~13.8x faster builds (309ms vs 4.28s) with Rolldown |
28 | | -- **Linting Performance**: Extremely fast linting (~2ms) with oxlint |
29 | | -- **Development**: Fast startup (306ms) with Rolldown's Rust-based bundler |
30 | | -- **Hot Module Replacement**: Instant updates during development |
31 | | - |
32 | | -## 🏗 Project Structure |
33 | | - |
34 | | -``` |
35 | | -vibe-dashboard/ |
36 | | -├── apps/ |
37 | | -│ └── dashboard/ # Main dashboard application |
38 | | -│ ├── src/ |
39 | | -│ │ ├── App.tsx # Main dashboard component |
40 | | -│ │ ├── App.css # Dashboard styles |
41 | | -│ │ └── ... |
42 | | -│ └── package.json |
43 | | -├── packages/ # Shared packages (future) |
44 | | -├── package.json # Root package.json |
45 | | -├── pnpm-workspace.yaml # pnpm workspace configuration |
46 | | -└── README.md |
47 | | -``` |
48 | | - |
49 | | -## 🚀 Getting Started |
50 | | - |
51 | | -### Prerequisites |
52 | | - |
53 | | -- Node.js (v20 or higher) |
54 | | -- pnpm (v10 or higher) |
55 | | - |
56 | | -### Installation |
57 | | - |
58 | | -1. Clone the repository: |
59 | | - |
60 | | -```bash |
61 | | -git clone https://github.com/Boshen/vibe-dashboard.git |
62 | | -cd vibe-dashboard |
63 | | -``` |
64 | | - |
65 | | -2. Install dependencies: |
66 | | - |
67 | | -```bash |
68 | | -pnpm install |
69 | | -``` |
70 | | - |
71 | | -3. Start the development server: |
72 | | - |
73 | | -```bash |
74 | | -pnpm dev |
75 | | -``` |
76 | | - |
77 | | -4. Open your browser and navigate to `http://localhost:5173` |
78 | | - |
79 | | -### Available Scripts |
80 | | - |
81 | | -- `pnpm dev` - Start the development server |
82 | | -- `pnpm build` - Build all applications for production |
83 | | -- `pnpm lint` - Run linting across all packages |
84 | | -- `pnpm test` - Run tests across all packages |
85 | | -- `pnpm clean` - Clean build artifacts |
86 | | -- `pnpm build-deploy` - Lint and build for deployment |
87 | | - |
88 | | -### Deployment |
89 | | - |
90 | | -The dashboard is automatically deployed to GitHub Pages when changes are pushed to the `main` branch. |
91 | | - |
92 | | -**Live Demo**: [https://boshen.github.io/vibe-dashboard/](https://boshen.github.io/vibe-dashboard/) |
93 | | - |
94 | | -The deployment process: |
95 | | - |
96 | | -1. Runs linting and builds the project |
97 | | -2. Deploys the built assets to GitHub Pages |
98 | | -3. The app is served with the correct base path `/vibe-dashboard/` |
99 | | - |
100 | | -## 📊 Dashboard Features |
101 | | - |
102 | | -### Metrics Views |
103 | | - |
104 | | -1. **Sales**: Monthly sales data with trend visualization |
105 | | -2. **User Activity**: Daily active/inactive users with stacked bars |
106 | | -3. **Revenue**: Quarterly revenue breakdown |
107 | | - |
108 | | -### Interactive Elements |
109 | | - |
110 | | -- Click navigation buttons to switch between different metrics |
111 | | -- Hover over chart elements for detailed tooltips |
112 | | -- Responsive design adapts to different screen sizes |
113 | | - |
114 | | -## 🔧 Development |
115 | | - |
116 | | -### Rolldown Version Testing |
117 | | - |
118 | | -The repository includes a tool for testing different rolldown-vite versions: |
119 | | - |
120 | | -```bash |
121 | | -# List available versions |
122 | | -pnpm rolldown:list |
123 | | - |
124 | | -# Switch to a specific version (by index) |
125 | | -pnpm rolldown:use 2 |
126 | | - |
127 | | -# Switch to a specific version (by version string) |
128 | | -pnpm rolldown:use 7.1.2 |
129 | | - |
130 | | -# Use experimental versions from pkg.pr.new |
131 | | -pnpm rolldown:use pkg.pr.new/rolldown-rs/vite@1234 |
132 | | -``` |
133 | | - |
134 | | -The tool automatically: |
135 | | - |
136 | | -- Updates the package.json with the new version |
137 | | -- Installs dependencies |
138 | | -- Rebuilds the application |
139 | | - |
140 | | -See [`tool/README.md`](tool/README.md) for detailed usage instructions. |
141 | | - |
142 | | -### Adding New Metrics |
143 | | - |
144 | | -1. Add your data to the respective data arrays in `apps/dashboard/src/App.tsx` |
145 | | -2. Update the metrics configuration with your new metric |
146 | | -3. Customize the chart rendering logic if needed |
147 | | - |
148 | | -### Styling |
149 | | - |
150 | | -The dashboard uses modern CSS with: |
151 | | - |
152 | | -- CSS Grid for responsive layouts |
153 | | -- Flexbox for component alignment |
154 | | -- Custom CSS variables for consistent theming |
155 | | -- Responsive breakpoints for mobile support |
156 | | - |
157 | | -## 📝 License |
158 | | - |
159 | | -MIT |
| 5 | +Built entirely through vibe coding. |
0 commit comments