Graveyard Shift

Where productivity meets the supernatural - A hauntingly beautiful task manager that transforms your to-dos into tombstones in an immersive Halloween cemetery

Comment

Inspiration

As self-proclaimed night owls who do our best work after midnight, we've always felt disconnected from the bright, cheerful productivity apps designed for morning people. We asked ourselves: "Why can't task management be as atmospheric and engaging as our favorite late-night horror movies?" The inspiration struck during a late-night coding session when we realized that traditional task apps are boring, the Halloween aesthetic is underutilized in productivity tools, and night owls deserve tools that match their vibe. Thus, Graveyard Shift was born - where your tasks literally rest in peace as tombstones, your habits evolve into cursed dolls, and your focus time is tracked in a haunted coffin.

What it does

Graveyard Shift is a fully-featured productivity suite wrapped in an immersive Halloween theme. The Cemetery Dashboard displays tasks as 3D tombstones in a haunted cemetery grid with atmospheric effects like drifting fog, floating ghosts, blood drips, and spiders. Dynamic moon phases reflect your weekly progress from New Moon to Full Moon. The Haunted Coffin Pomodoro Timer features a unique coffin-shaped design with animated sand effects, activity naming for work sessions, stop & save functionality for interrupted sessions, and comprehensive statistics tracking (today/week/month). The Cursed Dolls Habit Tracker represents habits as cursed dolls that evolve through 4 stages based on streak length: Broken (0-6 days), Repairing (7-14 days), Awakening (15-29 days), and Fully Cursed (30+ days). Users can choose from six unique doll types and watch them evolve with dynamic colors and glows. Additional features include Dark Web Portals for bookmarks, full user authentication with JWT tokens, password reset via email, and a comprehensive settings system.

How we built it

We used Kiro's spec-driven development workflow to transform our idea into a production-ready application. First, we wrote formal requirements using EARS syntax and created detailed design documents with component interfaces and data models. Our tech stack includes React 19, Three.js, Framer Motion, and Tailwind CSS on the frontend, with Node.js, Express, and Appwrite on the backend. We implemented 3D tombstone rendering using CSS transforms with perspective effects, created an accurate Pomodoro timer using timestamps instead of interval counting, and designed a streak calculation algorithm that handles timezone differences by performing all date comparisons server-side. The evolution stages for cursed dolls follow a mathematical formula based on streak milestones, and we optimized 30+ simultaneous atmospheric animations to maintain 60fps performance through GPU acceleration and lazy loading. We wrote comprehensive tests including property-based testing with fast-check, and documented everything with specs, API docs, and contribution guidelines.

Challenges we ran into

Performance with heavy animations was our first major challenge - with 30+ animated elements, we experienced frame drops until we implemented GPU acceleration using will-change CSS properties and requestAnimationFrame. Timezone-aware streak calculation proved tricky as users in different timezones had inconsistent "today" definitions, which we solved by storing dates in ISO 8601 format and performing all calculations server-side. Pomodoro timer accuracy suffered from setInterval drift, so we switched to storing start timestamps and calculating remaining time from elapsed time. Creating realistic 3D tombstones without full Three.js scenes required clever use of CSS 3D transforms with multiple shadow layers and fallback support for browsers without 3D capabilities. State management complexity led to prop drilling issues, which we resolved by implementing React Context API with custom hooks. Finally, responsive design required careful media queries to reduce animation complexity on mobile devices and accessibility support with prefers-reduced-motion.

Accomplishments that we're proud of

We built a complete full-stack application with authentication, real-time data, and three distinct feature sets in under 2 weeks. We achieved 60fps performance with 30+ simultaneous atmospheric animations through careful optimization. We created three fully-functional productivity tools (tasks, pomodoro, habits) with cohesive thematic consistency. We implemented comprehensive accessibility with ARIA labels, keyboard navigation, and screen reader support. We wrote property-based tests using fast-check to ensure correctness across random inputs. We designed a responsive UI that works seamlessly on desktop and mobile devices. We maintained thematic consistency where every element reinforces the Halloween aesthetic without sacrificing usability. We produced extensive documentation including specs, API docs, and contribution guidelines. We open sourced the project with an MIT License, making it ready for community contributions. Most importantly, we used spec-driven development to formalize requirements, design, and implementation plans before writing any code.

What we learned

We mastered Three.js integration for creating 3D effects with CSS transforms and WebGL, advanced CSS animations for atmospheric effects while maintaining performance, Framer Motion for orchestrating complex animation sequences, property-based testing with fast-check, and Appwrite BaaS for modern backend services. We learned that thematic consistency requires every element to reinforce the core aesthetic, that finding the balance between visual richness and smooth performance is crucial, that accessibility must be built in from the start, and that making something "spooky" fun shouldn't sacrifice productivity. We discovered that spec-driven development saves time by writing requirements and design docs before code, that small focused components are easier to maintain and test, that RESTful endpoints with proper error handling improve reliability, and that Context API provides clean global state without Redux complexity. We learned that timestamps are more reliable than interval counting for timers, that server-side date calculations prevent timezone inconsistencies, that GPU acceleration and lazy loading are essential for heavy animations, and that mobile-first thinking prevents desktop-only solutions.

What's next for Graveyard Shift

We plan to add an AI Cemetery Caretaker chatbot that gives productivity tips in spooky language and analyzes patterns to suggest optimizations. We want to implement multiplayer graveyards where users can share cemeteries with friends, collaborate on task boards, and compete for the most cursed dolls. An achievement system will unlock decorations for graveyards like gates, statues, and crypts, with titles like "Grave Keeper" and "Spirit Whisperer" for maintaining long streaks. We'll add enhanced time-based atmospheres with dynamic environment changes based on time of day and seasonal variations. Calendar integration will sync with Google Calendar, Outlook, and Apple Calendar with two-way sync. Native mobile apps for iOS and Android will provide native performance, push notifications, and offline mode. Immersive sound design will include ambient cemetery sounds, completion chimes, and optional spooky lo-fi background music. Customization options will let users choose cemetery themes, customize tombstone styles, and create custom doll types. Advanced analytics will provide productivity heatmaps, streak visualizations, and data export capabilities. Finally, internationalization will add multi-language support and cultural variations of the Halloween theme.

Built With

Share this project:

Updates