🌊 Speak with Zubi — Real-Time AI Conversation for Children

A real-time voice AI app where children have a fun 60-second conversation with "Zubi", an AI friend, about a colorful ocean image.

Tech Stack

• Frontend: React 18 + Vite
• Backend: Node.js + Express + WebSocket
• AI: Google Gemini Live API (gemini-2.0-flash-exp) — FREE tier

Quick Start

1. Get Your Free API Key

1. Visit aistudio.google.com
2. Sign in with your Google account
3. Click "Get API Key" — copy the key

2. Set Up Backend

cd backend
# Copy example env and fill in your key
copy .env.example .env
# Edit .env and paste your key as GEMINI_API_KEY=...

npm install
npm start

3. Set Up Frontend (new terminal)

cd frontend
npm install
npm run dev

4. Open the App

Go to http://localhost:5173

Click "Talk to Zubi! 🎙️", allow microphone, and enjoy!

Features

• 🎙️ Real-time bidirectional voice conversation
• 🌊 Vibrant child-friendly ocean illustration
• ⏱️ 60-second session timer with visual countdown
• 🎉 Tool call: AI triggers confetti & emoji burst when celebrating
• 🎵 Speaking indicator with animated audio bars
• 📱 Fully responsive (mobile + desktop)

Project Structure

interviewProject/
├── backend/
│   ├── server.js       # WebSocket proxy → Gemini Live API
│   ├── .env            # Your Gemini API key goes here
│   └── package.json
└── frontend/
    ├── src/
    │   ├── App.jsx
    │   ├── components/
    │   │   ├── ImageScene.jsx
    │   │   ├── ConversationPanel.jsx
    │   │   ├── SpeakingIndicator.jsx
    │   │   ├── TimerDisplay.jsx
    │   │   └── UIEffect.jsx
    │   ├── hooks/
    │   │   └── useRealtimeSession.js
    │   └── assets/ocean.svg
    └── package.json