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

🎯 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:

1. 
   Instant Content Generation: Using AI to generate 24+ daily unique surprises (messages, riddles, quotes) tailored to any topic.


2. 
   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: (Check out our What's New page for recent features!)