← All tutorials
🏄
Windsurf · React + Chart.js
Build a Dashboard with Windsurf
Prerequisites
- ✓ Windsurf IDE installed
- ✓ Node.js installed
- ✓ Git installed
- ✓ Qmmit installed
- ✓ A Qmmit account with CLI token
1
Create the project
Scaffold a React app.
npx create-react-app analytics-dashboard cd analytics-dashboard npm install chart.js react-chartjs-2 git add . && git commit -m "initial: react app"
2
Set up Qmmit
Initialize tracking.
qmmit init
⚡
What Qmmit does here
Detects Windsurf via ~/.codeium/windsurf/cascade/ or workspaceStorage. Installs hooks.
3
Open in Windsurf and build the dashboard
Open the project in Windsurf. Use Cascade to build the dashboard.
# In Windsurf Cascade: # "Create an analytics dashboard with: # 1. A line chart showing daily visitors (last 30 days) # 2. A bar chart showing top pages # 3. A pie chart showing traffic sources # Use Chart.js with react-chartjs-2. Generate sample data."
4
Ask Windsurf to add a stats header
Add summary stats.
# In Windsurf: # "Add a stats header row showing: Total Visitors, Bounce Rate, # Avg Session Duration, and Conversion Rate as cards with icons."
5
Ask Windsurf to add dark mode
Add theme support.
# In Windsurf: # "Add dark mode toggle. Charts should adapt colors. # Use CSS variables for theming."
6
Test it
Run the dev server.
npm start # Open http://localhost:3000
7
Commit
Commit everything.
git add . git commit -m "feat: analytics dashboard with charts" # [qmmit] 3 prompt(s) tracked (windsurf) → stu5678
8
Push and verify
Push and check dashboard.
git push -u origin main