CodeXplanator

Inspiration

Every coder has been there: staring at a piece of code thinking WHAT THE HELL does this do?
We wanted to build something that feels like a late-night coding buddy - instant clarity without digging through StackOverflow or docs.

What it does

Paste any code snippet.
CodeXplanator auto-detects the language.
Choose explanation depth: Junior, Mid, Senior.
Get an instant breakdown:
- 📚 Explanation bullets
- 📝 Annotated code with inline comments
- 🔧 Refactor suggestions
- 🧪 Analysis (bugs, complexity, test cases)
- 📊 Side-by-side diff view (original vs refactor)
One-click copy and Markdown export for sharing.
Extra polish: dark/light mode, Prettier formatting for JS/TS.

How we built it

Frontend + backend integrated in a Next.js 15 app with the App Router.
React 19 for UI logic, with TailwindCSS for fast styling.
Monaco Editor + Diff for a VSCode-like experience inside the browser.
Prettier (standalone) for local JS/TS formatting.
Built-in mock LLM engine (deterministic, no API calls) to ensure hackathon stability.
Custom language detection module → decides between Python, TS, JS, Java, Go, C, C++.

Challenges we ran into

⚡ Time pressure: building a full-stack tool meant cutting scope.
🧩 Hydration errors in Next.js (dark mode toggle + SSR mismatches).
🔀 Dependency hell with React 19 vs libraries expecting React 18.
🤖 AI integration was too unstable → we pivoted to a mock engine for guaranteed results.

Accomplishments that we're proud of

🚀 A working, polished full-stack app.
✨ Smooth UI/UX with copy, export, formatting, and diff.
💡 Stable fallback engine, but with a clear future AI roadmap.
🎥 Demo-ready in 3 minutes with multiple languages & levels.

What we learned

Sometimes mock > real AI when stability matters.
React 19 + Next.js 15
How to design for progressive depth (Junior vs Senior explanations).
The importance of presentation polish: copy/export buttons, Markdown reports, dark mode.

What's next for CodeXplanator

🤖 Plugging in real AI models (Ollama, OpenAI, Claude) for richer explanations.
👥 Collaborative mode - multi-user code reviews with shared annotations.
🌍 Support for more languages & domain-specific patterns.
📚 Educational mode - quizzes, guided refactoring challenges.
🚀 Deploy as a production-ready web tool for devs & students.

Built with

Languages: TypeScript, JavaScript
Frameworks: Next.js 15, React 19
Styling: TailwindCSS
Editor: Monaco Editor, Monaco Diff
Utilities: Prettier (standalone)
Icons: lucide-react
Backend: Next.js API routes
AI (future): Ollama local models, LLMs
Infra: GitHub (public repo), Vercel-ready

Our Team

Kamil Piejko - Backend & Infra

Built the API route /api/explain with a deterministic mock engine (levels-aware).
Structured lib/ modules (types, llm/clients, prompts, parsing) for future AI plug-in.
Added report builder (buildMarkdown) and download utilities.
Repo hygiene: MIT license, public setup, script consistency.

Mateusz Grabowski - Product & Frontend Lead

Drove product scope and UX: level selector (Junior/Mid/Senior), clean 1-screen flow.
Implemented Monaco Editor + Monaco Diff (VSCode-like editing & side-by-side refactor).
Added copy buttons, export to Markdown, and dark/light theming.
Ensured stability (mock engine fallback, hydration fixes).

Joanna Pich - DX/Polish & Demo