Nicholas Adamou
GitHub

Development

PreviousNext

Learn how to develop and work with the codebase.

Learn how to develop and work with the codebase.

Development Workflow

Starting the Dev Server

bun run dev

Features in development mode:

  • Hot module replacement
  • Fast refresh
  • Error overlay
  • Source maps

Previewing the Documentation Site

The separate Next.js/Fumadocs documentation app lives in docs/. From the repository root:

flox activate
bun install --cwd docs --frozen-lockfile
bun run docs:dev

Open the local docs site. Author Markdown in docs/src/ and update docs/navigation.json for new pages. Regenerate MDX after edits with bun run --cwd docs generate:content. The preview reloads when generated content changes. Run bun run docs:check inside Flox to validate the full docs application. The root AGENTS.md requires relevant documentation updates alongside code changes.

The docs app uses the actual set-me-up-docs shell and components with portfolio branding. See documentation architecture for content generation and deployment responsibilities.

Available Scripts

Development

bun run dev              # Start dev server
bun run build            # Build for production
bun run start            # Start production server

Code Quality

bun run lint             # Run ESLint
bun run format           # Format with Prettier
bun run format:check     # Check formatting

Testing

bun run test             # Run tests (watch mode)
bun run test:run         # Run tests once
bun run test:watch       # Watch mode
bun run test:coverage    # Generate coverage report

Build Scripts

bun run download:images:unsplash # Download Unsplash images
bun run prepare-chatbot-data     # Prepare chatbot training data

Code Organization

Components

Components are organized by domain:

  • chat/ - Chatbot widget and dynamic loader
  • gallery/ - VSCO and featured gallery
  • home/ - Homepage sections (bio, social, Gumroad)
  • layout/ - SiteNav, BottomNav, CommandPalette, SmoothScroll
  • mdx/ - Table, YouTubeEmbed for MDX content
  • notes/ - Article pages, note list, related articles
  • projects/ - Project list, filter bar, open source
  • ui/ - Shared primitives (ImagePreview, UniversalImage)

Hooks

Custom hooks in src/hooks/:

  • use-views.ts - Page view tracking
  • use-gumroad-products.ts - Gumroad product fetching
  • use-vsco-gallery.ts - VSCO gallery data
  • use-infinite-vsco-gallery.ts - Paginated VSCO gallery

Lib

Library code grouped by feature:

  • animation/ - Framer Motion variants and config
  • content/ - MDX parsing with gray-matter
  • image/ - Unsplash image resolution and attribution
  • projects/ - Project config and icon components
  • og.ts - OG image URL generation
  • vsco-local.ts - Local VSCO export reader

Best Practices

Code Style

  • Use TypeScript for all new code
  • Follow existing patterns in the codebase
  • Use kebab-case for file names
  • Export named functions/components

Performance

  • Use React Server Components where possible
  • Implement proper loading states
  • Optimize images with Next.js Image
  • Use dynamic imports for heavy components

Testing

  • Write tests for new features
  • Maintain test coverage above 80%
  • Test edge cases and error states
  • Use Testing Library best practices

Next Steps