Skip to content

CLAUDE.md

Latest commit

 

History

History
95 lines (71 loc) · 3.64 KB

CLAUDE.md

File metadata and controls

95 lines (71 loc) · 3.64 KB
Raw

CLAUDE.md

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

Project Overview

Frontend starter template built with Next.js 16, React 19, TypeScript, and Tailwind CSS 4. It ships a small design system, a responsive topbar/footer layout, cookie consent, SEO/sitemap wiring, and analytics hooks so new sites can be bootstrapped quickly.

This is a template repository: clone or fork it to start a new project, then replace the brand colors, logo, menu entries, and copy.

Commands

yarn dev              # Start development server (localhost:3000)
yarn build            # Production build (also generates sitemap via postbuild)
yarn start            # Start production server (localhost:3000)
yarn lint             # Run ESLint
yarn prettier         # Format src/ with Prettier
yarn prettier:check   # Check formatting (used in CI)

CI runs: prettier:check -> lint -> build.

Architecture

Directory structure

  • app/ - Next.js App Router pages; layout.tsx wraps every page with Topbar/Footer/CookieBar.
  • src/js/components/ - React components.
    • reusable/ - Shared UI primitives (Container, Button, Input, Heading, Link, etc.).
    • Topbar.tsx, Footer.tsx, CookieBar.tsx - Layout components.
    • Topbar/ - Topbar sub-components (MenuEntries, Menu/Link, Menu/Dropdown).
  • src/js/utils/ - Utilities (routes, SEO, analytics, validation, cookies).
  • src/js/data/ - Static data (contacts).
  • src/css/ - Global stylesheets.

Key patterns

Routing: Type-safe routes via the Route enum in src/js/utils/routes.ts. Use Route.url(Route.HOME) to resolve a path.

Components: Mix of server and client components. Interactive components (forms, dropdowns, cookie bar) use the 'use client' directive. Reusable components are namespace-exported (e.g. Button.Primary, Container.FlexRow) and styled with plain Tailwind className strings — no styled-components, no CSS modules, no transient $ props.

Topbar: A single sticky header (sticky top-0 z-50). Menu entries are declared in the MENU_ENTRIES array and rendered by MenuEntries, which supports route, url, externalLink, dropdown, and hideOnMobile fields.

Analytics: Umami analytics via src/js/utils/analytics.ts.

Styling

Tailwind CSS 4 (CSS-first). Global styles live in app/globals.css, which does @import 'tailwindcss' and @config '../tailwind.config.ts'. The JS config in tailwind.config.ts holds the design tokens:

  • Brand colors: brand, brandAlt, brandLight, payPal, payPalDark, text.
  • Font: font-sans mapped to Sora via the --font-sans CSS variable loaded with next/font in app/layout.tsx.
  • sm breakpoint uses max: 640px (mobile targeting); the other breakpoints are min-width.
  • Custom spacing token page: 80%.

Tooling

  • ESLint 9 flat config (eslint.config.mjs) extending eslint-config-next and eslint-config-prettier.
  • Prettier: single quotes, trailing commas.
  • Husky pre-commit hook runs lint-staged (Prettier + ESLint on staged files).
  • @typescript-eslint/no-namespace and @typescript-eslint/no-explicit-any are disabled.

Deployment

Deployment targets Vercel via .github/workflows/deploy.yml. The deploy job is guarded with if: github.repository != 'veeso-dev/fe-next-template' so it never runs in the template repo — it activates automatically once the repository is forked or renamed. It requires the VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID repository secrets.

Commit style

Use the format [type]: [description] where type is fix, feat, build, chore, etc. Never add a Co-Authored-By line.