Website Snapshot Tool

A web application for capturing and managing website snapshots.

Tech Stack

• Framework: Next.js 16 (App Router, TypeScript)
• Styling: Tailwind CSS v4
• Components: shadcn/ui (Radix Nova preset)
• Linting: OxLint
• Formatting: Prettier with import sorting
• Git Hooks: Lefthook (pre-commit: Prettier → typecheck → OxLint)
• Package Manager: pnpm 10
• Node: v24 (enforced via .nvmrc)

Getting Started

# Install dependencies
pnpm install

# Start the development server
pnpm dev

Open http://localhost:3000 to view the app.

Development

Pre-commit Hooks

Lefthook runs automatically on commit:

1. Prettier — formats staged files
2. TypeScript — type-checks the project
3. OxLint — lints staged files

Adding UI Components

pnpm dlx shadcn@latest add <component>

Components are placed in src/components/ui/.

Project Structure

src/
├── app/          # Next.js App Router pages and layouts
├── components/   # React components (ui/ for shadcn)
└── lib/          # Shared utilities