Public and product entry points
A top navigation system that can carry marketing pages, documentation, pricing, and authenticated account flows without rewriting the layout every time.
Universal SaaS Shell
A reusable frontend template for product marketing, docs, pricing, auth, billing, and referral flows.
This template no longer behaves like a single-purpose test harness. It is a starter shell for real SaaS products: a public-facing home, navigation system, docs experience, pricing page, multilingual-ready layout, and authenticated account surfaces all wired to the shared go-modules backend contract.
Environment
http://localhost:3000Contract map
Frontend originhttp://localhost:3000
Backend APIhttp://localhost:8080/api/v1
Login landinghttp://localhost:3000/login
Referral invitehttp://localhost:3000/invite?ref=
What this template is now
It gives you a public site shell and an authenticated product shell in the same starter.
Avatar menu and management surfaces
Signed-in users get an account menu with settings, sign-out, subscription access, and referral access instead of a single debug session pill.
Breadcrumbs and article navigation
Docs-style pages can expose article sections with table-of-contents navigation so the template works for launch docs and product education pages.
Language-ready structure
The shell carries an EN / 中文 switch and a basic i18n layer, making multilingual product sites possible without redesigning the whole frame.
Route map
These routes are intended as a reusable baseline, not one-off demos.
/pricing
Plan comparison and checkout entry
Use for subscription entry, upgrade framing, credits explanation, and plan differentiation before redirecting into Checkout.
/docs
Onboarding and product documentation
Use for integration docs, getting-started flows, technical setup guides, and feature explanation pages with table-of-contents support.
/login
Auth entry surface
Still supports email code, Google OAuth exchange, and referral-aware signup, but now sits inside a broader product shell.
/account
Settings and session management
Identity, refresh, logout, current token/session view, and ticket issue flow. This is the base for a settings or workspace page.
/billing
Subscription and invoice management
Checkout creation, subscription lifecycle, invoice list, cancel, and reactivate. This doubles as the management page behind the avatar menu.
/referrals
Referral center
Share link, stats, history, and the consumer-facing part of the referral system, suitable for a growth or rewards area.
Operational contract
Keep the shell generic, keep the backend contract stable.
AuthEmail + Google
Uses /auth/send-code, /auth/verify-code, /auth/google/authorize, /auth/exchange-token, /auth/refresh, and /auth/logout.
BillingCheckout + invoices
Creates Stripe sessions in the browser but keeps webhook truth and subscription state on the backend.
ReferralClosed loop
Captures ?ref= in the browser, forwards referral_code during signup, then reads stats and history from backend APIs.
DocsProduct-ready
Supports docs pages, breadcrumbs, and in-page article navigation so the starter can front a real product site.