• 

  SleepyCoins

🌙 About the Project: SleepyCoins

🧠 Inspiration

We were inspired by the idea of turning mundane habits into fun, rewarding routines. Sleep is essential, but most sleep tracking apps are either too clinical or overly data-heavy. We thought—what if sleep was a game? So we created SleepyCoins, where people earn virtual coins for sleeping, unlock achievements, and compete on a leaderboard. It’s useless in terms of real-world value—but deeply satisfying.

💡 What It Does

SleepyCoins gamifies the sleep experience. Users track their sleep using a smart timer, earn coins for every hour slept, unlock rare achievements, complete daily and weekly challenges, and rise through a global leaderboard—all without needing an account or internet connection. It also features an AI Sleep Guru that gives humorous analysis and feedback based on your sleeping patterns.

Key features include:

• Smart sleep tracking timer
• Real-time coin earning (10 coins/hour)
• Achievement and badge system
• Daily/weekly challenges and goals
• Global leaderboard with mock competitors
• Coin shop with unlockable themes, badges, and fun items
• Personalized AI sleep analysis
• Full offline functionality via IndexedDB
• Fully responsive, installable PWA

🛠️ How We Built It

We used a modern frontend tech stack:

• React 18 + TypeScript for component-based architecture and type safety
• Tailwind CSS for clean, scalable, and responsive styling
• Framer Motion and GSAP for animations and smooth transitions
• IndexedDB (via idb-keyval) for offline-first local data persistence
• React Context API for app-wide state management
• Lucide Icons and Inter Font for visual consistency
• PWA optimizations for installable, offline-friendly usage

The app is entirely client-side, making it lightweight, secure, and fast.

⚔️ Challenges We Ran Into

• Implementing robust offline data storage without a backend
• Building real-time coin calculations and session validation logic
• Balancing beautiful animations with performance and responsiveness
• Designing a smooth, mobile-first UI that still felt premium
• Ensuring accessibility across all features (keyboard, contrast, reduced motion)
• Handling edge cases like interrupted sleep, quick session testing, and data corruption

🏆 Accomplishments That We're Proud Of

• Fully functional offline-first app that works with or without internet
• Smooth and Apple-level UI/UX with animations and theming
• A complete gamified system—coins, streaks, challenges, achievements, and shop
• Created without backend APIs, showing the full potential of frontend + local storage
• Achieved high Lighthouse scores and exceptional mobile performance
• Packaged as a PWA, installable on any device

🎓 What We Learned

• How to design and implement offline-first architectures with IndexedDB
• Using Framer Motion + GSAP to create responsive and performant animations
• Applying gamification theory to real-world behavior change
• Managing state at scale using React Context and TypeScript
• Creating accessible, responsive designs that feel native across devices
• Structuring large-scale frontend projects for scalability and performance

🔮 What’s Next for SleepyCoins

We're excited to keep building! Upcoming features include:

• Push notifications for bedtime reminders and streak alerts
• Wearable integration (smartwatches, fitness bands)
• Sleep sound library with ambient and white noise options
• Cloud sync and login for multi-device support
• Team-based sleep competitions and multiplayer challenges
• Advanced analytics dashboard with sleep trends and visualizations
• Calendar integration to plan and visualize sleep over time

SleepyCoins started as a fun idea—but it became a full-featured, beautifully designed app that brings joy to something as simple as going to sleep. 😴💰