Genz-teacher

• 

  image_1

• 

Inspiration

We wanted to make studying more relatable, especially for students who find traditional learning materials dull or hard to understand. Inspired by Gen-Z culture, memes, and the rise of AI, we built Gen-Z Teacher to turn complex study notes into fun, friendly, and easy-to-grasp explanations — complete with an audio version you can actually vibe with.

What it does

Gen-Z Teacher takes your study material and: Converts it into a simplified, Gen-Z-styled explanation. Uses OpenAI GPT to generate accurate, engaging content. Generates a natural-sounding AI voice narration using ElevenLabs. Displays the output in a clean, playful interface with one-click audio playback.

How we built it

Frontend: Built using Next.js, styled with Tailwind CSS. Backend/API: Uses OpenAI’s GPT Uses ElevenLabs TTS API for generating speech from the AI explanation. Audio Playback: Implemented with native HTML5 Audio API for seamless listening. Deployment: Built with cross-platform compatibility in mind (supports desktop & mobile). All API keys and voice/model configurations are stored using environment variables for security.

Challenges we ran into

Voice API CORS issues: Some platforms restrict using the ElevenLabs API client-side, so we needed to use a server or proxy setup to resolve CORS and streaming issues. Keeping explanations Gen-Z but still meaningful: Striking the right balance between informal, meme-based content and actually helpful academic info was tricky. Running in lightweight environments: We tested on platforms like Termux and mobile browsers, which had issues with node: imports and required fallback workarounds.

Accomplishments that we're proud of

Created a fully working demo in under 72 hours. Managed to keep everything open-source and lightweight. Generated natural, fun speech output for serious topics. Made a tool that actually made learning feel fun.

What we learned

How to combine multiple AI APIs (openAi, ElevenLabs) effectively. How important UI/UX is, even in a utility-based project. That humor and creativity can boost engagement in learning tools.

What's next for Gen-Z Teacher

Add multilingual support (Hindi, Assamese, Bengali). Let users upload full PDFs or lecture slides or image and summarize them. Enable AI quiz generation after explanation. Add speech-to-text so you can speak questions directly. Launch on mobile as a PWA or native app.

Built With

• api
• axios
• css
• git
• github
• javascript
• openai
• react
• vercel