Skip to content

Commit a041b41

Browse files
CopilotBoshen
Copilot
and
Boshen
authored
Add comprehensive GitHub Copilot instructions for vibe-dashboard development workflow (#4)
* Initial plan * Initialize frontend pnpm monorepo with interactive dashboard (#2) * Initial plan * Complete pnpm monorepo setup with dashboard app Co-authored-by: Boshen <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Boshen <[email protected]> * Add comprehensive GitHub Copilot instructions with validated commands and timing Co-authored-by: Boshen <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Boshen <[email protected]>
1 parent ee4220c commit a041b41

File tree

1 file changed

+161
-0
lines changed

1 file changed

+161
-0
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
# Vibe Dashboard
2+
A modern frontend dashboard for displaying different metrics using bar charts. Built with React 19, TypeScript, Vite 7, and organized as a pnpm monorepo.
3+
4+
**ALWAYS follow these instructions first. Only fallback to additional search and context gathering if the information provided here is incomplete or found to be in error.**
5+
6+
## Working Effectively
7+
8+
### Prerequisites and Installation
9+
- Install Node.js v20 or higher (verified working with v20.19.4)
10+
- Install pnpm globally: `npm install -g pnpm` (requires pnpm v10 or higher)
11+
- Bootstrap the repository:
12+
```bash
13+
pnpm install
14+
```
15+
- **Timing**: Takes approximately 10 seconds. NEVER CANCEL. Set timeout to 60+ seconds.
16+
17+
### Build and Development
18+
- Build the project:
19+
```bash
20+
pnpm build
21+
```
22+
- **Timing**: Takes approximately 7 seconds. NEVER CANCEL. Set timeout to 60+ seconds.
23+
- Builds TypeScript and creates production bundle with Vite
24+
- **Expected output**: Creates `dist/` directory in `apps/dashboard/` with minified assets
25+
26+
- Start development server:
27+
```bash
28+
pnpm dev
29+
```
30+
- Starts at `http://localhost:5173/`
31+
- **Timing**: Starts in under 1 second (192ms)
32+
- Uses Vite with hot module replacement (HMR)
33+
34+
- Lint the code:
35+
```bash
36+
pnpm lint
37+
```
38+
- **Timing**: Takes approximately 2 seconds
39+
- Runs ESLint across all packages
40+
- **ALWAYS run before committing** to avoid CI failures
41+
42+
- Clean build artifacts:
43+
```bash
44+
pnpm clean
45+
```
46+
- **Timing**: Takes under 1 second
47+
- Removes `dist/` directories
48+
49+
- Test command:
50+
```bash
51+
pnpm test
52+
```
53+
- **Note**: Currently no tests are configured, command runs but executes nothing
54+
- Takes under 1 second
55+
56+
### Repository Structure
57+
```
58+
vibe-dashboard/
59+
├── .github/ # GitHub configuration
60+
├── apps/
61+
│ └── dashboard/ # Main React dashboard application
62+
│ ├── src/
63+
│ │ ├── App.tsx # Main dashboard component with metrics data
64+
│ │ ├── App.css # Dashboard styles and responsive design
65+
│ │ ├── main.tsx # React entry point
66+
│ │ └── ...
67+
│ ├── package.json # Dashboard-specific dependencies
68+
│ ├── vite.config.ts # Vite configuration
69+
│ └── ...
70+
├── packages/ # Shared packages (future use)
71+
├── package.json # Root package.json with workspace scripts
72+
├── pnpm-workspace.yaml # pnpm workspace configuration
73+
├── pnpm-lock.yaml # Lock file
74+
└── tsconfig.json # Root TypeScript configuration
75+
```
76+
77+
## Validation
78+
79+
### Manual Testing Scenarios
80+
**ALWAYS test these scenarios after making changes:**
81+
82+
1. **Basic functionality**:
83+
- Run `pnpm dev` and navigate to `http://localhost:5173/`
84+
- Verify the dashboard loads with "Vibe Dashboard" header
85+
- Confirm Sales chart is displayed by default
86+
87+
2. **Interactive navigation**:
88+
- Click "User Activity" button → verify chart switches to stacked bars (Active/Inactive users)
89+
- Click "Revenue" button → verify chart switches to quarterly data (Q1, Q2, Q3, Q4)
90+
- Click "Sales" button → verify chart returns to monthly sales data
91+
92+
3. **Chart interactivity**:
93+
- Hover over chart bars → verify tooltips appear with data values
94+
- Test on different screen sizes for responsive behavior
95+
96+
4. **Statistics cards**:
97+
- Verify the stats grid below charts shows: Total Sales, Active Users, Revenue, Conversion Rate
98+
- Check that positive/negative change indicators are color-coded correctly
99+
100+
### Build Validation
101+
- **ALWAYS run before committing**:
102+
```bash
103+
pnpm lint && pnpm build
104+
```
105+
- Verify build completes without errors
106+
- Check that no TypeScript compilation errors occur
107+
108+
## Common Tasks
109+
110+
### Adding New Metrics
111+
1. Edit `apps/dashboard/src/App.tsx`
112+
2. Add data array (follow pattern of `salesData`, `userActivityData`, `revenueData`)
113+
3. Add metric object to `metrics` array with:
114+
- Unique `id`
115+
- Display `name`
116+
- Lucide React `icon`
117+
- Data array reference
118+
- Chart `color`
119+
4. Customize chart rendering in the JSX if needed (current supports single bars and stacked bars)
120+
121+
### Key Files and Their Purpose
122+
- `apps/dashboard/src/App.tsx` - **MOST IMPORTANT**: Contains all metrics data and chart logic
123+
- `apps/dashboard/src/App.css` - Responsive dashboard styles with CSS Grid and Flexbox
124+
- `package.json` (root) - Workspace scripts and shared dependencies
125+
- `apps/dashboard/package.json` - App-specific dependencies (React, Recharts, Lucide icons)
126+
- `pnpm-workspace.yaml` - Monorepo configuration
127+
128+
### Technology Stack
129+
- **Frontend**: React 19 with TypeScript
130+
- **Build Tool**: Vite 7 (fast development and production builds)
131+
- **Charts**: Recharts library for responsive bar charts
132+
- **Icons**: Lucide React for UI icons
133+
- **Styling**: Pure CSS with CSS Grid, Flexbox, and CSS variables
134+
- **Package Management**: pnpm workspaces for monorepo structure
135+
136+
### Common Commands Reference
137+
```bash
138+
# Development workflow
139+
pnpm install # Install dependencies (~10s)
140+
pnpm dev # Start dev server (<1s startup)
141+
pnpm build # Production build (~7s)
142+
pnpm lint # Lint all packages (~2s)
143+
pnpm clean # Clean build artifacts (<1s)
144+
145+
# Monorepo-specific
146+
pnpm --filter dashboard dev # Run dev only for dashboard
147+
pnpm -r build # Build all packages recursively
148+
```
149+
150+
### Troubleshooting
151+
- **Build fails**: Check TypeScript errors, run `pnpm lint` first
152+
- **Dev server won't start**: Ensure port 5173 is available
153+
- **Charts not rendering**: Verify Recharts data format matches expected structure
154+
- **Styles broken**: Check CSS imports in `App.tsx` and `main.tsx`
155+
156+
### Development Notes
157+
- Uses Vite's fast refresh for instant updates during development
158+
- TypeScript strict mode enabled for better code quality
159+
- ESLint configured with React and TypeScript rules
160+
- No test framework currently configured (future enhancement opportunity)
161+
- Responsive design supports mobile and desktop viewports

0 commit comments

Comments
 (0)