Skip to content

Commit 08c7e38

Browse files
committed
update README
1 parent 3f91b52 commit 08c7e38

File tree

1 file changed

+2
-156
lines changed

1 file changed

+2
-156
lines changed

README.md

Lines changed: 2 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,5 @@
11
# Vibe Dashboard
22

3-
A modern frontend dashboard for displaying different metrics using bar charts.
3+
Dashboard for dog-fooding and displaying metrics for VoidZero projects.
44

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

Comments
 (0)