VoiceCode.ai

The World's First Voice-Powered AI Coding Tutor

---

🚀 Overview

VoiceCode.ai is a revolutionary e-learning platform that allows users to learn programming through natural voice conversations. Powered by Google's Gemini 1.5 Multimodal API, it provides a hands-free, interactive learning experience where an AI Tutor guides you, writes code for you, and explains concepts in real-time.

It's not just a course; it's a Conversation with Code.

✨ Key Features

🎙️ AI Voice Tutor

• Real-time Voice Interaction: Talk to your tutor naturally. No keyboard required.
• Multimodal Context: The AI sees what you see—editor code, console output, and navigation state.
• Secure Architecture: API Keys are hidden behind Supabase Edge Functions to prevent abuse.

🌌 "Nebula" Design System

• Immersive UI: A premium, dark-mode aesthetic with glassmorphic elements (backdrop-blur).
• Orange & Purple Gradients: Distinctive branding inspired by deep space nebulae.
• Interactive Animations: Smooth transitions, tilt effects on cards, and shiny beam buttons.

🎮 Gamified Learning

• XP & Leveling System: Earn XP for completing lessons and coding challenges.
• Streaks: Daily goals to keep you motivated.
• Feedback Widget: Built-in tool to report bugs or request features directly to the team.

---

🛠️ Tech Stack

• Frontend: React (TypeScript), Vite
• Styling: Tailwind CSS
• State Management: React Hooks (Context API)
• AI/LLM: Google Gemini Multimodal Live API
• Backend: Supabase (PostgreSQL, Auth, Edge Functions)
• Analytics: PostHog (Product Analytics) + Vercel Analytics (Web Vitals)
• Editor: Monaco Editor (VS Code for the web)

---

🔧 Installation & Setup

Prerequisites

• Node.js (v18+)
• npm or yarn
• A Supabase Project
• A Google Gemini API Key
• PostHog Account (Optional, for analytics)

Steps

1. Clone the Repository

   git clone https://github.com/your-username/voicecode-ai.git
   cd voicecode-ai

2. Install Dependencies

   npm install

3. Environment Variables Create a .env.local file in the root directory:

   # Supabase (Required)
   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   # Analytics (Optional)
   VITE_PUBLIC_POSTHOG_KEY=your_posthog_key
   VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

4. Supabase Setup (CLI) Ensure you have the Supabase CLI installed.

   # Login to Supabase
   npm run supabase:login
   
   # Link your local project to your remote Supabase project
   npm run supabase:link

5. Deploy Edge Functions This project uses an Edge Function (chat-with-gemini) to securely proxy requests to Google Gemini.

   # Set your Gemini API Key as a secret
   supabase secrets set GEMINI_API_KEY=your_gemini_key
   
   # Deploy the function
   npm run supabase:deploy

6. Run Development Server

   npm run dev

---

🗺️ Roadmap

• Phase 1: Foundation (Core AI Voice, Editor, Basic Courses)
• Phase 2: Redesign (Nebula Theme, Glassmorphism, Landing Page)
• Phase 3: Migration V2 (Supabase Backend, Edge Security, Analytics)
• Phase 4: Monetization (Pro Tier, Stripe Integration)
• Phase 5: Community (Leaderboards, Peer Reviews)

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

_{Built with ❤️ by the VoiceCode Team using the Supabase & Gemini API}