Frontend Architecture
Frontend Architecture
Trystpilot’s frontend is a Next.js 15 App Router application rendered with React 19 and styled
with Tailwind CSS v4. Pages are divided between public-facing user flows (home, profile, submit,
legal) and admin-gated flows (moderation dashboard). Internationalisation is handled by a custom
locale provider that selects one of five language packs (en / de / es / fr / pt) based on
Accept-Language headers and timezone hints. Vercel Web Analytics and a Cloudflare beacon are
injected at the root layout level so every page is instrumented without per-route work.
graph TD
subgraph Browser
UA[User Agent]
end
subgraph "Next.js App Router (app/)"
Layout["layout.tsx\n(root — analytics, locale)"]
subgraph "Public Routes"
Home["page.tsx\n(Home — search, feeds)"]
Profile["profile/[alias]/page.tsx\n(SEO profile page)"]
Submit["submit/page.tsx\n(Anonymous review form)"]
Report["report/page.tsx\n(Abuse report)"]
Legal["legal/*\n(ToS, Guidelines, DMCA…)"]
Blog["blog/*\n(Content / SEO)"]
end
subgraph "Admin Routes"
Mod["moderation/page.tsx\n(Review queue — auth-gated)"]
Login["login/page.tsx"]
end
subgraph "Components"
Header
Footer
HeroSection
SearchDropdown
ReviewCard
RatingBars["Rating Breakdown Bars"]
SubmitForm["Anonymous Submit Form"]
LocaleSwitcher
end
end
subgraph "Analytics Layer"
VA["@vercel/analytics"]
CF["Cloudflare Beacon (next/script)"]
end
UA --> Layout
Layout --> Home & Profile & Submit & Report & Legal & Blog
Layout --> Mod & Login
Layout --> VA & CF
Home --> HeroSection & SearchDropdown
Profile --> ReviewCard & RatingBars
Submit --> SubmitForm
Mod --> ReviewCard
Dependencies
| Dependency | Purpose |
|---|---|
next 15 | App Router, SSR, API routes, Image optimisation |
react 19 | Component model |
tailwindcss v4 | Utility-first styling |
@vercel/analytics | Vercel web analytics |
next/script | Cloudflare beacon injection |
lucide-react | Icon set |
mermaid | Diagram rendering (docs) |