PassionCast: Turn What You Love Into a Story Worth Hearing

This is a submission for Weekend Challenge: Passion Edition.

What I Built

I built PassionCast, an AI-powered storytelling experience that turns the memories behind a person's passion into a short narrated mini-documentary.

The idea came from a simple observation: people often talk about what they love, but they rarely get the chance to explain why it matters so much.

PassionCast asks the user four questions:

• What are you passionate about?
• How did that passion begin?
• What is your favorite memory connected to it?
• Why does it still matter to you?

The user can then choose a storytelling tone, such as warm and nostalgic, emotional documentary, epic and cinematic, energetic superfan, or funny and playful.

Google Gemini transforms those answers into a structured story with:

• A memorable title
• A short personal mini-documentary
• A highlight quote
• A shareable caption
• Narration direction

ElevenLabs then turns the written story into expressive narration.

The final result combines the generated story, quote, audio player, and a visual voice experience so the user can both read and hear the story behind what they love.

My main goal was not to build another generic AI text generator. I wanted PassionCast to feel like a small personal documentary studio: emotional, playful, and easy to use.

Demo

Live demo: Open PassionCast

The main flow is:

1. Open PassionCast.
2. Start with a randomized example or write your own answers.
3. Choose a storytelling tone.
4. Generate the mini-documentary.
5. Read the story while the narration is prepared.
6. Play the ElevenLabs narration.
7. Copy the story or caption, retry the voice, or create another story.

Code

GitHub repository: View the PassionCast source code

The repository includes the frontend experience, server-side AI routes, validation, reusable UI components, and the Gemini and ElevenLabs integrations.

How I Built It

I built PassionCast with:

• Next.js App Router
• TypeScript
• Tailwind CSS
• Google Gemini API
• ElevenLabs API
• Zod
• React Bits
• Lucide React
• Poppins
• Browser local storage

Story generation with Google Gemini

The user's answers are sent to a server-side Next.js route.

Gemini receives a carefully constrained storytelling prompt that tells it to preserve the user's real experience, avoid inventing names or events, and return a story that sounds natural when spoken aloud.

Instead of requesting unstructured text, I ask Gemini to return a predictable object containing:

• title
• story
• quote
• caption
• narrationDirection

The response is validated before it reaches the interface. This made the application more reliable and made it much easier to render the result consistently.

A major design decision was to keep the story factual. Gemini can improve the emotional structure and language, but it should not fabricate details that the user never provided.

Narration with ElevenLabs

After Gemini creates the story, PassionCast sends the narration text to a protected server-side ElevenLabs route.

ElevenLabs gives the written story a voice and turns the result into something closer to a personal documentary than a normal generated paragraph.

The audio experience includes:

• Play and pause controls
• Playback progress
• Replay
• Volume controls
• Narration retry
• A visual Strands treatment around the voice experience

The written story appears before narration finishes, so the user is never forced to wait for audio before seeing the main result.

If narration fails, the generated story remains available. The user can still read it, copy it, or retry the voice without losing their work.

Designing the experience

I wanted PassionCast to feel human and expressive instead of looking like a generic AI dashboard.

The design uses:

• A warm editorial color palette
• Bold Poppins typography
• Large rounded content cards
• Asymmetrical layouts
• Bright accent colors
• Lucide React icons
• React Bits animations used selectively
• Strands as the visual language for voice
• Accessible controls and reduced-motion support

The visual direction is inspired by modern editorial landing pages, but the interface and brand were created specifically for PassionCast.

Making it easy to start

One challenge with creative tools is the blank-page problem.

To make the app easier to try, PassionCast can prefill the form with a starter example. The user can edit everything, clear the form, or use Surprise Me to see a different idea.

This makes the main interaction understandable immediately while still encouraging users to replace the example with their own story.

Reliability and validation

I added validation to both user input and generated output.

The application handles:

• Empty or oversized inputs
• Invalid AI responses
• Network failures
• Gemini errors
• ElevenLabs errors
• Duplicate submissions
• Audio retry states
• Malformed local-storage data

API keys remain on the server and are never exposed to the browser.

Prize Categories

I am submitting PassionCast for:

Best Use of Google AI

Gemini is the narrative engine behind PassionCast.

It does more than summarize the user's answers. It identifies the emotional thread connecting the beginning of the passion, the user's strongest memory, and what that passion represents today.

Gemini also returns structured output, which makes the story-generation flow more reliable and allows the interface to separately present the title, story, quote, caption, and narration direction.

Best Use of ElevenLabs

ElevenLabs transforms the generated story from something the user reads into something they experience.

The voice is a core part of the product rather than a decorative extra. PassionCast is designed around the idea that hearing a personal story can make it feel more intimate, memorable, and cinematic.

The narration, custom audio controls, retry experience, and Strands visualization all contribute to the final listening experience.

Challenges I Faced

The hardest part was balancing creativity with truth.

I wanted Gemini to produce something emotional, but I did not want the model to invent details. I solved this by placing strict limits on the prompt, using structured output, and validating the response before displaying it.

Another challenge was handling two AI services in one user flow. Story generation and narration can succeed or fail independently, so I designed the result state so the written story remains useful even when audio is unavailable.

The third challenge was presentation. It was easy for the project to look like a normal form followed by generated text. I spent time turning the experience into something that feels closer to an editorial feature and a small audio-documentary studio.

What I Learned

This project taught me that structured AI output is especially useful when the result needs to power a real interface.

I also learned that graceful failure matters a lot in multi-service AI applications. A narration error should not destroy a successful story, and a user should always know what happened and what they can do next.

Most importantly, I learned that AI experiences feel more meaningful when the technology supports a clear emotional purpose. Gemini provides the structure and language, while ElevenLabs delivers the voice. Together, they help preserve the story behind a person's passion.

Final Thoughts

Passion can be loud, quiet, competitive, creative, nostalgic, or deeply personal.

PassionCast is my attempt to give those feelings a format that people can keep, hear, and share.

Every passion has a story. PassionCast gives it a voice.

Thanks for reading, and thanks to the DEV Community for creating a challenge that encouraged me to build something personal.