48Date — user web portal (frontend)
48Date is a dating product built around one idea: a mutual like opens a 48-hour window to agree on a real date.
This repository is the user web frontend:
- the public landing and legal pages;
- sign-up / sign-in;
- the guided profile setup with identity verification;
- the signed-in member portal: discovery, matches, chats, date planning, icebreaker games, success stories, profile, settings, safety and membership.
It is frontend only. Every screen talks to a typed service whose current implementation is a clearly marked mock, so the real API can be plugged in later without touching components (see Connecting the real API).
The design source is the Figma file 48Date (L4MtWjAVlPSRAjJSzI1lrf), sections W00–W11. The project rules every change follows live in AGENTS.md.
Contents
Tech stack
| Area | Choice |
|---|
| Framework | Next.js 16 (App Router, cacheComponents / Partial Prerendering, Turbopack) |
| UI | React 19 with the React Compiler |
| Language | TypeScript (strict) |
| Styling | Tailwind CSS v4, design tokens in src/app/globals.css |
| Primitives | Radix UI (Dialog, Accordion, Slot) wrapped as cleaned-up shadcn components |
| Font | Manrope via next/font |
| Icons | Hugeicons glyphs exported from Figma as SVG (public/icons) |
Next.js 16 differs from older versions. Its bundled docs in node_modules/next/dist/docs/ are the reference.
Getting started
Requirements: Node.js 20 or newer (developed on Node 24) and npm.
npm install # install dependencies
cp .env.example .env.local # optional until a real API exists
npm run dev # http://localhost:3000
Production build:
npm run build
npm run start # or: npx next start -p 3417
Sign in to reach the portal:
- Open
/signin.
- Enter any valid phone number.
- Enter any six-digit code except
000000 and 999999 (see mocks).
Scripts
| Command | What it does |
|---|
npm run dev | Development server with hot reload |
npm run build | Production build; prerenders every route (≈150 pages) and type-checks |
npm run start | Serves the production build |
npm run lint | ESLint (Next.js, React Compiler rules); must pass with no warnings |
npx tsc --noEmit | Type-check only |
npm audit | Dependency vulnerability check |
Environment variables
| Name | Purpose |
|---|
NEXT_PUBLIC_API_BASE_URL | Base URL of the 48Date API including /api/v1 (read only in src/lib/api/config.ts). Empty = every service runs on its mock; set = the integrated services call the API. Inlined at build time, so rebuild after changing it. |
NEXT_PUBLIC_APP_VERSION | Optional; sent as device.appVersion on sign-in. |
The backend's default port (3000) is also next dev's, so run one of them elsewhere, for example NEXT_PUBLIC_API_BASE_URL=http://localhost:4000/api/v1.
.env* files are git-ignored except .env.example. Never commit secrets; the frontend holds none.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
