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

> Source: <https://dev.to/trnh_lp_b51d60cb51d881d/hahanotes-banishing-developer-burnout-with-ai-banter-podcasts-short-videos-4flb>
> Published: 2026-07-13 00:02:29+00:00

*This is a submission for Weekend Challenge: Passion Edition*

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

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.

This is a [Next.js](https://nextjs.org) project bootstrapped with [ create-next-app](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

First, run the development server:

```
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`

. The page auto-updates as you edit the file.

This project uses [ next/font](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load

To learn more about Next.js, take a look at the following resources:

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more…

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

`<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.`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.`clown`

, `harold`

, `fine_dog`

, `drake_no`

, `drake_yes`

, `doge`

, and `burn`

) generated dynamically using Google's generative image capabilities.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**.

`gemini-3.5-flash`

with structured Pydantic schemas (`HahaNoteScript`

) to guarantee strict JSON output format for dialogue script generation.`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.