​
Tech Stack

Frontend

Next.js 16, App Router

Backend

Convex, PostgreSQL

Auth

Clerk

Styling

Tailwind CSS v4
Run grep -r "from " apps/frontend/package.json to verify versions
Doc Status: Excellent | ✓ All 6 checks passed

​
Overview

House of Legends uses Next.js 16 with App Router for the frontend, Convex for real-time backend/database, Clerk for authentication, and Tailwind CSS v4 for styling. All frontend-backend communication uses the api.domains.<domain>.<operation> pattern.

​
Core Stack

LayerTechnologyVersionNotes
FrontendNext.js 16^16.xApp Router, Turbopack
StylingTailwind CSSv4CSS variables, tailwindcss-animate
BackendConvex^1.37.xPostgreSQL, real-time
AuthClerk^5.xStaff auth, guest OAuth
i18nparaglide-js^2.xen + vi locales
FormsReact Hook Form + ZodlatestPer-component validation
StateReact localState + BookingContext—Booking uses convexQuery bindings
IconsLucide React^0.4.xNever emoji
Animationtailwindcss-animate^1.xFades, slides, zoom

​
Frontend Structure

​
Backend Structure

​
Convex API Pattern

All frontend calls use api.domains.<domain>.<operation>: 
import { useQuery, useMutation } from "convex/react";
import { api } from "~/convex/_generated/api";

// Queries
const experiences = useQuery(api.domains.experiences.listActive);
const upcomingEvents = useQuery(api.domains.events.upcomingForExperience, {
  experienceId,
  limit,
});

// Mutations
const createReservation = useMutation(api.domains.reservations.createPending);
const updateStatus = useMutation(api.domains.events.updateStatus);

​
Design System

See apps/frontend/DESIGN.md for complete design tokens and component library. Key tokens:
TokenValueUsage
--color-gold#c5a059Primary brand
--color-background#0a0a0fDark background
--color-foreground#edededBody text
--color-surface#16161aCard backgrounds