spooky-task-tracker

Where the ghost of procrastination meets its grave.

Comment

Spooky Task Tracker 🎃

Inspiration

I felt that most productivity tools — to-do lists, habit trackers, task apps — are functional but often bland and forgettable. Meanwhile, I’ve always been drawn to horror- or spooky-style aesthetics: eerie atmospheres, dark moods, haunted vibes, subtle animations, and ambient ambience.

I imagined: what if a task list didn’t feel boring or mechanical — what if each unfinished task felt like a “ghost of procrastination,” haunting you until you conquer it? What if completing a task felt like banishing a ghost instead of just checking a box?

That dual idea — combining everyday utility (habits, tasks) with immersive mood and atmosphere — inspired Spooky Task Tracker: a productivity tool that doesn’t just organise your to-dos, but also gives them life, personality, and a little thrill.

What it Does

  • Lets users create tasks or habits (one-time or recurring), with optional name, description and due date or schedule.
  • Displays a list of pending tasks / habits, allowing users to mark them as done, skip, or delete them.
  • Maintains a history or log of completed tasks, so users can review what they’ve accomplished.
  • Offers a “Spooky Mode” UI theme, including dark theme, horror-inspired icons/graphics, ambient effects and subtle animations — transforming a normal task-tracker into a haunted to-do list.
  • Provides a theme toggle for users to switch between classic and spooky UI themes — ensuring usability for different preferences.

How We Built It

  • Frontend developed using Next.js + React — using React hooks/contexts for state management, UI components and routing/pages.
  • A theming system implemented (via CSS custom properties / styled-components / CSS-in-JS) to support both classic and spooky themes, enabling easy theme switching and maintainable styling.
  • For MVP or quick start: browser localStorage used for data persistence (tasks & history), avoiding backend complexity for rapid development / hackathon scope.
  • Spooky-style assets: custom icons (ghosts, bats, pumpkins/skulls), a dark-mode colour palette (dark greys / muted accents), horror-style fonts for headings + readable fonts for body content — balancing mood and usability.
  • UI/UX enhancements: subtle animations and effects such as hover glows, fade-ins, ambient background overlays (e.g. drifting mist/fog or shadows), transitions when marking tasks done (e.g. ghost fade-out, tombstone effect) — making the UI feel alive and atmospheric without compromising performance.
  • Theme toggle & accessibility considerations: ensured text readability, sufficient contrast, clear fonts, responsive layout, and fallback to simpler UI for users who prefer minimalism or for low-performance devices.
  • Clean code organisation: separated UI components, theming logic, task-state & storage logic — ensuring maintainability and extensibility for future features.

Challenges We Ran Into

  • Readability vs. Aesthetic Conflict — Horror-style fonts, dark backgrounds, and decorative textures can make text hard to read or cause eye strain. To address this, stylized fonts are used only for headings/decorative parts; body text uses clear, readable fonts and soft-toned colours. Backgrounds are dark-grey (not pure black) for softer contrast.
  • Avoiding Visual Overload & Performance Issues — Too many animations, overlays, effects can distract or slow down UI (especially on low-end devices). We mitigated this by using subtle CSS-based animations (transforms / opacity), limiting heavy graphics, and ensuring animations are smooth and minimal.
  • Maintaining Utility Without Theme Dependence — Since the “spooky theme” is a cosmetic overlay, core functionality (task CRUD, listing, history) must work reliably even if theme fails or user switches off theme. This required careful separation of logic from UI/theme.
  • Time & Scope Constraints — As a hackathon / side-project, there wasn’t enough time to build a full-featured app (backend, user accounts, sync, reminders). So we prioritized a clean, usable MVP: core task features + theme + UI polish — rather than a large but half-done app.

Accomplishments — What We’re Proud Of

  • Delivered a fully functional task/habit-tracker: tasks can be created, listed, marked done/skipped/deleted, and history is preserved — usable as a normal productivity tool.
  • Designed and implemented a coherent theme system, allowing easy toggling between classic and spooky themes, and facilitating clean styling organization.
  • Achieved a blend of usability and aesthetics: the UI feels atmospheric, fun and engaging — yet remains readable, responsive, and performant.
  • Demonstrated that a productivity tool can be emotionally engaging: by giving tasks personality (ghosts, haunting vibes), the app turns mundane chores into little “quests” — potentially improving motivation and engagement.
  • Built something that stands out: a to-do/habit app with personality, mood, and design — more than a bland checklist — which is especially effective in a hackathon context (for “Costume Contest” track).

What We Learned

  • UI/UX design and mood matter: beyond just functionality, choices in colour palette, typography, animations and ambience dramatically influence how a user perceives and engages with an app. Aesthetic design can raise a simple utility into an experience.
  • Theming and styling discipline is important: implementing a theme system ensures that UI remains maintainable, extendable, and consistent — avoids messy one-offs.
  • Balance is key: aesthetic flair must be balanced with readability, usability, and performance; dark themes and animations must not hinder functionality or accessibility.
  • Prioritizing scope + polish often beats piling features: delivering a polished MVP (core features + good design) is better than shipping many features but messy or half-finished.
  • Empathy for users & flexibility matters: not all users want spooky UI — giving them choice (theme toggle, simpler UI fallback) enhances accessibility and user satisfaction.

What’s Next for Spooky Task Tracker

  • Add a backend + database (e.g. using Node.js + MongoDB) — to support user accounts, cross-device sync and persistent storage beyond single device / browser storage.
  • Implement notifications & reminders, possibly with spooky-themed alerts (e.g. “ghost alerts” for overdue tasks or habit reminders).
  • Provide user settings / customization — let users choose the intensity of theme: from light (classic), to medium (dark + icons), to full-spooky (animations + ambience + maybe audio).
  • Expand UI/UX polish and features: more thematic assets (backgrounds, particle effects, seasonal themes), optional ambient sound or music for full immersive experience, accessibility options (contrast mode, reduced motion).
  • Create a mobile / PWA version — make the app installable, support offline (local tasks), responsive layout optimized for mobile; or even build a native version (React Native / Flutter) to reach more users.
  • Add collaboration / sharing / social features — shared task lists, habit challenges, community features — turning the app from personal tool to social / community productivity platform.

Built With

  • kiro
  • nextjs
  • tailwindcss
Share this project:

Updates