Installation

This guide walks you through setting up the Booking Kit from scratch.

System Requirements

• Node.js 18.17 or later
• pnpm (recommended), npm, or yarn
• Git for cloning the repository

Step 1 -- Clone the Repository

Use the private repository URL from your purchase confirmation email:

git clone <your-repo-url> booking-kit
cd booking-kit

Step 2 -- Install Dependencies

pnpm install

This installs Next.js 16, React 19, Tailwind CSS 4, Radix UI, Recharts, and all utility libraries.

Key Dependencies

Package	Purpose
next 16.x	React framework
react 19.x	UI library
tailwindcss 4.x	CSS framework
@radix-ui/*	Accessible UI primitives
recharts	Analytics charts
lucide-react	Icons
next-themes	Dark mode
sonner	Toast notifications
date-fns	Date utilities

Step 3 -- Start the Dev Server

pnpm dev

Visit http://localhost:3000 to see the bookings dashboard.

Environment Variables

The Booking Kit requires no environment variables. All screens render with mock seed data out of the box. No .env file is needed.

Step 4 -- Verify the Setup

Navigate through the key sections:

• / -- redirect to bookings dashboard
• /bookings -- bookings list with today's schedule
• /bookings/calendar -- calendar week view
• /event-types -- event type management
• /availability -- weekly hours editor
• /analytics -- bookings analytics
• /book -- public booking landing page

Build for Production

pnpm build
pnpm start

Available Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Create production build
pnpm start	Run production server
pnpm lint	Run ESLint checks

Folder Structure Overview

booking-kit/
├── app/                ← Pages and layouts
│   ├── (app)/          ← Admin pages (sidebar layout)
│   ├── (public)/       ← Public booking flow
│   └── (auth)/         ← Auth pages (login, register, forgot)
├── components/         ← All React components
│   ├── ui/             ← shadcn/ui primitives (28 components)
│   ├── booking/        ← Booking flow composites
│   ├── calendar/       ← Calendar views
│   ├── dashboard/      ← Dashboard composites
│   ├── layout/         ← App shell (sidebar, header, skip-link)
│   └── ...             ← Domain-specific folders
├── data/
│   └── seed.ts         ← All mock data
├── types/
│   └── index.ts        ← TypeScript interfaces
└── lib/
    ├── format.ts       ← Shared formatters
    └── utils.ts        ← Utility functions

Troubleshooting

Port 3000 already in use:

pnpm dev --port 3001

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.