Reading Habit Dashboard
Log what you read and watch a year of reading assemble into one page.
IntermediateWeb appDashboard10–20hAI-buildable 5/5no setupworth shipping
A personal dashboard around a single dataset you actually own: books and articles you've read. Log entries with pages, dates and ratings, then render the year as a contribution-style heatmap, a pages-per-month bar chart, and a running streak. The value is in making one dataset answer several different questions on one screen without the page feeling like a pile of widgets.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Add a reading entry with title, page count, finish date and rating
- A calendar heatmap shows reading activity across the year
- A bar chart breaks pages down by month
- A running streak counts consecutive days with any activity
- Filter the whole dashboard by year and by rating
- Entries persist across reloads
- Empty state guides a brand-new user through their first entry
The interesting part
- Streak logic across timezone boundaries and partial days
- Making several charts share one filter state without prop-drilling
- Laying out a dashboard that still reads well with only three entries
Once it works
- Import from a Goodreads CSV export
- Add a per-author breakdown
- Year-in-review summary card that can be exported as an image
Suggested stack
reacttypescripttailwindrechartsdate-fnslocalstorage