# hasibur14/zagato-fashion-admin architecture

> Architecture diagram of the GitHub repository hasibur14/zagato-fashion-admin, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hasibur14/zagato-fashion-admin
- Repository: https://github.com/hasibur14/zagato-fashion-admin

## Overview

1. This is a Next.js App Router application with two major user-facing surfaces: a public marketing site and an authenticated admin dashboard. The app-level routes live under `src/app`, with shared UI and feature components under `src/components`, and domain models under `src/models`.

2. The public site is composed from section-based components rather than a single monolithic page. Home page content is split into reusable blocks such as `AboutZagato`, `BestSeller`, `ProductCollection`, `Testimonials`, `Partners`, `Sustainability`, and `WhyChooseUs`. Other public content sections include `AboutUs`, `Compliance`, and `ServicesPage`, which suggests the site is mostly content-driven and CMS-like.

3. The admin experience is separated under `src/app/dashboard`, with dedicated dashboard pages for managing home content, about-us, compliance, contact-us, enquiry-us, hero, products, services, privacy policy, and terms & conditions. A shared dashboard layout and shared navigation UI live in `src/app/dashboard/layout.tsx` and `src/components/Shared`, indicating a consistent authenticated shell around these management pages.

4. The application exposes many resource-oriented API endpoints under `src/app/api`, each with collection and item routes. The endpoints map closely to content domains such as `hero`, `about-status`, `about-zagato`, `best-seller`, `brand`, `categories`, `sub-categories`, `products`, `product-collection`, `services`, `team`, `testimonials`, `partners`, `process`, `sustainability`, `mission-vision`, `why-choose-us`, `privacy-policy`, `terms`, `contact`, `enquiry-us`, `compliance-status`, and `admin`. This makes the backend layer look like a content management API rather than a single-purpose business API.

5. Data persistence is model-driven and likely MongoDB-backed. The `src/models` directory contains one model per domain entity, and `src/lib/connectToDB.ts` centralizes database connection setup. That means the request flow is generally: Next.js route handler → DB connection → Mongoose-style model → JSON response.

6. Authentication is implemented as a separate subsystem under `src/app/api/auth` with login, logout, and register routes, plus a `user/me` endpoint for session-aware identity lookup. Supporting code in `src/lib/auth` includes JWT and cookie helpers, and `src/lib/validations/auth.ts` handles input validation. This indicates token-based auth with server-side cookie/session handling rather than a client-only auth scheme.

7. The admin/user boundary is enforced by route handling and likely middleware-like logic in `src/proxy.ts`. Even without seeing the implementation, the presence of a proxy file plus dedicated auth endpoints and a `dashboard` section suggests protected routes and role-aware access control around the management surface.

8. Media handling is a notable subsystem. `src/components/ui/CloudinaryImageInput.tsx`, `CloudinaryVideoInput.tsx`, and the hooks `useCloudinaryUpload.ts` / `useCloudinaryVideoUpload.ts` indicate that images and videos are uploaded to Cloudinary rather than stored locally. This affects the architecture because content records likely store media URLs, while the actual assets are hosted externally.

9. Rich content editing is supported through a custom Slate-based editor in `src/components/Editor`. That implies some content fields in the dashboard are editable rich-text blocks, and content models/API routes must preserve structured text rather than plain strings.

10. The UI is organized into reusable feature components and modal-based CRUD dialogs. For example, `src/components/modal/HeroModal`, `BlogModal`, and `ProjectModal` encapsulate add/edit workflows, while product management components handle categories, sub-categories, and products. This suggests the admin UI is built around CRUD interactions backed by the resource API routes.

11. Type safety is reinforced with shared TypeScript types in `src/types`, covering auth, contact, hero, policy, product, project, sidebar, solution, terms, and topbar data. These types likely mirror API payloads and model shapes, reducing drift between the dashboard UI and backend resources.

12. The runtime is a standard Next.js/Vercel stack, as shown by the README and `next.config.ts`. The repo also includes environment templates, ESLint, and PostCSS configuration, which points to a conventional frontend deployment model with server-rendered pages, API route handlers, and external service integration for auth/media.

13. In diagram terms, the main boundaries are: public website pages, authenticated dashboard pages, server-side API routes, database models/connection, auth cookies/JWT, and external Cloudinary storage. Most data flows are content CRUD flows from dashboard forms to API routes to MongoDB-backed models, with public pages reading the same content back through components or API fetches.

Main entry points: [`src/app/api`](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api) (Content API), [`src/app/dashboard`](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/dashboard) (Admin pages), [`src/app/api/auth`](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api/auth) (Auth API), [`src/models`](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/models) (Domain models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App surfaces"]
  node_node_public_site["Public site<br/>Next.js pages<br/>[page.tsx]"]
  node_node_dashboard_shell["Dashboard shell<br/>protected shell<br/>[layout.tsx]"]
  node_node_dashboard_pages["Admin pages<br/>CRUD views"]
  node_node_login_register["Auth entry<br/>login/register<br/>[page.tsx]"]
end

subgraph group_group_api["API layer"]
  node_node_content_api["Content API<br/>resource routes"]
  node_node_auth_api["Auth API<br/>session routes"]
  node_node_user_api["Me endpoint<br/>identity route<br/>[route.ts]"]
end

subgraph group_group_data["Data and services"]
  node_node_db[("DB connect<br/>MongoDB setup<br/>[connectToDB.ts]")]
  node_node_models[("Domain models<br/>Mongoose models")]
  node_node_auth_lib["Auth helpers<br/>JWT/cookies"]
  node_node_proxy{{"Route proxy<br/>access control<br/>[proxy.ts]"}}
  node_node_cloudinary["Cloudinary media<br/>upload integration"]
end

subgraph group_group_ui["Shared UI"]
  node_node_editor["Rich editor<br/>Slate editor"]
  node_node_home_sections["Home sections<br/>content blocks"]
  node_node_about_sections["About blocks<br/>page sections"]
  node_node_service_sections["Service blocks<br/>page sections"]
  node_node_product_ui["Product admin<br/>management UI"]
  node_node_shared_nav["Shared nav<br/>layout UI"]
  node_node_modals["CRUD modals<br/>add/edit dialogs"]
end

node_node_public_site -->|"renders"| node_node_home_sections
node_node_public_site -->|"renders"| node_node_about_sections
node_node_public_site -->|"renders"| node_node_service_sections
node_node_dashboard_shell -->|"uses"| node_node_shared_nav
node_node_dashboard_pages -->|"opens"| node_node_modals
node_node_dashboard_pages -->|"manages"| node_node_product_ui
node_node_dashboard_pages -->|"edits"| node_node_editor
node_node_dashboard_pages -->|"uploads"| node_node_cloudinary
node_node_content_api -->|"connects"| node_node_db
node_node_content_api -->|"reads/writes"| node_node_models
node_node_auth_api -->|"uses"| node_node_auth_lib
node_node_auth_api -->|"connects"| node_node_db
node_node_auth_api -->|"reads/writes"| node_node_models
node_node_user_api -->|"checks"| node_node_auth_lib
node_node_proxy -->|"protects"| node_node_dashboard_shell
node_node_proxy -->|"coordinates"| node_node_auth_api
node_node_models -->|"persists via"| node_node_db
node_node_cloudinary -->|"stores URLs"| node_node_models
node_node_home_sections -->|"fetches content"| node_node_content_api
node_node_about_sections -->|"fetches content"| node_node_content_api
node_node_service_sections -->|"fetches content"| node_node_content_api
node_node_editor -->|"submits text"| node_node_content_api
node_node_modals -->|"mutates"| node_node_content_api

click node_node_public_site "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/page.tsx"
click node_node_dashboard_shell "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/dashboard/layout.tsx"
click node_node_dashboard_pages "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/dashboard"
click node_node_login_register "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/login/page.tsx"
click node_node_content_api "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api"
click node_node_auth_api "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api/auth"
click node_node_user_api "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/api/user/me/route.ts"
click node_node_db "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/lib/connectToDB.ts"
click node_node_models "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/models"
click node_node_auth_lib "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/lib/auth"
click node_node_proxy "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/proxy.ts"
click node_node_cloudinary "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/components/ui/CloudinaryImageInput.tsx"
click node_node_editor "https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/components/Editor/SlateRichTextEditor.tsx"
click node_node_home_sections "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Home"
click node_node_about_sections "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/AboutUs"
click node_node_service_sections "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/ServicesPage"
click node_node_product_ui "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Product"
click node_node_shared_nav "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Shared"
click node_node_modals "https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/modal"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_public_site,node_node_dashboard_shell,node_node_dashboard_pages,node_node_login_register toneBlue
class node_node_content_api,node_node_auth_api,node_node_user_api toneAmber
class node_node_db,node_node_models,node_node_auth_lib,node_node_proxy,node_node_cloudinary toneMint
class node_node_editor,node_node_home_sections,node_node_about_sections,node_node_service_sections,node_node_product_ui,node_node_shared_nav,node_node_modals toneRose
```

## Components

### App surfaces

Public site, auth entry points, and dashboard routes.

- [Public site](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/page.tsx): Next.js pages · Marketing and content-driven public pages assembled from reusable sections. · `src/app/page.tsx`
- [Dashboard shell](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/dashboard/layout.tsx): protected shell · Authenticated admin area with shared layout and navigation. · `src/app/dashboard/layout.tsx`
- [Admin pages](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/dashboard): CRUD views · Management pages for home, about, compliance, contact, enquiry, hero, products, services, privacy, and terms. · `src/app/dashboard`
- [Auth entry](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/login/page.tsx): login/register · User-facing authentication pages for sign-in and account creation. · `src/app/login/page.tsx`

### API layer

Route handlers for content, auth, and user lookup.

- [Content API](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api): resource routes · CRUD endpoints for homepage, about, products, services, policy, compliance, contact, and related content domains. · `src/app/api`
- [Auth API](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/app/api/auth): session routes · Login, logout, register, and current-user endpoints for token and cookie-based auth. · `src/app/api/auth`
- [Me endpoint](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/app/api/user/me/route.ts): identity route · Session-aware user lookup used by authenticated client flows. · `src/app/api/user/me/route.ts`

### Data and services

Database connection, models, auth helpers, and external integrations.

- [DB connect](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/lib/connectToDB.ts): MongoDB setup · Central database connection utility shared by route handlers. · `src/lib/connectToDB.ts`
- [Domain models](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/models): Mongoose models · Entity models for content, products, policy, contact, enquiries, and users. · `src/models`
- [Auth helpers](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/lib/auth): JWT/cookies · Server-side token and cookie helpers plus auth validation. · `src/lib/auth`
- [Route proxy](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/proxy.ts): access control · Central route-layer boundary for protecting dashboard and auth-sensitive paths. · `src/proxy.ts`
- [Cloudinary media](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/components/ui/CloudinaryImageInput.tsx): upload integration · Image and video upload inputs/hooks for externally hosted assets. · `src/components/ui/CloudinaryImageInput.tsx`

### Shared UI

Reusable components, editor, modals, and media inputs.

- [Rich editor](https://github.com/hasibur14/zagato-fashion-admin/blob/main/src/components/Editor/SlateRichTextEditor.tsx): Slate editor · Structured rich-text editing for dashboard content fields. · `src/components/Editor/SlateRichTextEditor.tsx`
- [Home sections](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Home): content blocks · Reusable public-site sections for hero, about, products, testimonials, partners, sustainability, and value props. · `src/components/Home`
- [About blocks](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/AboutUs): page sections · About-page components for status, brands, mission/vision, and team. · `src/components/AboutUs`
- [Service blocks](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/ServicesPage): page sections · Services-page components for process and why-choose-us content. · `src/components/ServicesPage`
- [Product admin](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Product): management UI · Category, sub-category, and product management components used in the dashboard. · `src/components/Product`
- [Shared nav](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/Shared): layout UI · Sidebar, topbar, and shared dashboard navigation components. · `src/components/Shared`
- [CRUD modals](https://github.com/hasibur14/zagato-fashion-admin/tree/main/src/components/modal): add/edit dialogs · Modal workflows for creating and editing hero, blog, and project records. · `src/components/modal`

## Connections

- Public site → Home sections: renders · Public pages are composed from reusable content sections.
- Public site → About blocks: renders · About and related public pages reuse specialized blocks.
- Public site → Service blocks: renders · Service content is assembled from section components.
- Dashboard shell → Shared nav: uses · Dashboard layout wraps pages with shared navigation chrome.
- Admin pages → CRUD modals: opens · Admin pages rely on modal dialogs for create/edit flows.
- Admin pages → Product admin: manages · Product-related dashboard views use category and product management components.
- Admin pages → Rich editor: edits · Rich content fields are edited through the Slate-based editor.
- Admin pages → Cloudinary media: uploads · Content editing includes image and video uploads.
- Content API → DB connect: connects · Resource handlers initialize database access before operations.
- Content API → Domain models: reads/writes · Content routes persist domain records through models.
- Auth API → Auth helpers: uses · Auth routes rely on JWT and cookie helpers.
- Auth API → DB connect: connects · Auth operations need database access for users.
- Auth API → Domain models: reads/writes · Register and login flows operate on the user model.
- Me endpoint → Auth helpers: checks · Identity lookup depends on session/token state.
- Route proxy → Dashboard shell: protects · Route boundary enforcement guards the admin area.
- Route proxy → Auth API: coordinates · Access control aligns with authentication endpoints.
- Domain models → DB connect: persists via · Models are backed by the shared database connection.
- Cloudinary media → Domain models: stores URLs · Uploaded media is referenced from persisted content records.
- Home sections → Content API: fetches content · Home sections consume API-backed content.
- About blocks → Content API: fetches content · About sections are populated from content endpoints.
- Service blocks → Content API: fetches content · Service blocks are driven by API content.
- Rich editor → Content API: submits text · Structured rich text is saved through content routes.
- CRUD modals → Content API: mutates · CRUD dialogs submit create and update requests to resource endpoints.