#
🎯 The Core Problem & Concept
Traditional countdown tools are often static, tedious to fill out day-by-day, or lack engaging UI/UX. My goal was to combine:
Instant Content Generation: Using AI to generate 24+ daily unique surprises (messages, riddles, quotes) tailored to any topic. #
Rich Visual Editor: Letting users design individual doors/cases with custom images, text, and password protection.
#
- Cross-Platform Access: Web app + dedicated mobile viewer app.
#
🤖 1. Integrating Google Gemini for AI Content Generation
Filling 24 calendar doors manually can be time-consuming. To solve this, I integrated Google Gemini AI into the creation workflow.
How it works:
- The user provides a theme (e.g., "Romantic Holiday Quotes", "Tech Trivia for Developers", "Daily Wellness Tips").
- The prompt sent to Gemini specifies structured JSON output for each day (1 to 24), containing a title, description, and keyword tags.
- We query Unsplash API using these keyword tags to automatically suggest copyright-free background photos for each door! This reduces calendar creation time from 30 minutes to under 20 seconds.
🎨 2. Open-Sourcing the Interactive Case Builder #
One of the biggest technical challenges was building an intuitive WYSIWYG editor for calendar doors — allowing users to customize text styles, image alignment, and secret unlock dates. Instead of keeping this proprietary, we decided to extract the core editor component and open-source it for the Angular community! 👉 Check out the repository on GitHub: github.com/zhaynes067-web/case-builder
Key Features of Case Builder:
- 📱 Fully responsive preview mode (mobile & desktop views).
- 🔒 Support for password-protected secret doors.
- 🌐 Ready for i18n / multi-language support. Feel free to ⭐ star the repository if you're building interactive Angular tools!
🚀 3. Tech Stack Summary #
Frontend: Angular (Standalone Components, RxJS, NgRx Signal Stores) #
Backend: Node.js / Express API #
AI Integration: Google Gemini API #
Image Integration: Unsplash API
#
💡 What's Next?
Building DailyReveal has been an incredible journey of combining generative AI with interactive frontend experiences.
If you’d like to try it out or create your own calendar: