HahaNotes: Banishing Developer Burnout with AI Banter Podcasts & Short Videos

This is a submission for Weekend Challenge: Passion Edition

What I Built

HahaNotes is an interactive web application designed to help developers, office workers, and students vent their daily stress by transforming real-world struggles (legacy code at 3 AM, unpaid overtime, sếp hãm, or exam stress) into hilarious, sarcastic AI-voiced banters, complete podcasts, and ready-to-share short videos.

The application features a dynamic dialogue between two contrasting AI hosts:

1. 
   Rookie (The Naive Optimist): A starry-eyed beginner who sees the world through rose-colored glasses and speaks in trendy buzzwords.


2. 
   Cynic (The Sarcastic Senior): A battle-hardened veteran who gently (or not so gently) pops Rookie's bubble with witty, dry, and highly relatable tech sarcasm.

Users can input their struggles, choose their favorite voices for the hosts, generate structured comedy scripts, chat continuously with the hosts to extend the banter, listen to fully produced podcasts with ambient lo-fi background music/laugh tracks, and export 9:16 vertical short videos with synchronized karaoke captions and visual memes.

Demo

Code

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

How I Built It

HahaNotes is built with a modern stack optimized for smooth real-time generation and high-quality media rendering:

• 
  Frontend: Built with Next.js (App Router), TailwindCSS, and a custom vertical <canvas> renderer. The browser records the canvas frames at 24fps and merges them with the live audio stream using the Web MediaRecorder API to generate downloadable .webm short videos directly on the client side.


• 
  Backend: Powered by a FastAPI server that acts as a robust orchestrator for generative text and audio processing.


• 
  SQLite Metadata & Cache Database: Designed to cache script results and register unique MD5 voice mappings on-demand, minimizing Gemini API calls and ElevenLabs API quota consumption.


• 
  Precise Timing Sync Engine: To solve the out-of-sync karaoke subtitles, we built a server-side metadata generator using pydub. It reads the exact millisecond length of each cached audio scene and laugh track, allowing the frontend to render perfectly synced karaoke highlights on the canvas.


• 
  Visual Assets: Contains 7 high-quality cartoon meme illustrations (clown, harold, fine_dog, drake_no, drake_yes, doge, and burn) generated dynamically using Google's generative image capabilities.

Prize Categories

We are submitting our project to the following categories:

• Best Use of ElevenLabs:
  
  We utilized ElevenLabs' state-of-the-art TTS voices (like Bella, Rachel, Antoni, and Adam) to bring our hosts to life. The backend handles dynamic generation with asynchronous HTTP client calls, merges them into a cohesive multi-speaker podcast with ambient music and laughing sound effects using pydub, and supports a robust gTTS fallback mechanism.



• 
  

  Best Use of Google AI:
  
  HahaNotes is built from the ground up using the official Google GenAI SDK.

  
  
  
  
  
  • We use gemini-3.5-flash with structured Pydantic schemas (HahaNoteScript) to guarantee strict JSON output format for dialogue script generation.
  
  
  • We leverage Gemini's stateful Interactions API (client.interactions.create with previous_interaction_id) to keep a continuous, contextual memory of the chat history when users comment or prompt the hosts further.
  
  
  • We also used Google's image models to design custom meme templates for the video renderer.