claudebin.com CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Claudebin is a "pastebin for vibes" - a web app for publishing and sharing Claude Code sessions.

Commands

# Development
bun dev               # Start web app in dev mode

# Build
bun build             # Build the app

# Code Quality
bun check             # Oxlint and Oxfmt check (runs on pre-commit)
bun format            # Oxfmt format
bun lint              # Oxlint lint
bun type-check        # TypeScript check

Architecture

Structure:

• app/ - Next.js 16 web app (App Router, Turbopack)
• docs/ - Architecture documentation
• supabase/ - Database migrations

App Structure (app/src/):

src/
├── app/          # Next.js App Router pages
├── components/   # Reusable UI components
│   └── ui/       # shadcn/ui components
├── sections/     # Page-level section components
├── utils/        # Utilities, constants, helpers
├── copy/         # i18n translations (en-EN.json)
├── i18n/         # i18n config
└── static/       # CSS, fonts

Key Libraries:

• Web: next-intl, shadcn/ui (Base UI), Tailwind CSS
• Data: @supabase/supabase-js, ramda
• Build: Next.js

Code Conventions

Arrow Functions

ALWAYS use arrow functions over function declarations:

// GOOD
const myFunction = () => {};
const asyncFunction = async () => {};

// BAD
function myFunction() {}

Oxc Tooling

• Double quotes, 2-space indent, semicolons required
• 100-char line width
• Oxlint for linting, Oxfmt for formatting

Component Structure

Components are single files using kebab-case naming (no directories):

components/
├── home-intro.tsx
├── home-tutorials.tsx
├── ui/           # shadcn/ui components
└── icon/         # Icon components

Type Patterns

Use as const for variant unions:

export const ButtonVariants = ["default", "transparent"] as const;
export type ButtonVariant = (typeof ButtonVariants)[number];
export type ButtonVariantMapping = Record<ButtonVariant, string>;