PR-Dojo/README.md

116 lines
3.1 KiB
Markdown

# 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
```bash
bun install
```
### Development
```bash
bun dev
```
Starts the dev server at `localhost:4321`.
### Build
```bash
bun build
```
Produces a static site in `dist/`.
### Preview
```bash
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