A fast, multi-language coding playground with AI tools, snippets, and quizzes.
Live demo · Features · How it works · Tech Stack · Getting Started
Status: Work in Progress
ZitaCode is a developer-focused playground where you can write code in multiple languages, get AI feedback, and save/share snippets. It’s designed to be fast and clean, with a modern stack and a simple flow from typing to results.
- Monaco-powered editor with language presets and themes.
- AI code review via Gemini.
- AI quiz generation via Mistral.
- Snippet sharing with public URLs.
- Buckets to organize saved snippets.
- Authentication with Clerk.
- Convex backend for data + server functions.
- PWA-ready offline caching (
next-pwa).
flowchart LR
subgraph Client
UI[Next.js UI]
Editor[Monaco Editor]
SW[PWA Service Worker]
Cache[(Offline Cache)]
end
subgraph App[Next.js App Router]
API[API Routes]
Auth[Clerk Auth]
end
subgraph Data[Convex Backend]
Fn[Convex Functions]
DB[(Convex DB)]
end
Gemini[Gemini API]
Mistral[Mistral API]
UI --> Editor
UI --> API
UI --> Auth
UI --> Fn
API --> Gemini
API --> Mistral
Fn --> DB
SW --> Cache
UI --> Cache
sequenceDiagram
participant U as User
participant UI as Editor UI
participant API as /api/gemini/review
participant G as Gemini
U->>UI: Request review
UI->>API: POST code + language
API->>G: Generate review
G-->>API: Review text
API-->>UI: Response
UI-->>U: Render feedback
sequenceDiagram
participant U as User
participant UI as Quiz UI
participant API as /api/quiz/generate
participant M as Mistral
U->>UI: Pick category + difficulty
UI->>API: POST quiz request
API->>M: Generate MCQs
M-->>API: JSON questions
API-->>UI: Parsed quiz
UI-->>U: Render quiz
- Next.js 16 (App Router)
- React 19
- TypeScript
- Tailwind CSS
- Monaco Editor
- Convex
- Clerk Auth
- Gemini AI + Mistral AI
- PWA (
next-pwa+ Workbox)
Language metadata includes Piston runtime versions for each language.
- Node.js (LTS recommended)
- npm
npm install
npm run dev
Create a .env.local file with the following keys:
NEXT_PUBLIC_CONVEX_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_WEBHOOK_SECRET=
GEMINI_API_KEY=
MISTRAL_API_KEY=
npm run dev
npm run build
npm run start
npm run lint
- Never commit real API keys to Git.
.env*is ignored by default. - If a key is exposed, rotate it immediately and rewrite history if needed.