Cloud9 Roster Moment

Inspiration

I am not a professional programmer, but I have spent years working in esports with the world’s top teams and organizing promotional events at major video game fairs. Having seen firsthand what excites fans, I wanted to create a unique engagement activity for Cloud9, something that would allow them to take home a personalized souvenir with their idols while helping the team amplify its social media presence through user-generated content.

When I saw the opportunity to build this using AI and learn during the process, I didn't hesitate. The goal was simple but ambitious: create a seamless "Roster Moment" where any fan could instantly become part of the pro team.

What it does

Cloud9 Roster Moment is an interactive app experience for live events.

1. The Fan Experience: The experience starts with a mini-game focused on the fan identity. No wins or loses, just a quick decission about favourite in-game role and favourite Cloud9 pro player. After that, the user takes a selfie in the event booth.
2. The AI Magic: Using Google Gemini Pro (Nano Banana Pro), the app analyzes the fan's face and seamlessly integrates them into a high-quality, branded team poster alongside 5 current Cloud9 pro players. The picture style is also selected by the fan, so he can decide what kind of souvenir wants to bring home.
3. The Delivery: The fan instantly receives the poster via a branded email and ready to share on social media.
4. The Event Buzz: Simultaneously, the generated image appears on a live "Gallery" TV display at the booth, and real-time stats update on an organizer's dashboard.

How I built it

I built this project using a "pair programming" approach with AI agents.

• Core AI engine: I started building the core experience on Jetbrain, using WebStorm + Junie in a very smooth and easy way. Then, I utilized Google Gemini and Claude Opus via Antigravity for its multimodal capabilities. The key was designing complex prompts that instructed the model to respect the fan's facial features ("Identity Preservation") while strictly following the Cloud9 artistic style.
• Backend: A Node.js and Express server orchestrates the flow. It handles image upload, prompt engineering for Gemini, and file management.
• Database: I implemented a local SQLite database to track subscribers, consents, and image metadata for the gallery.
• Email Infrastructure: Integration with Brevo's API ensures reliable delivery of the heavy image attachments, bypassing standard SMTP port blocks often found in cloud hosting.
• Frontend: A mobile-first Vanilla JS interface for the user, coupled with a separate clean "TV Mode" URLs for public displays.

Challenges I ran into

The journey from concept to "production-ready" prototype wasn't easy...

1. Identity vs. Style: Initially, the AI would either persist the face perfectly but ignore the art style, or apply the style so heavily the fan became unrecognizable. I solved this with a "Strict Role Assignment" prompt strategy, explicitly defining "Image 1" as the protagonist (The Fan) and "Images 2-6" as supporting cast/players.
2. Deployment Nightmares: Moving from localhost to Render broke the file serving logic. Generated images weren't appearing immediately because the file system and public URL paths weren't in sync. We had to build a custom route with explicit file system checks to ensure images were served correctly the millisecond they were created.
3. Email Deliverability: Sending large images via standard nodemailer transports failed in the cloud environment. Migrating to a trusted API-based sender (Brevo) was critical to ensure fans actually received their posters.

Accomplishments to be proud of :)

• It actually works! Seeing the first proper image come back with my face wearing a Cloud9 jersey standing next to the pros was an incredible WOW "magic moment."
• The "Pro" Feel: I spent a lot of time on details: the esports font, the dark mode aesthetics, the ima styles, the logo, the live dashboard... It looks like a real product you'd see at a major tournament.
• Learning Curve: Going from "I have an idea" to "I have a deployed web app with database and AI integration" in a short time was an incredible learning experience. Mainly when this is the first time I do a thing like this!

Winning or not, the possibility to participate has been enough for me and I honestly hope the team loves the app and want to use it to bring some cool images to their fans :)

Built With

• antigravity
• brevo
• claudecode
• gemini
• google
• jetbrain
• junie
• nanobanana
• vercel