Inspiration

Every time I'm on my laptop, I get distracted and forget to stay consistent with apps on my phone, such as Duolingo, habit trackers, or fitness streaks. So I built this To-Do List as a reminder system — not just for daily tasks, but also to nudge me back toward those focus apps and goals.

What It Does

  • Lets you add tasks with due dates and reminders
  • Supports dark/light theme toggle
  • Animates your task list as you work through it
  • Sends browser notifications when tasks are due
  • Supports local storage so your data never disappears
  • Can run as a PWA (Progressive Web App) and get installed like a native app

How We Built It

  • HTML + CSS + Vanilla JS for a clean and snappy frontend
  • Used LocalStorage to persist data without a database
  • Added Notification API to alert users about due tasks
  • Implemented Service Workers to send reminders even when the browser is closed
  • Deployed the app using GitHub Pages

Challenges We Ran Into

  • Getting browser notifications to trigger at the right time (especially when the tab is closed)
  • Making sure the app looks good in both light and dark themes
  • Handling time zones and reminder accuracy across devices
  • GitHub Pages setup had a few hiccups with branches and deployment

Accomplishments We're Proud Of

  • Built a fully working reminder/to-do app from scratch
  • Learned how to use service workers + browser APIs
  • Made it installable and usable offline
  • Designed a clean, animated interface that feels smooth

What We Learned

  • How browser notifications work (and when they don't)
  • How to make web apps feel more like native mobile apps
  • How to use Git, GitHub, and Pages for real-world deployment
  • How to make UX fun to use with animations and themes

What's Next for To-Do List

  • Add snooze buttons to reminders
  • Integrate a streak system (like Duolingo!) to reward consistency
  • Add sound notifications or custom ringtones
  • Sync tasks across devices with account login
  • Option to export task history for tracking progress

Built With

Share this project:

Updates