• 

  interface

🚗 CodeDrive 💨Hands-Free Coding Assistant

🌟 Inspiration

CodeDrive was inspired by the moments when ideas strike at inconvenient times, when a pset is due. While commuting, cooking, or walking, and you wish you could code without typing.

I wanted to create a voice-driven development companion that lets you write, debug, and summarize code safely while on the move, turning your workflow into a conversational, accessible experience.

🧠 What it Does

CodeDrive is a voice-powered mobile web app that transforms how developers interact with their code:

• 🎙️ Talk to CodeDrive to write or edit code.
• 📁 Upload files (e.g., .py, .txt, .pdf, .md) for instant AI-powered summaries.
• 🔊 ElevenLabs integration lets CodeDrive read your summaries aloud — perfect for when you’re driving or multitasking (in progress).
• 🪩 Beautiful, glassy UI that reacts to your voice, with neon animations and rounded cards.
• ☁️ GitHub integration (in progress) for syncing changes and saving session summaries.

🏗️ How It Was Built...

• Frontend: React + Vite
  
• UI/UX: TailwindCSS + Framer Motion (for smooth glass animations)
  
• Speech Input: Web Speech API
  
• AI Summarization: LLM integration (OpenAI / Claude-compatible endpoint)
  
• Voice Output: ElevenLabs Text-to-Speech API
• File Handling: Local file reader with caching
  
• Storage: Browser cache + GitHub API (planned for commits)
• **AI assistance: ChatGPT, Create anything

🧩 Challenges That Were Ran Into

• Getting speech recognition to handle pauses and code syntax without cutting off early.
  
• Balancing AI summarization time vs. performance for large files.
  
• Integrating ElevenLabs audio streaming smoothly with the UI for playback controls, in progress.
• Designing a UI that looks clean and futuristic but remains lightweight on mobile.

🏆 Accomplishments We’re Proud Of

• Built a hands-free code summarization tool.
  
• Designed a fun, glassy mobile interface that feels responsive and intuitive.
  
• Achieved real-time voice transcription and AI summarization playbackish working together.
  
• Created a concept that improves accessibility and helps developers stay creative on the go.

📚 What I Learned

• How to combine voice, LLMs, and frontend UX into a cohesive product in progress.
• How small design details (blur, shadow, animation timing) drastically improve usability.
  

🚀 What’s Next for CodeDrive

• ✨ GitHub integration: Push commits or snippets by voice.
  
• 📲 Offline mode: Let summaries and playback work without Wi-Fi...
• 🧩 VS Code plugin: Sync your CodeDrive drafts back to your desktop IDE.
  
• 💬 AI pair programmer: Voice chat that can suggest fixes, generate code, or refactor in real time.
  
• 🔉 Drive Mode: Automatically detect driving and simplify the UI for safe, eyes-free interaction.
  

“CodeDrive makes creativity flow — anywhere, anytime.”

Built With

• elevenlabs-api
• framer
• github-api
• openai-api
• react
• tailwindcss
• vite