# div641/flexpay architecture

> Architecture diagram of the GitHub repository div641/flexpay, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/div641/flexpay
- Repository: https://github.com/div641/flexpay

## Overview

FlexPay is a smartphone shopping application: shoppers browse and filter products, open a slug-based product page, choose a variant, review its EMI options, select a plan, and proceed through confirmation. The graph follows the documented React-to-REST-to-PostgreSQL architecture and sampled backend handlers/services. Some frontend page and component wiring is based on the README and file names; unsampled implementation details are not inferred.

Main entry points: [`Frontend/src/pages/ProductDetailsPage.jsx`](https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductDetailsPage.jsx) (Product details), [`Frontend/src/pages/ProductsPage.jsx`](https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductsPage.jsx) (Browse products), [`Backend/src/app.js`](https://github.com/div641/flexpay/blob/master/Backend/src/app.js) (Express app), [`Frontend/src/services/api.js`](https://github.com/div641/flexpay/blob/master/Frontend/src/services/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Shopping frontend"]
  node_app["App and routing<br/>[App.jsx]"]
  node_products_page["Browse products<br/>[ProductsPage.jsx]"]
  node_product_card["Product cards<br/>[ProductCard.jsx]"]
  node_sidebar["Search and filters<br/>[SidebarFilters.jsx]"]
  node_details_page["Product details"]
  node_gallery["Product gallery<br/>[ProductGallery.jsx]"]
  node_variant_selector["Variant selection"]
  node_emi_card["EMI plan selection<br/>[EmiPlanCard.jsx]"]
  node_api_client["API client<br/>[api.js]"]
end

subgraph group_api["REST API"]
  node_backend_app["Express app<br/>[app.js]"]
  node_product_routes["Product routes<br/>[product.routes.js]"]
  node_product_controller["Product controller"]
  node_product_service["Product queries<br/>[product.service.js]"]
  node_variant_routes["Variant routes<br/>[variant.routes.js]"]
  node_variant_controller["Variant controller"]
  node_variant_service["Variant queries<br/>[variant.service.js]"]
  node_emi_routes["EMI routes<br/>[emi.routes.js]"]
  node_emi_controller["EMI controller<br/>[emi.controller.js]"]
  node_emi_service["EMI queries<br/>[emi.service.js]"]
end

subgraph group_data["Product data"]
  node_db_config["Database connection<br/>[db.js]"]
  node_schema["Relational schema<br/>[schema.sql]"]
end

node_shopper(("Shopper"))
node_postgres[("PostgreSQL")]

node_shopper -->|"uses"| node_app
node_app -->|"routes to"| node_products_page
node_app -->|"routes to"| node_details_page
node_products_page -->|"offers filters"| node_sidebar
node_products_page -->|"requests products"| node_api_client
node_api_client -->|"supplies data"| node_product_card
node_products_page -->|"renders"| node_product_card
node_details_page -->|"requests details"| node_api_client
node_details_page -->|"renders"| node_gallery
node_details_page -->|"renders"| node_variant_selector
node_details_page -->|"renders plans"| node_emi_card
node_api_client -->|"calls REST API"| node_backend_app
node_backend_app -->|"mounts routes"| node_product_routes
node_backend_app -->|"mounts routes"| node_variant_routes
node_backend_app -->|"mounts routes"| node_emi_routes
node_product_routes -->|"dispatches"| node_product_controller
node_product_controller -->|"calls"| node_product_service
node_variant_routes -->|"dispatches"| node_variant_controller
node_variant_controller -->|"calls"| node_variant_service
node_emi_routes -->|"dispatches"| node_emi_controller
node_emi_controller -->|"calls"| node_emi_service
node_product_service -->|"queries through"| node_db_config
node_variant_service -->|"queries through"| node_db_config
node_emi_service -->|"queries through"| node_db_config
node_db_config -->|"connects to"| node_postgres
node_schema -->|"defines tables"| node_postgres

click node_app "https://github.com/div641/flexpay/blob/master/Frontend/src/App.jsx"
click node_products_page "https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductsPage.jsx"
click node_product_card "https://github.com/div641/flexpay/blob/master/Frontend/src/components/ProductCard.jsx"
click node_sidebar "https://github.com/div641/flexpay/blob/master/Frontend/src/components/SidebarFilters.jsx"
click node_details_page "https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductDetailsPage.jsx"
click node_gallery "https://github.com/div641/flexpay/blob/master/Frontend/src/components/ProductGallery.jsx"
click node_variant_selector "https://github.com/div641/flexpay/blob/master/Frontend/src/components/VariantSelector.jsx"
click node_emi_card "https://github.com/div641/flexpay/blob/master/Frontend/src/components/EmiPlanCard.jsx"
click node_api_client "https://github.com/div641/flexpay/blob/master/Frontend/src/services/api.js"
click node_backend_app "https://github.com/div641/flexpay/blob/master/Backend/src/app.js"
click node_product_routes "https://github.com/div641/flexpay/blob/master/Backend/src/routes/product.routes.js"
click node_product_controller "https://github.com/div641/flexpay/blob/master/Backend/src/controllers/product.controller.js"
click node_product_service "https://github.com/div641/flexpay/blob/master/Backend/src/services/product.service.js"
click node_variant_routes "https://github.com/div641/flexpay/blob/master/Backend/src/routes/variant.routes.js"
click node_variant_controller "https://github.com/div641/flexpay/blob/master/Backend/src/controllers/variant.controller.js"
click node_variant_service "https://github.com/div641/flexpay/blob/master/Backend/src/services/variant.service.js"
click node_emi_routes "https://github.com/div641/flexpay/blob/master/Backend/src/routes/emi.routes.js"
click node_emi_controller "https://github.com/div641/flexpay/blob/master/Backend/src/controllers/emi.controller.js"
click node_emi_service "https://github.com/div641/flexpay/blob/master/Backend/src/services/emi.service.js"
click node_db_config "https://github.com/div641/flexpay/blob/master/Backend/src/config/db.js"
click node_schema "https://github.com/div641/flexpay/blob/master/Backend/src/db/schema.sql"

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_app,node_products_page,node_product_card,node_sidebar,node_details_page,node_gallery,node_variant_selector,node_emi_card,node_api_client toneBlue
class node_backend_app,node_product_routes,node_product_controller,node_product_service,node_variant_routes,node_variant_controller,node_variant_service,node_emi_routes,node_emi_controller,node_emi_service,node_postgres toneAmber
class node_db_config,node_schema toneMint
class node_shopper toneIndigo
```

## Components

### Shopping frontend

- [App and routing](https://github.com/div641/flexpay/blob/master/Frontend/src/App.jsx): `Frontend/src/App.jsx`
- [Browse products](https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductsPage.jsx): `Frontend/src/pages/ProductsPage.jsx`
- [Product cards](https://github.com/div641/flexpay/blob/master/Frontend/src/components/ProductCard.jsx): `Frontend/src/components/ProductCard.jsx`
- [Search and filters](https://github.com/div641/flexpay/blob/master/Frontend/src/components/SidebarFilters.jsx): `Frontend/src/components/SidebarFilters.jsx`
- [Product details](https://github.com/div641/flexpay/blob/master/Frontend/src/pages/ProductDetailsPage.jsx): `Frontend/src/pages/ProductDetailsPage.jsx`
- [Product gallery](https://github.com/div641/flexpay/blob/master/Frontend/src/components/ProductGallery.jsx): `Frontend/src/components/ProductGallery.jsx`
- [Variant selection](https://github.com/div641/flexpay/blob/master/Frontend/src/components/VariantSelector.jsx): `Frontend/src/components/VariantSelector.jsx`
- [EMI plan selection](https://github.com/div641/flexpay/blob/master/Frontend/src/components/EmiPlanCard.jsx): `Frontend/src/components/EmiPlanCard.jsx`
- [API client](https://github.com/div641/flexpay/blob/master/Frontend/src/services/api.js): `Frontend/src/services/api.js`

### REST API

- [Express app](https://github.com/div641/flexpay/blob/master/Backend/src/app.js): `Backend/src/app.js`
- [Product routes](https://github.com/div641/flexpay/blob/master/Backend/src/routes/product.routes.js): `Backend/src/routes/product.routes.js`
- [Product controller](https://github.com/div641/flexpay/blob/master/Backend/src/controllers/product.controller.js): `Backend/src/controllers/product.controller.js`
- [Product queries](https://github.com/div641/flexpay/blob/master/Backend/src/services/product.service.js): `Backend/src/services/product.service.js`
- [Variant routes](https://github.com/div641/flexpay/blob/master/Backend/src/routes/variant.routes.js): `Backend/src/routes/variant.routes.js`
- [Variant controller](https://github.com/div641/flexpay/blob/master/Backend/src/controllers/variant.controller.js): `Backend/src/controllers/variant.controller.js`
- [Variant queries](https://github.com/div641/flexpay/blob/master/Backend/src/services/variant.service.js): `Backend/src/services/variant.service.js`
- [EMI routes](https://github.com/div641/flexpay/blob/master/Backend/src/routes/emi.routes.js): `Backend/src/routes/emi.routes.js`
- [EMI controller](https://github.com/div641/flexpay/blob/master/Backend/src/controllers/emi.controller.js): `Backend/src/controllers/emi.controller.js`
- [EMI queries](https://github.com/div641/flexpay/blob/master/Backend/src/services/emi.service.js): `Backend/src/services/emi.service.js`

### Product data

- [Database connection](https://github.com/div641/flexpay/blob/master/Backend/src/config/db.js): `Backend/src/config/db.js`
- [Relational schema](https://github.com/div641/flexpay/blob/master/Backend/src/db/schema.sql): `Backend/src/db/schema.sql`

### Other components

- **Shopper**
- **PostgreSQL**

## Connections

- Shopper → App and routing: uses
- App and routing → Browse products: routes to
- App and routing → Product details: routes to
- Browse products → Search and filters: offers filters
- Browse products → API client: requests products
- API client → Product cards: supplies data
- Browse products → Product cards: renders
- Product details → API client: requests details
- Product details → Product gallery: renders
- Product details → Variant selection: renders
- Product details → EMI plan selection: renders plans
- API client → Express app: calls REST API
- Express app → Product routes: mounts routes
- Express app → Variant routes: mounts routes
- Express app → EMI routes: mounts routes
- Product routes → Product controller: dispatches
- Product controller → Product queries: calls
- Variant routes → Variant controller: dispatches
- Variant controller → Variant queries: calls
- EMI routes → EMI controller: dispatches
- EMI controller → EMI queries: calls
- Product queries → Database connection: queries through
- Variant queries → Database connection: queries through
- EMI queries → Database connection: queries through
- Database connection → PostgreSQL: connects to
- Relational schema → PostgreSQL: defines tables