# How I Built an AI-Powered Digital Advent Calendar with Angular & Google Gemini

> Source: <https://dev.to/zoey_haynes_0a5e9dbbb7219/how-i-built-an-ai-powered-digital-advent-calendar-with-angular-google-gemini-1mcp>
> Published: 2026-08-05 09:01:35+00:00

##
🎯 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.

##
3. **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](https://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: