A web app that explains code in simple English using AI.
Built with Next.js, Monaco Editor, and Groq API. The goal is to keep it simple, fast, and avoid unnecessary API usage.
- Explain code in simple language
- Two modes:
- Fast mode for short answers
- Detailed mode for structured explanations
- Streaming response (text appears gradually)
- Copy explanation with one click
- Share explanation using a unique link
- Avoid duplicate API calls using hash-based caching
- Token estimation before sending request
- Basic input validation (empty or invalid code)
Frontend:
- Next.js (App Router)
- React
- Tailwind CSS
- Monaco Editor
Backend:
- Next.js API routes
- Groq API (streaming)
Database:
- MongoDB with Mongoose
- User pastes code into the editor
- App checks if input looks like valid code
- Code is cleaned and normalized
- A hash is generated using code + mode
- Database is checked:
- If data exists, return saved explanation
- If not, call AI API
- Response is streamed to UI
- Result is saved with:
- hash
- shortId (used for sharing)
Each explanation can be shared using a URL:
/shared/{shortId}
- shortId is generated from hash (first few characters)
- Same input + same mode → same hash → same link
- Prevents duplicate entries in DB
- Works across devices without login
- Data is fetched using shortId via API
- Empty input → blocked before API call
- Non-code input → rejected using basic validation
- Very large input → limited by character threshold
- Duplicate requests → served from DB (no API call)
- Streaming interruption → handled safely in UI
- Missing sharedId → returns "No match found"
- How does hash-based caching reduce API cost?
- Why use streaming instead of waiting for full response?
- How would you improve code validation logic?
- What are the risks of using shortId instead of full hash?
- How would you scale this system for high traffic?
app/ api/ explain-code/ share-code/ share-code/[sharedid]/ components/ lib/ models/ shared/[sharedid]/ types/
- Empty input is blocked
- Non-code text is rejected (basic check)
- Character limit is applied
- Helps reduce unnecessary API usage
- Hash-based caching avoids repeated API calls
- Token estimation before request
- Two modes to control token usage
- Streaming avoids large response buffering
- Clone the repo
git clone https://github.com/nabaraj/ai-code-explainer
cd code-explainer
- Install dependencies
npm install
- Add environment variables
Create .env.local:
MONGODB_URI=your_mongodb_url
GROQ_API_KEY=your_groq_api_key
- Run locally
npm run dev
- History feature (view past explanations)
- Syntax highlighting for code
- Export explanation as text or PDF
- Better validation for different languages
- Authentication for saving personal history
This project focuses on practical problems:
- Reducing API cost
- Improving readability
- Making explanations easy to share
MIT