Skip to content

Commit ee4220c

Browse files
CopilotBoshen
Copilot
and
Boshen
authored
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]>
1 parent a6b54b3 commit ee4220c

22 files changed

+3244
-0
lines changed

‎.gitignore‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,64 @@
1+
# Dependencies
12
node_modules
3+
.pnp
4+
.pnp.js
5+
6+
# Testing
7+
coverage
8+
*.lcov
9+
10+
# Production builds
11+
dist
12+
build
13+
out
14+
15+
# Environment variables
16+
.env
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
# Logs
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
pnpm-debug.log*
27+
lerna-debug.log*
28+
29+
# Runtime data
30+
pids
31+
*.pid
32+
*.seed
33+
*.pid.lock
34+
35+
# IDE and editor files
36+
.vscode/
37+
.idea/
38+
*.swp
39+
*.swo
40+
*~
41+
42+
# OS generated files
43+
.DS_Store
44+
.DS_Store?
45+
._*
46+
.Spotlight-V100
47+
.Trashes
48+
ehthumbs.db
49+
Thumbs.db
50+
51+
# TypeScript
52+
*.tsbuildinfo
53+
54+
# Cache directories
55+
.cache
56+
.parcel-cache
57+
.vite
58+
59+
# Temporary files
60+
.tmp
61+
.temp
62+
63+
# Build tools
64+
.turbo

‎README.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
11
# Vibe Dashboard
2+
3+
A modern frontend dashboard for displaying different metrics using bar charts.
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
18+
- **Charts**: Recharts
19+
- **Icons**: Lucide React
20+
- **Package Manager**: pnpm
21+
- **Monorepo**: pnpm workspaces
22+
23+
## 🏗 Project Structure
24+
25+
```
26+
vibe-dashboard/
27+
├── apps/
28+
│ └── dashboard/ # Main dashboard application
29+
│ ├── src/
30+
│ │ ├── App.tsx # Main dashboard component
31+
│ │ ├── App.css # Dashboard styles
32+
│ │ └── ...
33+
│ └── package.json
34+
├── packages/ # Shared packages (future)
35+
├── package.json # Root package.json
36+
├── pnpm-workspace.yaml # pnpm workspace configuration
37+
└── README.md
38+
```
39+
40+
## 🚀 Getting Started
41+
42+
### Prerequisites
43+
44+
- Node.js (v20 or higher)
45+
- pnpm (v10 or higher)
46+
47+
### Installation
48+
49+
1. Clone the repository:
50+
```bash
51+
git clone https://github.com/Boshen/vibe-dashboard.git
52+
cd vibe-dashboard
53+
```
54+
55+
2. Install dependencies:
56+
```bash
57+
pnpm install
58+
```
59+
60+
3. Start the development server:
61+
```bash
62+
pnpm dev
63+
```
64+
65+
4. Open your browser and navigate to `http://localhost:5173`
66+
67+
### Available Scripts
68+
69+
- `pnpm dev` - Start the development server
70+
- `pnpm build` - Build all applications for production
71+
- `pnpm lint` - Run linting across all packages
72+
- `pnpm test` - Run tests across all packages
73+
- `pnpm clean` - Clean build artifacts
74+
75+
## 📊 Dashboard Features
76+
77+
### Metrics Views
78+
79+
1. **Sales**: Monthly sales data with trend visualization
80+
2. **User Activity**: Daily active/inactive users with stacked bars
81+
3. **Revenue**: Quarterly revenue breakdown
82+
83+
### Interactive Elements
84+
85+
- Click navigation buttons to switch between different metrics
86+
- Hover over chart elements for detailed tooltips
87+
- Responsive design adapts to different screen sizes
88+
89+
## 🔧 Development
90+
91+
### Adding New Metrics
92+
93+
1. Add your data to the respective data arrays in `apps/dashboard/src/App.tsx`
94+
2. Update the metrics configuration with your new metric
95+
3. Customize the chart rendering logic if needed
96+
97+
### Styling
98+
99+
The dashboard uses modern CSS with:
100+
- CSS Grid for responsive layouts
101+
- Flexbox for component alignment
102+
- Custom CSS variables for consistent theming
103+
- Responsive breakpoints for mobile support
104+
105+
## 📝 License
106+
107+
MIT

‎apps/dashboard/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎apps/dashboard/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config([
16+
globalIgnores(['dist']),
17+
{
18+
files: ['**/*.{ts,tsx}'],
19+
extends: [
20+
// Other configs...
21+
22+
// Remove tseslint.configs.recommended and replace with this
23+
...tseslint.configs.recommendedTypeChecked,
24+
// Alternatively, use this for stricter rules
25+
...tseslint.configs.strictTypeChecked,
26+
// Optionally, add this for stylistic rules
27+
...tseslint.configs.stylisticTypeChecked,
28+
29+
// Other configs...
30+
],
31+
languageOptions: {
32+
parserOptions: {
33+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+
tsconfigRootDir: import.meta.dirname,
35+
},
36+
// other options...
37+
},
38+
},
39+
])
40+
```
41+
42+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+
44+
```js
45+
// eslint.config.js
46+
import reactX from 'eslint-plugin-react-x'
47+
import reactDom from 'eslint-plugin-react-dom'
48+
49+
export default tseslint.config([
50+
globalIgnores(['dist']),
51+
{
52+
files: ['**/*.{ts,tsx}'],
53+
extends: [
54+
// Other configs...
55+
// Enable lint rules for React
56+
reactX.configs['recommended-typescript'],
57+
// Enable lint rules for React DOM
58+
reactDom.configs.recommended,
59+
],
60+
languageOptions: {
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
// other options...
66+
},
67+
},
68+
])
69+
```

‎apps/dashboard/eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { globalIgnores } from 'eslint/config'
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎apps/dashboard/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎apps/dashboard/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "@vibe/dashboard",
3+
"private": true,
4+
"version": "0.1.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview",
11+
"clean": "rm -rf dist"
12+
},
13+
"dependencies": {
14+
"react": "^19.1.1",
15+
"react-dom": "^19.1.1",
16+
"recharts": "^2.12.6",
17+
"lucide-react": "^0.414.0"
18+
},
19+
"devDependencies": {
20+
"@eslint/js": "^9.33.0",
21+
"@types/react": "^19.1.10",
22+
"@types/react-dom": "^19.1.7",
23+
"@vitejs/plugin-react": "^5.0.0",
24+
"eslint": "^9.33.0",
25+
"eslint-plugin-react-hooks": "^5.2.0",
26+
"eslint-plugin-react-refresh": "^0.4.20",
27+
"globals": "^16.3.0",
28+
"typescript": "~5.8.3",
29+
"typescript-eslint": "^8.39.1",
30+
"vite": "^7.1.2"
31+
}
32+
}

‎apps/dashboard/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)