A beautiful, mobile-first ice cream flavor tracker with real-time multi-device synchronization
📖 Full Development Story: See PROJECT_PLAN.md for the complete 8-phase development journey from foundation to PWA native app experience.
🔄 Real-Time Multi-Device Sync
- Changes appear instantly across all connected devices
- Fun session sharing with memorable URLs like
creamy-sundae-42 - Works offline with automatic sync when reconnected
🎨 Smart Flavor-Based Colors
- Ice cream colors match your flavors! "Chocolate" = brown, "Strawberry" = pink
- 25+ flavor mappings (English & Spanish): Mint, Vainilla, Mango, etc.
- Same flavor always produces the same color (case-insensitive)
🍦 Interactive Ice Cream Experience
- 7 labeled containers (A-G) with beautiful letter badges
- Click containers to toggle between full/half/empty states
- Fun eating animation with 😋 button and haptic feedback
- Professional glass-morphism design with smooth animations
📱 Native App Experience
- PWA installable on mobile home screens
- Touch gestures: pull-to-refresh, long press menus, double tap
- Offline-first with smart persistence
- Mobile-optimized with WCAG accessibility compliance
git clone https://github.com/grojasv/donde-esta-mi-helado.git
cd donde-esta-mi-helado
npm install && npm run dev📝 Note: Works perfectly without setup! For real-time sync, see FIREBASE_SETUP.md.
- Type flavors in any container (A-G) - auto-saves as you type!
- Watch smart colors - "Chocolate" → brown, "Mint" → green, etc.
- Click containers to toggle fill levels (full/half/empty)
- Share sessions - get fun URLs like
creamy-sundae-42for real-time sync - Install as app - works offline like a native mobile app
- Framework: Astro + TailwindCSS
- Real-time: Firebase Realtime Database
- PWA: Service Worker + App Manifest
- Deployment: Netlify with auto-deploy
This project is open source and available under the MIT License.
- Built with ❤️ using Astro
- Styled with TailwindCSS
- Deployed on Netlify
- Icons from Heroicons
Made with 🍦 for ice cream lovers everywhere!