Historical snapshot archived 2026-09-25. This records an earlier review or plan, not current implementation or live ticket state. For current work, follow root AGENTS.md, the relevant BloxClips skill, and owning repository source/tests. Preserve approved decisions as evidence; verify their present authority before acting.

Historical snapshot — superseded for agent navigation (2026-09-25). This document can describe retired architecture, old database/payment models, or primary-checkout paths. Do not use it as current implementation policy. Start with the project router, resolve the owning Treehouse lease, then load its repository skill/source index. The original text below is retained for historical reasoning.

Frontend Deep Dive

Architecture and startup

The frontend is a Next.js 16 App Router application. app/layout.tsx is the root layout, forces dynamic rendering, installs Geist fonts, global audience theme/footer/cookie UI, and Vercel Analytics/Speed Insights. Pages and layouts are mostly client components with direct fetch calls and local React state. There is no centralized API client, global server-state cache, or generated type layer.

app/dashboard/layout.tsx is the authenticated shell and owns AuthContext, sidebar/navigation, TOS UI, notifications/support UI, and dashboard access checks. It calls both /api/auth/me and /api/admin/check on entry.

Public website

Route	Purpose	Main source/data	Backend/external dependency	Auth
/	Marketing landing page, live creator statistic	app/page.tsx, app/components/*	Next /api/live/clipper-count, social embeds	Public
/campaigns	Published marketing case studies	app/campaigns/page.tsx, campaignData.ts	Static source only	Public
/campaigns/[slug]	Case-study detail	[slug]/page.tsx, static assets/data	Next Roblox proxy for selected records	Public
/creator-guides and /creator-guides/[slug]	Static creator education	guideData.ts and route pages	Social embeds/links	Public
/services	Marketing services	app/services/page.tsx	Mostly static	Public
/contact	Lead contact form	app/contact/page.tsx, BookCallForm	Same-origin Next /api/contact → Turnstile/Resend	Public
/book-call	Scheduling	app/book-call/page.tsx	Calendly embed	Public
/login	Discord/Google sign-in entry	app/login/page.tsx	Backend OAuth initiation	Public
/onboarding	New-user profile/referral completion	app/onboarding/page.tsx	/api/onboarding, status/auth	Session
/verify-email	Email verification UI	app/verify-email/page.tsx	backend email endpoints	Session
/terms, /privacy	Legal content	route pages	None	Public

Important naming distinction: public /campaigns are hardcoded case studies, whereas /dashboard/campaigns lists live database campaigns from the backend.

Creator dashboard features

Route	Purpose	Backend APIs / important state	Key files
/dashboard	Overview, earnings/stats/leaderboard	stats overview/chart/leaderboard, auth	app/dashboard/page.tsx
/dashboard/campaigns	Browse operational campaigns	GET /api/campaigns?status=active, derived canSubmit	app/dashboard/campaigns/page.tsx
/dashboard/submit	Submit up to four videos sequentially	campaigns, POST /api/submissions, verification retry	app/dashboard/submit/page.tsx, SubmitVideoModal.tsx, AccountVerificationModal.tsx
/dashboard/history	Submission history/status	paginated /api/submissions	app/dashboard/history/page.tsx
/dashboard/payout	Earnings balance and request history/action	payout balance/list/request, method and tax eligibility	app/dashboard/payout/page.tsx
/dashboard/payouts/method	Select/connect Stripe, PayPal, or USDT	/api/methods/*, rail routes	route page and payment components
/dashboard/payouts/tax	W-9/W-8BEN collection	/api/tax-forms/*	route page and tax components
/dashboard/profile	Profile, social accounts, notification/auth settings	users/me, linked accounts, auth provider/email endpoints	app/dashboard/profile/page.tsx
/dashboard/payment	Compatibility redirect	redirects to payout	app/dashboard/payment/page.tsx

Current access behavior: app/dashboard/layout.tsx redirects anyone who fails /api/admin/check, so these creator pages are effectively admin-only despite their creator-oriented implementation. Backend creator routes are authenticated but not admin-only. This is a frontend access mismatch, documented without changing it.

The submission modal handles backend 412 account-verification responses by starting a bio-code challenge, polling/checking the profile, and retrying the original submission after success. It sends videos sequentially and maintains per-item outcomes in local state.

Administrative UI

Administrative routes under /dashboard/admin cover overview/stats, users and moderation, campaigns/detail/manage, submissions and snapshots, payout review/send, PayPal controls, affiliates/aliases, announcements, support chat, bookings/settings, featured games/services, PV tracker, tax forms/FTIN settings, and year-end export. Most use app/lib/adminFetch.ts, which responds to 429 using Retry-After, retries once, and raises a shared rate-limit banner. Some pages still call native fetch directly.

Backend authorization is enforced independently on the admin routers; hiding/sidebar routing is not the security boundary.

Data fetching and state

• Browser base URL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001" is repeated in components/pages.
• Session transport: credentials: "include" with backend HTTP-only cookie.
• State: component-local useState/useEffect, dashboard AuthContext, and a few shared UI contexts/hooks.
• Pagination: page-local parsing of each endpoint’s response; no common abstraction.
• Errors: generally local strings/toasts/modal states; admin 429 behavior is centralized only where adminFetch is used.
• Live updates: support UI uses SSE. A LiveSessionUpdates component exists but has no located consumer; notification/live behavior otherwise includes polling/direct fetch.
• Forms: hand-built controlled forms; the frontend does not import backend Zod schemas.

Next.js server routes

• app/api/contact/route.ts verifies Turnstile, calls Resend directly, and is the active public contact path.
• app/api/live/clipper-count/route.ts fetches the Whop company’s member_count with a short module cache/fallback.
• app/api/roblox/game/[placeId]/route.ts and thumbnail route proxy Roblox APIs for public case studies.

The backend implements parallel contact, Whop-count, and Roblox proxy endpoints. See integration for which UI consumes which version.

Disabled or apparently unused frontend paths

• BookCallScheduler.tsx calls backend booking availability/creation, but the active /book-call route embeds Calendly.
• ContactForm.tsx calls backend /api/contact, while the active page uses BookCallForm and the Next route.
• EmailGate wrappers around submission/payout are commented out, consistent with commented backend checks.
• LiveSessionUpdates has no import found during repository search.

These should be treated as legacy/uncertain until confirmed, not deleted.