# anuanusikan/gui-miniproject architecture

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

- Interactive diagram: https://gitdiagram.com/anuanusikan/gui-miniproject
- Repository: https://github.com/anuanusikan/gui-miniproject

## Overview

#### Purpose and Runtime
AlloraCart is a client-side e-commerce SPA for browsing products, managing favorites/cart state, authenticating locally, and completing a checkout flow. It runs as a Vue 3 + TypeScript application built by Vite, styled with Tailwind/PostCSS, and deployed as a static site (Netlify configuration and SPA redirects are present).
- `src/main.ts`
- `src/App.vue`
- `netlify.toml`
- `public/_redirects`

#### Application Bootstrap and Navigation
`main.ts` initializes the Vue application and its framework integrations. `App.vue` is the persistent application shell; route selection is owned by Vue Router. The router maps the catalog, account, cart, checkout, and support surfaces into page-level components, forming the primary control boundary between navigation and feature implementation.
- `src/main.ts`
- `src/App.vue`
- `src/router/index.ts`

#### Catalog and Product Domain
Product discovery is driven by a product service and shared product types. Home, category, offer, and detail routes consume this domain, while reusable cards render catalog items. Search and filter stores represent cross-page discovery state; product details also owns image-lightbox behavior and currency presentation.
- `src/services/productService.ts`
- `src/types/product.ts`
- `src/components/ProductCard.vue`
- `src/pages/ProductDetailsPage.vue`
- `src/stores/searchStore.ts`
- `src/stores/filterStore.ts`

#### Store-Centered Client State
Pinia stores are the application’s principal state boundary. They centralize session/authentication, cart contents and quantities, checkout progress, favorites, theme preference, transient UI state, and toast messages. README-described persistence uses browser `localStorage`, so these flows are client-local rather than backed by a declared remote auth, payment, or order service.
- `src/stores/authStore.ts`
- `src/stores/cartStore.ts`
- `src/stores/checkoutStore.ts`
- `src/stores/favoritesStore.ts`
- `src/stores/toastStore.ts`

#### Purchase Flow and Access Control
Product actions feed the cart store, with authentication gating before cart additions. Cart pages expose item and quantity management; checkout consumes cart and checkout state, then directs users toward payment/order views. Account routes cover sign-in/up, orders, payment methods, settings, messages, and favorites.
- `src/pages/CartPage.vue`
- `src/pages/CheckoutPage.vue`
- `src/pages/SignInPage.vue`
- `src/pages/MyOrdersPage.vue`
- `src/pages/PaymentMethodsPage.vue`

#### Shared Experience Layer
The global navigation exposes catalog, cart count, profile, auth modal, and dark-mode controls. Reusable layout and feedback components provide consistent site chrome, promotions, categories, and user notifications. Theme behavior is isolated in its own persisted store.
- `src/components/Navbar.vue`
- `src/components/AuthModal.vue`
- `src/components/ToastHost.vue`
- `src/components/CategoriesBar.vue`
- `src/stores/darkModeStore.ts`

#### External Boundaries
Declared infrastructure is Vite’s browser build/runtime and Netlify static hosting. Product access is abstracted behind `productService`, allowing future API endpoint integration, but the repository tree and README do not establish a backend, payment gateway, or external authentication provider. Browser persistence is a material dependency for auth, cart, favorites, and theme continuity.
- `vite.config.ts`
- `src/services/productService.ts`
- `netlify.toml`
- `public/_redirects`

Main entry points: [`src/router/index.ts`](https://github.com/anuanusikan/gui-miniproject/blob/main/src/router/index.ts) (Route controller), [`src/App.vue`](https://github.com/anuanusikan/gui-miniproject/blob/main/src/App.vue) (Application shell), [`src/pages/ProductDetailsPage.vue`](https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/ProductDetailsPage.vue) (Product details), [`src/stores/cartStore.ts`](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/cartStore.ts) (Cart state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime & delivery"]
  node_vite{{"Vite browser build<br/>build runtime<br/>[vite.config.ts]"}}
  node_netlify{{"Netlify static hosting<br/>[netlify.toml]"}}
  node_redirects["SPA redirects<br/>hosting rules"]
end

subgraph group_ui["App &amp; experience"]
  node_bootstrap(("Vue bootstrap<br/>application entry<br/>[main.ts]"))
  node_app["Application shell<br/>Vue shell<br/>[App.vue]"]
  node_router["Route controller<br/>Vue Router<br/>[index.ts]"]
  node_navbar["Global navigation<br/>shared component<br/>[Navbar.vue]"]
  node_auth_modal["Auth modal<br/>shared component<br/>[AuthModal.vue]"]
  node_toast_host["Toast host<br/>shared component<br/>[ToastHost.vue]"]
end

subgraph group_domain["Catalog domain"]
  node_product_service["Product service<br/>catalog access<br/>[productService.ts]"]
  node_product_types["Product types<br/>shared types<br/>[product.ts]"]
  node_product_card["Product card<br/>catalog component<br/>[ProductCard.vue]"]
  node_product_details["Product details<br/>catalog page"]
end

subgraph group_state["Client state"]
  node_discovery_state["Search &amp; filter state<br/>Pinia stores<br/>[searchStore.ts]"]
  node_auth_state["Auth state<br/>Pinia store<br/>[authStore.ts]"]
  node_cart_state["Cart state<br/>Pinia store<br/>[cartStore.ts]"]
  node_checkout_state["Checkout state<br/>Pinia store<br/>[checkoutStore.ts]"]
  node_favorites_state["Favorites state<br/>Pinia store<br/>[favoritesStore.ts]"]
  node_experience_state["Theme &amp; feedback state<br/>Pinia stores<br/>[darkModeStore.ts]"]
  node_browser_storage[("Browser localStorage<br/>client persistence")]
end

subgraph group_commerce["Purchase &amp; account"]
  node_cart_page["Cart page<br/>commerce page<br/>[CartPage.vue]"]
  node_checkout_page["Checkout page<br/>commerce page<br/>[CheckoutPage.vue]"]
  node_account_pages["Account surfaces<br/>account pages<br/>[SignInPage.vue]"]
end

node_vite -->|"builds"| node_bootstrap
node_netlify -->|"applies"| node_redirects
node_redirects -->|"serves SPA entry"| node_app
node_bootstrap -->|"mounts"| node_app
node_app -->|"hosts"| node_router
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_toast_host
node_navbar -->|"opens"| node_auth_modal
node_router -->|"selects route"| node_product_details
node_router -->|"selects route"| node_cart_page
node_router -->|"selects route"| node_checkout_page
node_router -->|"selects route"| node_account_pages
node_product_service -->|"uses"| node_product_types
node_product_details -->|"loads product"| node_product_service
node_product_card -->|"renders"| node_product_types
node_discovery_state -->|"drives discovery"| node_product_service
node_product_details -->|"adds item"| node_cart_state
node_product_details -.->|"requires sign-in"| node_auth_state
node_cart_page -->|"manages items"| node_cart_state
node_checkout_page -->|"consumes cart"| node_cart_state
node_checkout_page -->|"updates progress"| node_checkout_state
node_account_pages -->|"manages session"| node_auth_state
node_toast_host -->|"displays messages"| node_experience_state
node_navbar -->|"toggles theme"| node_experience_state
node_auth_state -->|"persists"| node_browser_storage
node_cart_state -->|"persists"| node_browser_storage
node_favorites_state -->|"persists"| node_browser_storage
node_experience_state -->|"persists theme"| node_browser_storage

click node_vite "https://github.com/anuanusikan/gui-miniproject/blob/main/vite.config.ts"
click node_netlify "https://github.com/anuanusikan/gui-miniproject/blob/main/netlify.toml"
click node_redirects "https://github.com/anuanusikan/gui-miniproject/blob/main/public/_redirects"
click node_bootstrap "https://github.com/anuanusikan/gui-miniproject/blob/main/src/main.ts"
click node_app "https://github.com/anuanusikan/gui-miniproject/blob/main/src/App.vue"
click node_router "https://github.com/anuanusikan/gui-miniproject/blob/main/src/router/index.ts"
click node_navbar "https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/Navbar.vue"
click node_auth_modal "https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/AuthModal.vue"
click node_toast_host "https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/ToastHost.vue"
click node_product_service "https://github.com/anuanusikan/gui-miniproject/blob/main/src/services/productService.ts"
click node_product_types "https://github.com/anuanusikan/gui-miniproject/blob/main/src/types/product.ts"
click node_product_card "https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/ProductCard.vue"
click node_product_details "https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/ProductDetailsPage.vue"
click node_discovery_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/searchStore.ts"
click node_auth_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/authStore.ts"
click node_cart_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/cartStore.ts"
click node_checkout_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/checkoutStore.ts"
click node_favorites_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/favoritesStore.ts"
click node_experience_state "https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/darkModeStore.ts"
click node_cart_page "https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/CartPage.vue"
click node_checkout_page "https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/CheckoutPage.vue"
click node_account_pages "https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/SignInPage.vue"

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_vite,node_netlify,node_redirects toneBlue
class node_bootstrap,node_app,node_router,node_navbar,node_auth_modal,node_toast_host toneAmber
class node_product_service,node_product_types,node_product_card,node_product_details toneMint
class node_discovery_state,node_auth_state,node_cart_state,node_checkout_state,node_favorites_state,node_experience_state,node_browser_storage toneRose
class node_cart_page,node_checkout_page,node_account_pages toneIndigo
```

## Components

### Runtime & delivery

- [Vite browser build](https://github.com/anuanusikan/gui-miniproject/blob/main/vite.config.ts): build runtime · `vite.config.ts`
- [Netlify static hosting](https://github.com/anuanusikan/gui-miniproject/blob/main/netlify.toml): hosting · Serves the SPA with redirect support. · `netlify.toml`
- [SPA redirects](https://github.com/anuanusikan/gui-miniproject/blob/main/public/_redirects): hosting rules · `public/_redirects`

### App & experience

- [Vue bootstrap](https://github.com/anuanusikan/gui-miniproject/blob/main/src/main.ts): application entry · `src/main.ts`
- [Application shell](https://github.com/anuanusikan/gui-miniproject/blob/main/src/App.vue): Vue shell · `src/App.vue`
- [Route controller](https://github.com/anuanusikan/gui-miniproject/blob/main/src/router/index.ts): Vue Router · Maps catalog, account, cart, checkout, and support pages. · `src/router/index.ts`
- [Global navigation](https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/Navbar.vue): shared component · `src/components/Navbar.vue`
- [Auth modal](https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/AuthModal.vue): shared component · `src/components/AuthModal.vue`
- [Toast host](https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/ToastHost.vue): shared component · `src/components/ToastHost.vue`

### Catalog domain

- [Product service](https://github.com/anuanusikan/gui-miniproject/blob/main/src/services/productService.ts): catalog access · Abstraction point for future product APIs. · `src/services/productService.ts`
- [Product types](https://github.com/anuanusikan/gui-miniproject/blob/main/src/types/product.ts): shared types · `src/types/product.ts`
- [Product card](https://github.com/anuanusikan/gui-miniproject/blob/main/src/components/ProductCard.vue): catalog component · `src/components/ProductCard.vue`
- [Product details](https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/ProductDetailsPage.vue): catalog page · Owns detail presentation and image lightbox behavior. · `src/pages/ProductDetailsPage.vue`

### Client state

- [Search & filter state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/searchStore.ts): Pinia stores · Cross-page product discovery state. · `src/stores/searchStore.ts`
- [Auth state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/authStore.ts): Pinia store · `src/stores/authStore.ts`
- [Cart state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/cartStore.ts): Pinia store · Centralizes cart items and quantities. · `src/stores/cartStore.ts`
- [Checkout state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/checkoutStore.ts): Pinia store · `src/stores/checkoutStore.ts`
- [Favorites state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/favoritesStore.ts): Pinia store · `src/stores/favoritesStore.ts`
- [Theme & feedback state](https://github.com/anuanusikan/gui-miniproject/blob/main/src/stores/darkModeStore.ts): Pinia stores · Contains persisted theme preference and toast messages. · `src/stores/darkModeStore.ts`
- **Browser localStorage**: client persistence · Persists local auth, cart, favorites, and theme continuity.

### Purchase & account

- [Cart page](https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/CartPage.vue): commerce page · `src/pages/CartPage.vue`
- [Checkout page](https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/CheckoutPage.vue): commerce page · `src/pages/CheckoutPage.vue`
- [Account surfaces](https://github.com/anuanusikan/gui-miniproject/blob/main/src/pages/SignInPage.vue): account pages · Sign-in, orders, and payment-method views. · `src/pages/SignInPage.vue`

## Connections

- Vite browser build → Vue bootstrap: builds
- Netlify static hosting → SPA redirects: applies
- SPA redirects → Application shell: serves SPA entry
- Vue bootstrap → Application shell: mounts
- Application shell → Route controller: hosts
- Application shell → Global navigation: renders
- Application shell → Toast host: renders
- Global navigation → Auth modal: opens
- Route controller → Product details: selects route
- Route controller → Cart page: selects route
- Route controller → Checkout page: selects route
- Route controller → Account surfaces: selects route
- Product service → Product types: uses
- Product details → Product service: loads product
- Product card → Product types: renders
- Search & filter state → Product service: drives discovery
- Product details → Cart state: adds item
- Product details → Auth state: requires sign-in
- Cart page → Cart state: manages items
- Checkout page → Cart state: consumes cart
- Checkout page → Checkout state: updates progress
- Account surfaces → Auth state: manages session
- Toast host → Theme & feedback state: displays messages
- Global navigation → Theme & feedback state: toggles theme
- Auth state → Browser localStorage: persists
- Cart state → Browser localStorage: persists
- Favorites state → Browser localStorage: persists
- Theme & feedback state → Browser localStorage: persists theme