# modeba/project_midterm architecture

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

- Interactive diagram: https://gitdiagram.com/modeba/project_midterm
- Repository: https://github.com/modeba/project_midterm

## Overview

GITA Midterm Store is a Next.js shopping app. Shoppers browse a product catalog, open product details, add items, and manage quantities and totals in a session-only Redux cart; they can also register, log in, restore a session, and view or leave their profile. The graph includes the documented registration and authentication capabilities as well as the sampled product and cart flow. Edges reflect README statements or indexed imports and shown calls; some page internals are unsampled, so their detailed behavior is not inferred.

Main entry points: [`src/context/AuthContext.js`](https://github.com/modeba/project_midterm/blob/master/src/context/AuthContext.js) (Authentication context), [`src/app/layout.js`](https://github.com/modeba/project_midterm/blob/master/src/app/layout.js) (Root layout), [`src/components/Products.js`](https://github.com/modeba/project_midterm/blob/master/src/components/Products.js) (Product fetching), [`src/store/cartSlice.js`](https://github.com/modeba/project_midterm/blob/master/src/store/cartSlice.js) (Cart state and selectors)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Product browsing"]
  node_catalog_page["Catalog page<br/>[page.js]"]
  node_product_list["Product fetching<br/>[Products.js]"]
  node_product_card["Product card<br/>[ProductCard.js]"]
  node_product_page["Product details page<br/>[page.js]"]
  node_product_details["Product details<br/>[ProductDetails.js]"]
end

subgraph group_cart["Cart management"]
  node_cart_page["Cart page<br/>[page.js]"]
  node_add_button["Add-to-cart button<br/>[AddToCartButton.js]"]
  node_cart_state[("Cart state and selectors<br/>[cartSlice.js]")]
  node_redux_store["Redux store<br/>[store.js]"]
  node_store_provider["Store provider<br/>[StoreProvider.js]"]
end

subgraph group_identity["Accounts and sessions"]
  node_login_page["Login page<br/>[page.js]"]
  node_register_page["Registration page<br/>[page.js]"]
  node_profile_page["Profile page<br/>[page.js]"]
  node_auth_context["Authentication context<br/>[AuthContext.js]"]
  node_user_service["User API service<br/>[users.js]"]
  node_token_storage[("Token storage<br/>[auth-storage.js]")]
  node_login_validation["Login validation<br/>[login.js]"]
  node_registration_validation["Registration validation<br/>[registration.js]"]
end

subgraph group_app["Application shell"]
  node_app_layout["Root layout<br/>[layout.js]"]
  node_navbar["Navigation bar<br/>[Navbar.js]"]
  node_footer["Footer<br/>[Footer.js]"]
end

node_shopper(("Shopper"))
node_fake_store{{"Fake Store API"}}
node_dummyjson{{"DummyJSON API"}}

node_shopper -->|"browses"| node_catalog_page
node_catalog_page -->|"fetches products"| node_product_list
node_catalog_page -->|"renders"| node_product_card
node_product_list -->|"requests catalog"| node_fake_store
node_product_card -->|"renders"| node_add_button
node_shopper -->|"opens product"| node_product_page
node_product_page -->|"renders"| node_product_details
node_product_details -->|"fetches product"| node_product_list
node_product_details -->|"renders"| node_add_button
node_product_list -->|"requests details"| node_fake_store
node_add_button -->|"dispatches add"| node_cart_state
node_shopper -->|"manages cart"| node_cart_page
node_cart_page -->|"reads items and totals"| node_cart_state
node_store_provider -->|"provides store"| node_redux_store
node_redux_store -->|"registers reducer"| node_cart_state
node_shopper -->|"signs in"| node_login_page
node_login_page -->|"calls login"| node_auth_context
node_login_page -->|"validates form"| node_login_validation
node_shopper -->|"registers account"| node_register_page
node_register_page -->|"submits registration"| node_user_service
node_register_page -->|"validates form"| node_registration_validation
node_shopper -->|"views profile"| node_profile_page
node_profile_page -->|"reads session"| node_auth_context
node_auth_context -->|"authenticates and fetches user"| node_user_service
node_auth_context -->|"restores and saves token"| node_token_storage
node_user_service -->|"requests auth and registration"| node_dummyjson
node_app_layout -->|"renders"| node_navbar
node_app_layout -->|"renders"| node_footer
node_app_layout -->|"provides Redux"| node_store_provider
node_app_layout -->|"provides auth"| node_auth_context
node_navbar -->|"reads cart count"| node_cart_state
node_navbar -->|"reads user"| node_auth_context

click node_catalog_page "https://github.com/modeba/project_midterm/blob/master/src/app/page.js"
click node_product_list "https://github.com/modeba/project_midterm/blob/master/src/components/Products.js"
click node_product_card "https://github.com/modeba/project_midterm/blob/master/src/components/ProductCard.js"
click node_product_page "https://github.com/modeba/project_midterm/blob/master/src/app/products/%5Bid%5D/page.js"
click node_product_details "https://github.com/modeba/project_midterm/blob/master/src/components/ProductDetails.js"
click node_cart_page "https://github.com/modeba/project_midterm/blob/master/src/app/cart/page.js"
click node_add_button "https://github.com/modeba/project_midterm/blob/master/src/components/AddToCartButton.js"
click node_cart_state "https://github.com/modeba/project_midterm/blob/master/src/store/cartSlice.js"
click node_redux_store "https://github.com/modeba/project_midterm/blob/master/src/store/store.js"
click node_store_provider "https://github.com/modeba/project_midterm/blob/master/src/store/StoreProvider.js"
click node_login_page "https://github.com/modeba/project_midterm/blob/master/src/app/login/page.js"
click node_register_page "https://github.com/modeba/project_midterm/blob/master/src/app/register/page.js"
click node_profile_page "https://github.com/modeba/project_midterm/blob/master/src/app/profile/page.js"
click node_auth_context "https://github.com/modeba/project_midterm/blob/master/src/context/AuthContext.js"
click node_user_service "https://github.com/modeba/project_midterm/blob/master/src/services/users.js"
click node_token_storage "https://github.com/modeba/project_midterm/blob/master/src/services/auth-storage.js"
click node_login_validation "https://github.com/modeba/project_midterm/blob/master/src/validation/login.js"
click node_registration_validation "https://github.com/modeba/project_midterm/blob/master/src/validation/registration.js"
click node_app_layout "https://github.com/modeba/project_midterm/blob/master/src/app/layout.js"
click node_navbar "https://github.com/modeba/project_midterm/blob/master/src/components/Navbar.js"
click node_footer "https://github.com/modeba/project_midterm/blob/master/src/components/Footer.js"

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_catalog_page,node_product_list,node_product_card,node_product_page,node_product_details toneBlue
class node_cart_page,node_add_button,node_cart_state,node_redux_store,node_store_provider toneAmber
class node_login_page,node_register_page,node_profile_page,node_auth_context,node_user_service,node_token_storage,node_login_validation,node_registration_validation,node_fake_store,node_dummyjson toneMint
class node_app_layout,node_navbar,node_footer toneRose
class node_shopper toneIndigo
```

## Components

### Product browsing

- [Catalog page](https://github.com/modeba/project_midterm/blob/master/src/app/page.js): `src/app/page.js`
- [Product fetching](https://github.com/modeba/project_midterm/blob/master/src/components/Products.js): `src/components/Products.js`
- [Product card](https://github.com/modeba/project_midterm/blob/master/src/components/ProductCard.js): `src/components/ProductCard.js`
- [Product details page](https://github.com/modeba/project_midterm/blob/master/src/app/products/%5Bid%5D/page.js): `src/app/products/[id]/page.js`
- [Product details](https://github.com/modeba/project_midterm/blob/master/src/components/ProductDetails.js): `src/components/ProductDetails.js`

### Cart management

- [Cart page](https://github.com/modeba/project_midterm/blob/master/src/app/cart/page.js): `src/app/cart/page.js`
- [Add-to-cart button](https://github.com/modeba/project_midterm/blob/master/src/components/AddToCartButton.js): `src/components/AddToCartButton.js`
- [Cart state and selectors](https://github.com/modeba/project_midterm/blob/master/src/store/cartSlice.js): `src/store/cartSlice.js`
- [Redux store](https://github.com/modeba/project_midterm/blob/master/src/store/store.js): `src/store/store.js`
- [Store provider](https://github.com/modeba/project_midterm/blob/master/src/store/StoreProvider.js): `src/store/StoreProvider.js`

### Accounts and sessions

- [Login page](https://github.com/modeba/project_midterm/blob/master/src/app/login/page.js): `src/app/login/page.js`
- [Registration page](https://github.com/modeba/project_midterm/blob/master/src/app/register/page.js): `src/app/register/page.js`
- [Profile page](https://github.com/modeba/project_midterm/blob/master/src/app/profile/page.js): `src/app/profile/page.js`
- [Authentication context](https://github.com/modeba/project_midterm/blob/master/src/context/AuthContext.js): `src/context/AuthContext.js`
- [User API service](https://github.com/modeba/project_midterm/blob/master/src/services/users.js): `src/services/users.js`
- [Token storage](https://github.com/modeba/project_midterm/blob/master/src/services/auth-storage.js): `src/services/auth-storage.js`
- [Login validation](https://github.com/modeba/project_midterm/blob/master/src/validation/login.js): `src/validation/login.js`
- [Registration validation](https://github.com/modeba/project_midterm/blob/master/src/validation/registration.js): `src/validation/registration.js`

### Application shell

- [Root layout](https://github.com/modeba/project_midterm/blob/master/src/app/layout.js): `src/app/layout.js`
- [Navigation bar](https://github.com/modeba/project_midterm/blob/master/src/components/Navbar.js): `src/components/Navbar.js`
- [Footer](https://github.com/modeba/project_midterm/blob/master/src/components/Footer.js): `src/components/Footer.js`

### Other components

- **Shopper**
- **Fake Store API**
- **DummyJSON API**

## Connections

- Shopper → Catalog page: browses (evidence: `README.md`)
- Catalog page → Product fetching: fetches products (evidence: `src/app/page.js`)
- Catalog page → Product card: renders (evidence: `src/app/page.js`)
- Product fetching → Fake Store API: requests catalog (evidence: `README.md`)
- Product card → Add-to-cart button: renders (evidence: `src/components/ProductCard.js`)
- Shopper → Product details page: opens product (evidence: `README.md`)
- Product details page → Product details: renders (evidence: `src/app/products/[id]/page.js`)
- Product details → Product fetching: fetches product (evidence: `src/components/ProductDetails.js`)
- Product details → Add-to-cart button: renders (evidence: `src/components/ProductDetails.js`)
- Product fetching → Fake Store API: requests details (evidence: `README.md`)
- Add-to-cart button → Cart state and selectors: dispatches add (evidence: `src/components/AddToCartButton.js`)
- Shopper → Cart page: manages cart (evidence: `README.md`)
- Cart page → Cart state and selectors: reads items and totals (evidence: `src/app/cart/page.js`)
- Store provider → Redux store: provides store (evidence: `src/store/StoreProvider.js`)
- Redux store → Cart state and selectors: registers reducer (evidence: `src/store/store.js`)
- Shopper → Login page: signs in (evidence: `README.md`)
- Login page → Authentication context: calls login (evidence: `src/app/login/page.js`)
- Login page → Login validation: validates form (evidence: `src/app/login/page.js`)
- Shopper → Registration page: registers account (evidence: `README.md`)
- Registration page → User API service: submits registration (evidence: `src/app/register/page.js`)
- Registration page → Registration validation: validates form (evidence: `src/app/register/page.js`)
- Shopper → Profile page: views profile (evidence: `README.md`)
- Profile page → Authentication context: reads session (evidence: `src/app/profile/page.js`)
- Authentication context → User API service: authenticates and fetches user (evidence: `src/context/AuthContext.js`)
- Authentication context → Token storage: restores and saves token (evidence: `src/context/AuthContext.js`)
- User API service → DummyJSON API: requests auth and registration (evidence: `src/services/users.js`)
- Root layout → Navigation bar: renders (evidence: `src/app/layout.js`)
- Root layout → Footer: renders (evidence: `src/app/layout.js`)
- Root layout → Store provider: provides Redux (evidence: `src/app/layout.js`)
- Root layout → Authentication context: provides auth (evidence: `src/app/layout.js`)
- Navigation bar → Cart state and selectors: reads cart count (evidence: `src/components/Navbar.js`)
- Navigation bar → Authentication context: reads user (evidence: `src/components/Navbar.js`)