PR Dojo

A code review practice platform where users hunt for bugs in rejected PR code, earn XP, and submit fixes.

Features

Challenge-based learning — Browse through real-world buggy code challenges
Interactive diff viewer — Click on lines to mark them as buggy with visual feedback
Inline fix submission — Write fixes per-marked line or as a unified diff
XP system — Earn points for finding and fixing bugs
Difficulty ratings — Challenges range from 1 to 5 stars
Hints system — Hover over marked lines to reveal contextual hints

Tech Stack

Astro 6 — Static site generator
Tailwind CSS v4 — Utility-first CSS via @tailwindcss/vite
TypeScript — Strict mode
Node.js 22+ — Runtime

Getting Started

Prerequisites

Node.js >= 22.12.0
Bun package manager

Installation

bun install

Development

bun dev

Starts the dev server at localhost:4321.

Build

bun build

Produces a static site in dist/.

Preview

bun preview

Locally previews the production build.

Project Structure

src/
├── data/
│   └── challenges.json       # Challenge data (code, hints, expected lines)
├── pages/
│   ├── index.astro           # Challenge listing + hero
│   ├── profile.astro         # User profile / XP dashboard
│   └── challenges/
│       └── [slug].astro      # Single challenge view
├── components/
│   ├── DiffViewer.astro      # Interactive diff viewer with line marking
│   └── Welcome.astro         # Legacy starter component
├── layouts/
│   └── Layout.astro          # Root layout with header/nav/footer
└── styles/
    └── global.css            # Global styles

Challenge Data Format

Each challenge in src/data/challenges.json contains:

Field	Type	Description
`id`	number	Unique identifier
`title`	string	Challenge name
`repository`	string	GitHub repo path
`baseSha`	string	Base commit SHA
`difficulty`	number	1-5 stars
`xpValue`	number	XP reward
`bugType`	string	Category (e.g., "Memory Safety")
`file`	string	Filename
`code`	string	Buggy source code
`hints`	string[]	Array of "Line N: description" hints
`expectedLines`	number[]	Lines containing bugs
`expectedPatch`	string	Unified diff of the fix

Development Notes

Tailwind CSS v4 uses the Vite plugin — no tailwind.config.js or @layer directives
Astro SSR renders everything client-side by default; add client:* directives only when interactivity is needed
The full_plan.md documents the planned backend architecture (reference only, not a blind spec)

Current Status

Frontend complete, backend pending.

The site currently runs as a static frontend with hardcoded challenge data. The planned backend will be built with either Quarkus or Node.js + SQLite to support:

User authentication and XP tracking
Persistent bug submissions
Challenge progress tracking
Leaderboards

License

MIT

3.1 KiB Raw Blame History