- React
- AI-Assisted Development
- Data Visualization
- Developer Tools
Cursor Wrapped
Cursor tracks your usage data: tokens consumed, models used, timestamps. You can export it to CSV, but a spreadsheet isn't exactly something you'd share. I wanted something visual, in the style of Spotify Wrapped.
The dashboard
The app parses the CSV and transforms it into a dashboard. Total tokens, estimated costs, favorite models, activity patterns. There's a GitHub-style contribution calendar, hourly heatmaps showing when you code most, and stats like your longest coding streak.
The sharing feature mattered most. People want to show off their stats, so I built shareable cards with key metrics that you can download or post. The share modal uses html2canvas to render the cards as images. It took some fiddling to get the styling to match between the live view and the rendered output, but it works.
Building it
This came together over a weekend. My monorepo has shared configs for TypeScript, ESLint, and Vite, plus deployment to Amplify via Pulumi. When I want to spin up something new, most of the setup is already done.
I didn't write the implementation code myself. I described what I wanted, the AI implemented it following the patterns in the codebase, and I reviewed. CSV parsing, data aggregation, chart components: the AI knows how to do these, and the output was clean. The harder part was deciding which metrics were interesting and how to present them in a way that felt worth sharing. AI doesn't have opinions about that.
Most of the time, the first attempt was close enough that minor adjustments got it working. The frontend took a few iterations to get the layout right, especially the share cards. The deployment was trivial: push to main, it goes to Amplify.
Try it at wrapped.reb.nz. Export your Cursor usage data and see what your year looked like.