ZitaCode

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

---

What is ZitaCode?

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.

---

Features

• 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).

---

How it works

System architecture

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

Loading

AI code review flow (Gemini)

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

Loading

Quiz generation flow (Mistral)

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

Loading

---

Tech Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS
• Monaco Editor
• Convex
• Clerk Auth
• Gemini AI + Mistral AI
• PWA (next-pwa + Workbox)

---

Supported Languages

Language metadata includes Piston runtime versions for each language.

---

Getting Started

Prerequisites

• Node.js (LTS recommended)
• npm

Install

npm install
npm run dev

Environment Variables

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=

Scripts

npm run dev
npm run build
npm run start
npm run lint

---

Security Notes

• 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.

---

Inspiration

• Reference: https://youtu.be/fGkRQgf6Scw?si=sJ1ttB7TAOrcUx3u