Game of Life - Gamified Schedule Management

Manage daily schedule, to-do lists, daily journaling in a gamified portal accumulating points and building good habit loops.

Comment

Inspiration

We were inspired by the need to make productivity and time management more engaging and motivating. Many people struggle with maintaining consistent habits and completing their planned tasks. Traditional calendar apps lack the gamification elements that could make scheduling and task completion feel rewarding. We wanted to create a system that turns your weekly schedule into a game where you earn points for completing tasks, making productivity addictive rather than tedious.

What it does

GameOfLife is a comprehensive gamified schedule management web application that transforms your weekly planning into an engaging point-based system. Users can:

  • Visual Weekly Planning: Interactive 7-day calendar with 30-minute time slots (48 slots per day) for detailed scheduling
  • Gamified Task Management: Earn/lose points based on task completion (+50 completed, -30 incomplete, +10 routine, 0 planned)
  • Daily Productivity Tools: Todo lists and reflection prompts for continuous improvement
  • Real-time Statistics: Track weekly performance with completion rates and point totals
  • Cross-device Sync: Cloud-based data synchronization with offline functionality
  • Guest Mode: Full offline access without requiring account creation

How we built it

We built GameOfLife using:

  • Frontend: Pure HTML5, CSS3, and Vanilla JavaScript (no frameworks) for maximum performance and simplicity
  • Backend: Supabase for authentication, real-time database, and cloud synchronization
  • Data Storage: Dual approach with localStorage for offline functionality and PostgreSQL via Supabase for cloud sync
  • UI/UX: CSS Grid and Flexbox for responsive design, Font Awesome icons, and comprehensive accessibility features
  • Architecture: Modular design with separate controllers for UI, data management, and authentication

The application features a sophisticated calendar grid system (8x49 CSS Grid), drag-and-drop task copying, modal-based interactions, and robust error handling with graceful offline fallbacks.

Challenges we ran into

  1. Session Persistence: Initially, users were logged out on page refresh. We solved this by implementing proper auth state listeners and initialization order management.

  2. Data Loading Issues: Supabase queries using .single() failed when users had multiple records. We fixed this by using .order().limit(1) to handle multiple records properly.

  3. Authentication Flow: Ensuring seamless login/logout experience required careful timing of data sync operations and proper cleanup when switching users.

  4. Offline-First Design: Balancing local storage persistence with cloud synchronization while maintaining data consistency across devices.

  5. Database Setup Complexity: PostgreSQL policy syntax differences required custom SQL without IF NOT EXISTS for policies, leading to comprehensive setup documentation.

Accomplishments that we're proud of

  • Production-Ready Application: Built a fully functional app that works immediately upon opening index.html
  • Comprehensive Error Handling: Implemented robust offline functionality with graceful cloud sync fallbacks
  • Accessibility First: Full keyboard navigation, screen reader support, and responsive design for all device sizes
  • Debug Tools: Created comprehensive debugging panels (debug.html, test-login.html) for troubleshooting
  • User Experience: Seamless guest mode allowing immediate app usage without signup requirements
  • Data Integrity: Proper user data isolation and cleanup when switching between accounts
  • Performance: Efficient DOM updates, optimized queries, and smooth drag-and-drop interactions

What we learned

  • Authentication Architecture: The importance of proper initialization order and auth state management for session persistence
  • Database Design: How to handle multiple records per user and implement Row Level Security policies correctly
  • Progressive Enhancement: Building offline-first applications that gracefully upgrade with cloud connectivity
  • User-Centered Design: The value of guest modes and immediate usability without barriers
  • Error Handling: Comprehensive logging and fallback strategies are essential for production applications
  • Testing Infrastructure: Creating dedicated debug tools saves significant development and troubleshooting time

What's next for Game of Life - Gamified Schedule Management

  • Advanced Analytics: Weekly/monthly performance dashboards with trend analysis and productivity insights
  • Social Features: Team challenges, leaderboards, and collaborative planning for families or workgroups
  • Smart Scheduling: AI-powered task recommendations based on completion patterns and optimal timing
  • Calendar Integration: Import/export with Google Calendar, Outlook, and other popular calendar services
  • Mobile Application: Native iOS/Android apps with push notifications for task reminders
  • Habit Tracking: Extended routine management with streak tracking and habit formation analytics
  • Customization: Personalized point systems, themes, and productivity methodologies (GTD, Pomodoro, etc.)
  • Wellness Integration: Mood tracking, energy level correlation with task completion patterns

The foundation we've built provides a solid platform for these advanced features while maintaining the core simplicity and effectiveness that makes GameOfLife immediately useful for productivity enhancement.

Built With

  • bolt
  • netify
  • supabase
Share this project:

Updates