# shohan-nub/valorex-app architecture

> Architecture diagram of the GitHub repository shohan-nub/valorex-app, 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/shohan-nub/valorex-app
- Repository: https://github.com/shohan-nub/valorex-app

## Overview

1. This is a Next.js App Router ecommerce storefront with an embedded admin back office. The codebase is split between public shopping flows, authenticated account/order flows, and content management for products and media.

2. Routing is file-based under `src/app`, so the architecture is organized by page boundaries rather than feature modules. Major public routes include the home page, product detail pages, category listings, cart, checkout, login/signup, customer orders, and an auth callback endpoint. Dynamic routes are used for product IDs and category slugs.

3. The storefront layer is composed of reusable React components such as the navbar, footer, hero slideshow, category slideshow, product cards, promo popup, review section, and search modal. These are assembled into the landing page and supporting catalog pages to present the shopping experience.

4. The product browsing flow centers on catalog pages and product detail pages: users enter through the homepage or category pages, browse product cards and slideshows, then drill into `products/[id]` for an individual item. Search is handled via a modal component, suggesting client-side discovery layered over the catalog UI.

5. Cart state is handled in the app layer through `Cartcontext.tsx`, which acts as the shared client-side state boundary for cart interactions across product pages, cart, and checkout. That indicates the purchase funnel depends on a centralized in-memory/context store rather than page-local state.

6. Checkout and order history are separate concerns: `checkout/page.tsx` likely collects purchase details, while `orders/page.tsx` shows customer order records. There is also a server endpoint under `api/meta/purchase`, which suggests purchase events are emitted to an external tracking/marketing system during or after checkout.

7. Authentication and session handling are split from UI. The presence of `login`, `signup`, `auth/callback/route.ts`, and `middleware.ts` indicates a protected-route model where auth state is established through a callback route and enforced at the edge or request boundary via middleware. This likely gates account/order/admin access.

8. The admin subsystem is isolated under `src/app/adminPanel` with its own layout and pages for dashboard, products, product creation/editing, orders, hero slides, and review images. This is a distinct operational surface for managing storefront content and commerce data, separate from the customer-facing app.

9. The data/integration layer is anchored around Supabase and Cloudinary helpers in `src/app/lib/supabase`. The Supabase client/server split indicates both browser-side and server-side access paths, while the Cloudinary helper suggests image storage or media upload is externalized rather than kept in the Next.js app itself.

10. Marketing and analytics are treated as first-class integrations. `FacebookPixel.tsx` and `lib/pixel.ts` point to event tracking/advertising hooks, while the `api/meta/purchase` route likely posts purchase conversions. Combined with the hero/review/promo components, the app is optimized for conversion and retargeting.

11. Global app structure is handled by `src/app/layout.tsx`, `globals.css`, Tailwind config, and PostCSS config. That means styling and shell concerns are centralized, with page-specific content composed inside a shared app frame.

12. SEO and public-facing site infrastructure are also explicitly configured through `robots.ts`, `sitemap.ts`, and a Google verification file in `public`. This indicates the app is intended to be indexed as a commercial storefront, not just used behind authentication.

13. Static assets live in `public`, including imagery and verification artifacts. Together with the slideshow and review image management pages, this suggests the site blends fixed assets with admin-managed media content.

14. Overall, the architecture is a three-tier Next.js commerce app: client UI for shopping, server routes for auth and purchase/event callbacks, and external services for persistence/media/analytics. The most important diagram boundaries are storefront vs admin, public routes vs protected routes, and Next.js app code vs Supabase/Cloudinary/Meta integrations.

Main entry points: [`src/app/layout.tsx`](https://github.com/shohan-nub/valorex-app/blob/main/src/app/layout.tsx) (App Layout), [`src/app/adminPanel/page.tsx`](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/page.tsx) (Admin Home), [`src/app/Cartcontext.tsx`](https://github.com/shohan-nub/valorex-app/blob/main/src/app/Cartcontext.tsx) (Cart State), [`src/app/lib/supabase`](https://github.com/shohan-nub/valorex-app/tree/main/src/app/lib/supabase) (Supabase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home<br/>route<br/>[page.tsx]"]
  node_product_detail["Product<br/>route<br/>[page.tsx]"]
  node_category_page["Category<br/>route<br/>[page.tsx]"]
  node_cart_page["Cart<br/>route<br/>[page.tsx]"]
  node_checkout_page["Checkout<br/>route<br/>[page.tsx]"]
  node_orders_page["Orders<br/>route<br/>[page.tsx]"]
  node_cart_context(("Cart State<br/>client state<br/>[Cartcontext.tsx]"))
  node_storefront_ui["Store UI<br/>components"]
  node_hero_slideshow["Hero Slides<br/>[HeroSlideshow.tsx]"]
end

subgraph group_admin["Admin Panel"]
  node_admin_dashboard["Admin Home<br/>admin route<br/>[page.tsx]"]
  node_admin_products["Products<br/>admin route<br/>[page.tsx]"]
  node_admin_product_edit["Edit Product<br/>admin route<br/>[page.tsx]"]
  node_admin_orders["Admin Orders<br/>admin route<br/>[page.tsx]"]
  node_admin_media["Media Admin<br/>admin route<br/>[page.tsx]"]
end

subgraph group_integrations["Integrations"]
  node_login_page["Login<br/>route<br/>[page.tsx]"]
  node_signup_page["Signup<br/>route<br/>[page.tsx]"]
  node_auth_callback["Auth Callback<br/>endpoint<br/>[route.ts]"]
  node_purchase_api["Purchase API<br/>endpoint<br/>[route.ts]"]
  node_supabase[("Supabase<br/>backend client")]
  node_cloudinary["Cloudinary<br/>media helper<br/>[cloudinary.ts]"]
  node_pixel{{"Tracking<br/>analytics<br/>[pixel.ts]"}}
  node_facebook_pixel["Pixel UI<br/>analytics component<br/>[FacebookPixel.tsx]"]
end

subgraph group_shell["App Shell"]
  node_app_layout["App Layout<br/>shell<br/>[layout.tsx]"]
  node_styles["Global CSS<br/>styling<br/>[globals.css]"]
  node_seo["SEO<br/>metadata<br/>[robots.ts]"]
end

node_app_layout -->|"renders"| node_home
node_app_layout -->|"renders"| node_product_detail
node_app_layout -->|"renders"| node_category_page
node_app_layout -->|"renders"| node_cart_page
node_app_layout -->|"renders"| node_checkout_page
node_app_layout -->|"renders"| node_login_page
node_app_layout -->|"renders"| node_signup_page
node_app_layout -->|"renders"| node_orders_page
node_app_layout -->|"renders"| node_admin_dashboard
node_app_layout -->|"composes"| node_storefront_ui
node_storefront_ui -->|"includes"| node_hero_slideshow
node_storefront_ui -->|"uses"| node_cart_context
node_home -->|"assembles"| node_storefront_ui
node_product_detail -->|"uses"| node_cart_context
node_cart_page -->|"uses"| node_cart_context
node_checkout_page -->|"uses"| node_cart_context
node_category_page -->|"uses"| node_storefront_ui
node_admin_dashboard -->|"navigates"| node_admin_products
node_admin_dashboard -->|"navigates"| node_admin_orders
node_admin_dashboard -->|"navigates"| node_admin_media
node_admin_products -->|"opens"| node_admin_product_edit
node_admin_media -->|"uses"| node_cloudinary
node_admin_products -->|"uses"| node_supabase
node_admin_orders -->|"uses"| node_supabase
node_orders_page -->|"uses"| node_supabase
node_login_page -->|"returns via"| node_auth_callback
node_signup_page -->|"returns via"| node_auth_callback
node_auth_callback -->|"authenticates"| node_supabase
node_purchase_api -->|"tracks"| node_pixel
node_facebook_pixel -->|"loads"| node_pixel
node_app_layout -->|"includes"| node_facebook_pixel
node_app_layout -->|"applies"| node_styles
node_app_layout -->|"exposes"| node_seo

click node_home "https://github.com/shohan-nub/valorex-app/blob/main/src/app/page.tsx"
click node_product_detail "https://github.com/shohan-nub/valorex-app/blob/main/src/app/products/[id]/page.tsx"
click node_category_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/category/[slug]/page.tsx"
click node_cart_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/cart/page.tsx"
click node_checkout_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/checkout/page.tsx"
click node_login_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/login/page.tsx"
click node_signup_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/signup/page.tsx"
click node_orders_page "https://github.com/shohan-nub/valorex-app/blob/main/src/app/orders/page.tsx"
click node_auth_callback "https://github.com/shohan-nub/valorex-app/blob/main/src/app/auth/callback/route.ts"
click node_purchase_api "https://github.com/shohan-nub/valorex-app/blob/main/src/app/api/meta/purchase/route.ts"
click node_cart_context "https://github.com/shohan-nub/valorex-app/blob/main/src/app/Cartcontext.tsx"
click node_hero_slideshow "https://github.com/shohan-nub/valorex-app/blob/main/src/app/Herosection/HeroSlideshow.tsx"
click node_admin_dashboard "https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/page.tsx"
click node_admin_products "https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/products/page.tsx"
click node_admin_product_edit "https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/products/new/page.tsx"
click node_admin_orders "https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/orders/page.tsx"
click node_admin_media "https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/heroslides/page.tsx"
click node_supabase "https://github.com/shohan-nub/valorex-app/tree/main/src/app/lib/supabase"
click node_cloudinary "https://github.com/shohan-nub/valorex-app/blob/main/src/app/lib/supabase/cloudinary.ts"
click node_pixel "https://github.com/shohan-nub/valorex-app/blob/main/src/app/lib/pixel.ts"
click node_facebook_pixel "https://github.com/shohan-nub/valorex-app/blob/main/src/app/component/FacebookPixel.tsx"
click node_app_layout "https://github.com/shohan-nub/valorex-app/blob/main/src/app/layout.tsx"
click node_styles "https://github.com/shohan-nub/valorex-app/blob/main/src/app/globals.css"
click node_seo "https://github.com/shohan-nub/valorex-app/blob/main/src/app/robots.ts"

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_home,node_product_detail,node_category_page,node_cart_page,node_checkout_page,node_orders_page,node_cart_context,node_storefront_ui,node_hero_slideshow toneBlue
class node_admin_dashboard,node_admin_products,node_admin_product_edit,node_admin_orders,node_admin_media toneAmber
class node_login_page,node_signup_page,node_auth_callback,node_purchase_api,node_supabase,node_cloudinary,node_pixel,node_facebook_pixel toneMint
class node_app_layout,node_styles,node_seo toneRose
```

## Components

### Storefront

Public shopping experience and shared commerce UI.

- [Home](https://github.com/shohan-nub/valorex-app/blob/main/src/app/page.tsx): route · Landing page and entry into the shopping flow. · `src/app/page.tsx`
- [Product](https://github.com/shohan-nub/valorex-app/blob/main/src/app/products/[id]/page.tsx): route · Dynamic product detail page. · `src/app/products/[id]/page.tsx`
- [Category](https://github.com/shohan-nub/valorex-app/blob/main/src/app/category/[slug]/page.tsx): route · Dynamic category listing page. · `src/app/category/[slug]/page.tsx`
- [Cart](https://github.com/shohan-nub/valorex-app/blob/main/src/app/cart/page.tsx): route · Shopping cart screen. · `src/app/cart/page.tsx`
- [Checkout](https://github.com/shohan-nub/valorex-app/blob/main/src/app/checkout/page.tsx): route · Purchase checkout screen. · `src/app/checkout/page.tsx`
- [Orders](https://github.com/shohan-nub/valorex-app/blob/main/src/app/orders/page.tsx): route · Customer order history page. · `src/app/orders/page.tsx`
- [Cart State](https://github.com/shohan-nub/valorex-app/blob/main/src/app/Cartcontext.tsx): client state · Shared cart context used across the purchase funnel. · `src/app/Cartcontext.tsx`
- **Store UI**: components · Reusable storefront components for browsing and conversion.
- [Hero Slides](https://github.com/shohan-nub/valorex-app/blob/main/src/app/Herosection/HeroSlideshow.tsx): Landing-page hero slideshow. · `src/app/Herosection/HeroSlideshow.tsx`

### Admin Panel

Back-office screens for products, orders, and media.

- [Admin Home](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/page.tsx): admin route · Admin panel landing page. · `src/app/adminPanel/page.tsx`
- [Products](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/products/page.tsx): admin route · Product management list and entry point. · `src/app/adminPanel/products/page.tsx`
- [Edit Product](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/products/new/page.tsx): admin route · Admin product creation and editing screens. · `src/app/adminPanel/products/new/page.tsx`
- [Admin Orders](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/orders/page.tsx): admin route · Back-office order management page. · `src/app/adminPanel/orders/page.tsx`
- [Media Admin](https://github.com/shohan-nub/valorex-app/blob/main/src/app/adminPanel/heroslides/page.tsx): admin route · Hero slide and review image management. · `src/app/adminPanel/heroslides/page.tsx`

### Integrations

Auth, persistence, media, analytics, and external callbacks.

- [Login](https://github.com/shohan-nub/valorex-app/blob/main/src/app/login/page.tsx): route · User sign-in page. · `src/app/login/page.tsx`
- [Signup](https://github.com/shohan-nub/valorex-app/blob/main/src/app/signup/page.tsx): route · User registration page. · `src/app/signup/page.tsx`
- [Auth Callback](https://github.com/shohan-nub/valorex-app/blob/main/src/app/auth/callback/route.ts): endpoint · Authentication callback route. · `src/app/auth/callback/route.ts`
- [Purchase API](https://github.com/shohan-nub/valorex-app/blob/main/src/app/api/meta/purchase/route.ts): endpoint · Purchase event callback for external tracking. · `src/app/api/meta/purchase/route.ts`
- [Supabase](https://github.com/shohan-nub/valorex-app/tree/main/src/app/lib/supabase): backend client · Browser and server data access helpers for persistence. · `src/app/lib/supabase`
- [Cloudinary](https://github.com/shohan-nub/valorex-app/blob/main/src/app/lib/supabase/cloudinary.ts): media helper · External image storage and upload helper. · `src/app/lib/supabase/cloudinary.ts`
- [Tracking](https://github.com/shohan-nub/valorex-app/blob/main/src/app/lib/pixel.ts): analytics · Facebook pixel and marketing event wiring. · `src/app/lib/pixel.ts`
- [Pixel UI](https://github.com/shohan-nub/valorex-app/blob/main/src/app/component/FacebookPixel.tsx): analytics component · Client-side pixel component used by the app shell. · `src/app/component/FacebookPixel.tsx`

### App Shell

Global routing, styling, and site-wide metadata.

- [App Layout](https://github.com/shohan-nub/valorex-app/blob/main/src/app/layout.tsx): shell · Global app shell and shared page frame. · `src/app/layout.tsx`
- [Global CSS](https://github.com/shohan-nub/valorex-app/blob/main/src/app/globals.css): styling · Global styling layer. · `src/app/globals.css`
- [SEO](https://github.com/shohan-nub/valorex-app/blob/main/src/app/robots.ts): metadata · Robots and sitemap configuration. · `src/app/robots.ts`

## Connections

- App Layout → Home: renders · Shared shell wraps the home route.
- App Layout → Product: renders · Shared shell wraps product pages.
- App Layout → Category: renders · Shared shell wraps category pages.
- App Layout → Cart: renders · Shared shell wraps cart page.
- App Layout → Checkout: renders · Shared shell wraps checkout page.
- App Layout → Login: renders · Shared shell wraps login page.
- App Layout → Signup: renders · Shared shell wraps signup page.
- App Layout → Orders: renders · Shared shell wraps orders page.
- App Layout → Admin Home: renders · Shared shell wraps admin panel routes.
- App Layout → Store UI: composes · Global layout composes shared storefront UI.
- Store UI → Hero Slides: includes · Homepage hero carousel.
- Store UI → Cart State: uses · Shopping components share cart state.
- Home → Store UI: assembles · Landing page is built from reusable storefront components.
- Product → Cart State: uses · Product pages interact with shared cart state.
- Cart → Cart State: uses · Cart screen reads and updates the shared cart.
- Checkout → Cart State: uses · Checkout depends on the cart state boundary.
- Category → Store UI: uses · Category listings reuse catalog UI components.
- Admin Home → Products: navigates · Admin home links into product management.
- Admin Home → Admin Orders: navigates · Admin home links into orders.
- Admin Home → Media Admin: navigates · Admin home links into media management.
- Products → Edit Product: opens · Product list leads to create/edit flows.
- Media Admin → Cloudinary: uses · Media admin relies on external image handling.
- Products → Supabase: uses · Admin product data is backed by Supabase.
- Admin Orders → Supabase: uses · Order management reads from Supabase.
- Orders → Supabase: uses · Customer orders are loaded from Supabase.
- Login → Auth Callback: returns via · Sign-in flow completes through callback routing.
- Signup → Auth Callback: returns via · Registration flow completes through callback routing.
- Auth Callback → Supabase: authenticates · Callback establishes session against Supabase.
- Purchase API → Tracking: tracks · Purchase endpoint emits marketing/tracking events.
- Pixel UI → Tracking: loads · Client component wires analytics into the app.
- App Layout → Pixel UI: includes · Global shell mounts pixel integration.
- App Layout → Global CSS: applies · Shared layout loads global styles.
- App Layout → SEO: exposes · App shell provides indexing metadata.