2.5 KiB
2.5 KiB
Frontend & Admin Architecture Route Map Specification
- Audit Artifact: Phase 3.2 / 3.3 — Frontend Architecture Specification
- Repository HEAD:
715873b2ecc3a72ba974bb2a2be87c5ba82bd4e7 - Architectural Architecture Split:
- Storefront (Customer-Facing): Next.js framework for server-side rendering (SSR), dynamic open-graph metadata, and maximum SEO performance.
- Admin Panel (Internal Application): Standalone, isolated React SPA. SEO is completely irrelevant; absolute priority is Security, Performance, Lazy Loading, and Type Safety.
Admin Panel React SPA Route Map (createBrowserRouter)
TASK-FE-001 targets the standalone Admin Panel React SPA using react-router-dom (createBrowserRouter) for chunk splitting and lazy-loaded admin modules:
| Admin Route Path | Target Lazy-Loaded Module | Function / Sub-System | Auth Boundary | Performance & Code-Splitting Strategy | Confirmation Status |
|---|---|---|---|---|---|
/admin/login |
AdminLogin |
Admin OTP / Credential Authentication | Public / Guest | Eager load login view | CONFIRMED |
/admin/dashboard |
AdminDashboard |
Executive Overview & Metrics Widgets | @Roles('Admin') |
lazy() chunk split |
CONFIRMED |
/admin/settings |
AdminSettings |
System Branding & Global Config | @Roles('Admin') |
lazy() chunk split |
CONFIRMED (ADM-001) |
/admin/products/* |
AdminProductsManager |
Product Catalog, Prices & Scientific Terms | @Roles('Admin') |
lazy() chunk split |
CONFIRMED |
/admin/orders/* |
AdminOrdersManager |
Order Fulfillment & Decimal Financial Logs | @Roles('Admin') |
lazy() chunk split |
CONFIRMED (BE-001) |
/admin/users/* |
AdminUsersManager |
User Accounts & Address Management | @Roles('Admin') |
lazy() chunk split |
CONFIRMED |
/admin/pets/* |
AdminPetsManager |
Medical Profiles & Vet Consultation Logs | @Roles('Admin') |
lazy() chunk split |
CONFIRMED |
Router Implementation Requirements (TASK-FE-001)
createBrowserRouterSetup:- Use
react-router-domcreateBrowserRouter([ ... ])with React<Suspense>fallbacks for route-level code splitting.
- Use
- Type Safety & Nav Guards:
- Use strict TypeScript route param schemas (
AdminRouteParams). - Implement client-side route guards enforcing
@Roles('Admin')session checks prior to rendering lazy chunks.
- Use strict TypeScript route param schemas (
- SEO Non-Requirement:
- Zero SEO logic in Admin Panel. Pure client-side SPA rendering with maximum bundle chunk isolation.