Skip to content

CLAUDE.md

Latest commit

 

History

History
97 lines (85 loc) · 4.04 KB

CLAUDE.md

File metadata and controls

97 lines (85 loc) · 4.04 KB

CLAUDE.md

Project Overview

  • Notebin: A decentralized code snippet sharing platform using Nostr protocol (NIP-C0 implementation)
  • Built with Next.js 15, React 19, TypeScript, and Tailwind CSS
  • Uses shadcn/ui components and Radix UI primitives

Architecture & Patterns

  • Feature-based structure: Components organized in src/features/ by domain (editor, login, navigation, post, snippet-feed, zap)
  • Barrel exports: Each feature exports components via index.ts files
  • State management: Zustand store in src/store/index.ts with localStorage persistence
  • Path aliases: Uses ~/ for src/ directory

Key Technologies

  • Nostr integration: Uses nostr-tools for decentralized functionality
  • Authentication: NextAuth with custom Nostr credentials provider
  • Code editor: CodeMirror with language extensions and themes
  • Data fetching: TanStack Query for server state
  • Styling: Tailwind CSS with cn() utility function combining clsx and tailwind-merge
  • Icons: Lucide React icons
  • Avatars: Dicebear for generated avatars

Development Commands

npm run dev        # Development server with Turbopack
npm run build      # Production build
npm run start      # Production server
npm run lint       # Next.js linting (also runs Biome)

Code Quality

  • Linting/Formatting: Biome (configured in biome.json)
  • TypeScript: Strict mode enabled with path mapping
  • Component conventions:
    • "use client" directive for client components
    • Custom hooks prefixed with use
    • Feature components exported via barrel files

Development Guidelines

  • shadcn/ui Components: Before implementing features that may require new UI components, check if additional shadcn/ui components are needed and ask the user to install them first. Do not attempt to create missing components yourself.

Key File Locations

  • Global state: src/store/index.ts
  • Types: src/types/index.ts
  • Utilities: src/lib/utils.ts
  • Constants: src/lib/constants.ts
  • Auth config: src/auth/index.ts
  • Nostr utilities: src/lib/nostr/

Libraries & Dependencies

Batshit (Request Batching)

  • Purpose: Batch management library for deduplicating and batching requests within a time window
  • Installation: npm install @yornaath/batshit
  • Key Features:
    • Automatically groups similar data requests to reduce API calls
    • Configurable schedulers (time-based, size-based, or hybrid)
    • Custom resolvers for complex data mapping
  • Basic Usage: 
    import { create, keyResolver, windowScheduler } from "@yornaath/batshit";

const users = create({
  fetcher: async (ids: number[]) => {
    return client.users.where({ userId_in: ids });
  },
  resolver: keyResolver("id"),
  scheduler: windowScheduler(10), // 10ms time window
});

// These requests will be batched if called within 10ms
const user1 = await users.fetch(1);
const user2 = await users.fetch(2);
  • Best Practices:
    • Create batchers once, outside of component renders
    • Use memoization for context-specific batchers
    • Consider windowedFiniteBatchScheduler() for size + time constraints
  • Documentation: https://github.com/yornaath/batshit

Documentation