Comparitor

Comparitor is a retro-styled code diff and analysis workspace. Paste two versions of code side-by-side, get instant visual diffs, automatic bug detection, and an AI-grade code review — all in the browser.

🔗 Live demo:shianmike.github.io/comparitor

---

Features

• Side-by-side diff viewer — Monaco Editor panels with line-level diff highlighting and inline change tooltips
• Character-level diffing — powered by the diff library for granular added/removed/modified callouts
• Static code analysis — detects undefined variables, mismatched brackets, unused symbols, missing returns, and risky patterns across JS/TS and Python
• Code review summary — structured findings grouped by severity (errors, warnings, suggestions) with suggested fixes
• File upload — drag-drop or browse to load any text file into either panel
• RetroUI design — custom pixel-border card system, badges, and tab components

Tech Stack

Layer	Library
Framework	React 19 + TypeScript
Build	Vite
Editor	Monaco Editor (@monaco-editor/react)
Diff	diff (jsdiff)
Styling	Tailwind CSS
Icons	Lucide React

Getting Started

npm install
npm run dev

Open http://localhost:5173.

Build

npm run build

Output is written to dist/.

Project Structure

src/
App.tsx # Main layout and editor panels
types.ts # Shared TypeScript types
lib/
codeAnalysis.ts # Static analysis engine
utils.ts # Class name helper
components/retroui/ # Retro-styled UI primitives
Badge.tsx
Button.tsx
Card.tsx
Tabs.tsx

License

MIT