Notion Habit Tracker

Sometimes even a gentle reminder can drive you to success and achievement!

Comment

Inspiration

As students who frequently use Notion to organize our lives, our inspiration came from the fact that we couldn’t find a user-friendly visual tracker for habits. There were some widgets integrated within the Notion application itself, but constantly opening the app becomes tedious when we just want to stay on top of our healthy habits. So, we decided to make Habit Tracker -- a way to make habit progress visible at a single glance on your desktop!

What it does

Habit Tracker is a lightweight desktop widget that connects to the Notion API and visualizes your habit completions in a clean, calendar-style heatmap (inspired by GitHub's contribution heatmap). Each day is color-coded based on how many habits were completed, letting users easily keep track of their progress. It supports monthly/weekly views, displays the daily average over time, and is small and unobtrusive.

How we built it

The frontend is built with React (TypeScript) and Electron-vite. The backend is built using C# and connects to the Notion API to aggregate habit data (date, whether or not a habit was completed) and expose a lightweight heatmap endpoint.

Challenges we ran into

  • Integrating the Notion API and taking into consideration inconsistent data formats/timezones and rate limits.
  • Combining the backend and frontend and having to work around some of Electron's security.
  • Creating a transparent, frameless Electron window with proper resizing and responsiveness without lag.

Accomplishments that we're proud of

  • Building a full stack application in a short period of time while exploring new tech we hadn't used before.
  • Having a functional and useful application that has a positive impact on our day-to-day lives.

What we learned

We gained hands-on experience working with Electron desktop apps, integrating React with a C# backend, and using a third-party API (Notion). We also learned valuable lessons regarding the importance of performance optimizations and thoughtful UI.

What's next for Notion Habit Tracker

Our future improvements include additional color themes and accessibility options, habit-level filtering, streak tracking, and encouraging notifications to support users.

Built With

Share this project:

Updates