Everything you need to make it yours

HeartMatch is built with TanStack Start, React 19 and Tailwind CSS 4. It's a static-content, UI-only template — there is no database or authentication wired up, which matches how most marketplace HTML/React templates ship. Forms and buttons simulate their real behavior so you can see the full user flow before connecting your own backend.

npm install
npm run dev      # starts a local dev server
npm run build    # production build

Every page lives in src/routes as a file-based route:

• index.tsx — Home 01 (split hero) and home-2.tsx — Home 02 (hero slider + live match search)
• members/index.tsx — browse grid, filters stored in the URL; members/$slug.tsx — the individual member profile
• about.tsx, pricing.tsx, contact.tsx, members.tsx, success-stories.tsx
• privacy.tsx, terms.tsx, cookies.tsx — legal pages sharing LegalPage.tsx
• blog/index.tsx + blog/$slug.tsx — blog listing & article
• login.tsx, signup.tsx — auth UI
• admin/*.tsx — the admin dashboard (see below)

Shared UI lives in src/components, sample content in src/lib/data.ts and src/lib/admin-data.ts.

Colors, radius and shadows are semantic design tokens in src/styles.css. Change the values under :root and every page updates — no need to touch component files.

Fonts are loaded via Google Fonts in src/routes/__root.tsx (--font-display-family and --font-sans-family). Swap the stylesheet link and the CSS variables to change typefaces.

Copy and images are plain data — edit src/lib/data.ts for members, testimonials, pricing tiers, blog posts and FAQs, and drop new photos into src/assets. Each member's slug becomes its profile URL, so adding an entry publishes a new /members/<slug> page automatically.

Brand icons live in public/ — favicon.ico, favicon.svg, apple-touch-icon.png and the two PWA icons referenced from site.webmanifest. Replace all five with your own mark, and update theme-color in __root.tsx.

The admin panel is a separate layout (no public navbar/footer) with its own responsive sidebar, defined in src/components/admin/AdminLayout.tsx. Nine screens ship with it: Overview (headline stats + growth chart), Analytics (revenue by plan, retention, age split, traffic sources), Members (searchable directory with row actions), Matches (pairings and compatibility scores), Messages (support inbox), Moderation (report queue with dismiss / review / suspend), Payments (revenue chart + invoice table), Content (blog pipeline), Settings, plus a standalone admin login.

Every screen reads from mock data in src/lib/admin-data.ts, ready to be swapped for real API calls. Shared building blocks live in src/components/admin/ — StatCard, Panel and Pill.

npm run build detects where it is running and builds for that host automatically. Push the repo to Vercel, Netlify, Cloudflare Pages or Deno Deploy and hit deploy — no config change needed. On Vercel, pick the TanStack Start preset (it is detected for you) and leave the build settings at their defaults.

Building locally with nothing to detect produces a standalone Node server you can run anywhere:

npm run build
node .output/server/index.mjs

To pin one target instead, add a preset to the nitro() options in vite.config.ts — for example nitro({ preset: "cloudflare-module" }). See the full list of nitro presets.