apps/web

Web application

Next.js 15 with the App Router, React Server Components where appropriate, and a clear split between marketing, booking, auth, and dashboard experiences — all through a culturally rooted bespoke UI, not a generic component kit.

Stack

  • Next.js 15, React 19, TypeScript strict
  • Tailwind CSS v4 with semantic design tokens; bespoke React components (optional Radix primitives for a11y — no shadcn/ui skin)
  • Framer Motion for restrained marketing and booking micro-interactions
  • Zustand (cart + UI), TanStack Query v5 (server state)
  • nuqs (URL-driven filters on packages)
  • Better Auth (session / OTP flows coordinated with API)

Visual design

All page-level layout, typography, colour, and motion follow the shared design language. Marketing and checkout should feel like one continuous pilgrimage brand, not a template glued to a payment form.

Planned folder tree

apps/web/
├── app/
│   ├── (marketing)/
│   │   ├── page.tsx                 # Homepage
│   │   ├── about/page.tsx
│   │   ├── services/…               # Puja, Aarti, Pind, Shahi Snan, etc.
│   │   ├── water/page.tsx
│   │   ├── find-stall/page.tsx
│   │   ├── gallery/page.tsx
│   │   └── contact/page.tsx
│   ├── (booking)/
│   │   ├── packages/page.tsx
│   │   ├── packages/[slug]/page.tsx
│   │   ├── cart/page.tsx
│   │   ├── checkout/page.tsx
│   │   └── confirmation/page.tsx
│   ├── (auth)/login, register, verify-otp
│   ├── (dashboard)/dashboard/…      # bookings, profile
│   ├── layout.tsx, error.tsx, not-found.tsx
│   └── globals.css
├── components/
│   ├── layout/   # navbar, footer, top-bar, mobile-menu
│   ├── home/
│   ├── packages/
│   ├── booking/
│   ├── dashboard/
│   └── shared/
├── hooks/          # use-cart, use-packages, use-booking, use-payment
├── stores/         # cart.store, ui.store
├── lib/
│   ├── api-client.ts
│   ├── auth.ts
│   ├── stripe.ts    # publishable key helpers if needed
│   └── utils.ts
├── middleware.ts
└── next.config.ts

Required pages (checklist)

Area Pages
Marketing Home, About Kumbh, Services hub + subpages, Gallery, Contact, Water (Veda), Find stall (Maps embed)
Commerce Packages list + detail, Cart, Checkout, Confirmation
Account Login, Register, OTP; Dashboard (bookings, profile, booking detail)

Payments (Stripe)

Checkout can be Checkout Session (hosted) or Payment Element (embedded). The API creates the session or PaymentIntent; the web app redirects or confirms client-side per Stripe docs. Server-side price validation is mandatory — never trust client-only amounts.

SEO and content

Marketing routes should use metadata APIs, structured data where appropriate for events/packages, and fast LCP (hero images via R2/CDN).