Decode — AI Code Debugger & Explainer

✨ Built for InnoHack 2.0 — with AI, React, and Firebase ✨

---

🚀 Overview

Decode is a single-page AI web application that allows users to paste code, detect bugs, and get simplified explanations — all powered by Hugging Face and securely wrapped with Firebase Authentication.

---

🔑 Key Features

• 🔐 User Authentication (Firebase Login, Signup, Logout)
• 💻 Code Editor with live AI analysis
• 🤖 Bug Detection & Explanation using StarCoder via Hugging Face API
• ⚡ Fast, Modular Architecture with Vite + React
• ☁️ Deployed on Vercel with serverless functions
• 🎨 No CSS frameworks — all custom styles via App.css / main.css

---

🧩 Tech Stack

Frontend	Backend/API	AI Layer	Auth & DB	Deployment
React + Vite	Vercel Serverless API (analyze.js)	Hugging Face (StarCoder)	Firebase (Auth + Firestore)	Vercel

---

📁 Folder Structure

decode/
├── api/
│ └── analyze.js # Serverless Hugging Face handler
├── public/
│ ├── index.html # App metadata + Google Fonts
│ └── logo.png # App logo
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── CodeEditor.jsx
│ │ └── AIOutput.jsx
│ ├── context/
│ │ └── AuthContext.jsx
│ ├── firebase/
│ │ └── config.js
│ ├── lib/
│ │ └── api.js
│ ├── App.jsx
│ ├── App.css
│ ├── main.jsx
│ └── main.css
├── .env # Firebase + Hugging Face secrets
├── vercel.json # SPA routing
├── vite.config.js # Vite setup
├── bunfig.toml # Bun config
├── package.json
└── README.md # This file

---

⚙️ Getting Started

1. Clone the Repository

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

2. Install Dependencies

bun install # or npm install / yarn

3. Create .env

# FirebaseVITE_FIREBASE_API_KEY=your_keyVITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.comVITE_FIREBASE_PROJECT_ID=your_projectVITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.comVITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_idVITE_FIREBASE_APP_ID=your_app_id# Hugging Face (server-side only)HF_API_KEY=your_huggingface_api_token

---

🧪 Local Development

bun run dev # or npm run dev

Open http://localhost:5173 in your browser.

---

⬆️ Deployment on Vercel

1. Push the repo to GitHub
2. Connect to vercel.com
3. Add the .env variables in Project Settings → Environment Variables
4. Trigger a deploy 🚀

Vercel uses vercel.json to redirect all SPA routes to /.

---

💡 Usage Flow

1. User signs up/logs in via Firebase
2. Pastes code into the editor
3. Hits “Analyze Code”
4. Frontend → /api/analyze → Hugging Face API
5. AI output (suggestions + explanation) appears in AIOutput

---

🔐 Security Notes

• Hugging Face token is stored only in .env
• Frontend Firebase vars use VITE_ prefix (public keys only)
• No hardcoded secrets in client code

---

🎯 Goals for Expansion

• ⏱ Save code history per user (Firestore)
• 🌐 Support for multiple languages (auto-detect)
• 🪄 Better formatting & syntax highlighting
• 📊 Usage analytics and error tracking

---

👥 Meet the Team – Decode @ InnoHack 2.0

Name	Role
Utkarsh Vidwat	Full Stack / Firebase Lead
Ganesh Beldar	React Developer
Sanskruti Neharkar	AI Prompt & UX Engineer
Prajakta Salunke	Design & Documentation

---