# millipo14/sillage architecture

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

- Interactive diagram: https://gitdiagram.com/millipo14/sillage
- Repository: https://github.com/millipo14/sillage

## Overview

Sillage is a React/Redux fragrance-selection storefront. Shoppers browse and filter a perfume catalog, inspect a fragrance, add it to a cart, and proceed through ordering; the README also documents preference-based selection, subscriptions, accounts, reviews, and administration. `src/App.jsx` establishes the routes, while sampled components show dispatches into Redux thunks and slices for API-backed data. Several major feature implementations and the store setup were not sampled, so their internal wiring is intentionally left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/millipo14/sillage/blob/main/src/App.jsx) (Route application), [`src/Components/PerfumePage/PerfumePage.jsx`](https://github.com/millipo14/sillage/blob/main/src/Components/PerfumePage/PerfumePage.jsx) (Perfume detail), [`src/features/authSlice.js`](https://github.com/millipo14/sillage/blob/main/src/features/authSlice.js) (Authentication state), [`src/features/perfumeSlice.js`](https://github.com/millipo14/sillage/blob/main/src/features/perfumeSlice.js) (Perfume data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_app["Route application<br/>[App.jsx]"]
  node_root["Shared page shell<br/>[Root.jsx]"]
end

subgraph group_shopping["Shopping and selection"]
  node_catalog["Catalog and filters<br/>[Catalog.jsx]"]
  node_filter_ui["Filter dialog<br/>[FilterModal.jsx]"]
  node_perfume_cards["Perfume cards<br/>[Perfume.jsx]"]
  node_perfume_detail["Perfume detail<br/>[PerfumePage.jsx]"]
  node_quiz["Preference quiz<br/>[QuizPage.jsx]"]
  node_recommendations["Recommendations"]
  node_selection_sample["Sample selection"]
end

subgraph group_account["Accounts and reviews"]
  node_profile["Customer profile<br/>[Profile.jsx]"]
  node_auth_ui["Login and registration<br/>[AuthPage.jsx]"]
  node_reviews_ui["Reviews<br/>[Reviews.jsx]"]
  node_admin_ui["Admin dashboard<br/>[AdminPage.jsx]"]
end

subgraph group_operations["Orders and subscriptions"]
  node_cart_ui["Shopping cart<br/>[Cart.jsx]"]
  node_orders_ui["Order history<br/>[OrdersList.jsx]"]
  node_subscription_ui["Subscriptions<br/>[Subscription.jsx]"]
end

subgraph group_state["Redux state and API"]
  node_perfume_state["Perfume data<br/>[perfumeSlice.js]"]
  node_cart_state["Cart state<br/>[cartSlice.js]"]
  node_subscription_state["Subscription state"]
  node_auth_state["Authentication state<br/>[authSlice.js]"]
  node_review_state["Review state<br/>[reviewSlice.js]"]
  node_admin_state["Admin analytics state"]
end

node_shopper(("Shopper"))
node_api["REST API"]
node_browser_storage[("Browser local storage")]

node_shopper -->|"opens"| node_app
node_app -->|"routes through"| node_root
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_perfume_detail
node_app -->|"routes to"| node_cart_ui
node_app -->|"routes to"| node_quiz
node_app -->|"routes to"| node_recommendations
node_app -->|"routes to"| node_selection_sample
node_app -->|"routes to"| node_subscription_ui
node_app -->|"protects route"| node_profile
node_app -->|"routes to"| node_auth_ui
node_app -->|"guards route"| node_admin_ui
node_app -->|"routes to"| node_reviews_ui
node_catalog -->|"opens"| node_filter_ui
node_filter_ui -->|"dispatches filters"| node_perfume_state
node_perfume_cards -->|"adds item"| node_cart_state
node_perfume_cards -->|"adds sample"| node_subscription_state
node_perfume_detail -->|"fetches fragrance"| node_perfume_state
node_perfume_detail -->|"adds item"| node_cart_state
node_perfume_detail -->|"fetches reviews"| node_review_state
node_reviews_ui -->|"submits review"| node_review_state
node_auth_ui -->|"authenticates"| node_auth_state
node_perfume_state -->|"requests data"| node_api
node_review_state -->|"requests reviews"| node_api
node_auth_state -->|"requests account"| node_api
node_admin_state -->|"requests analytics"| node_api
node_auth_state -->|"reads and writes"| node_browser_storage

click node_app "https://github.com/millipo14/sillage/blob/main/src/App.jsx"
click node_root "https://github.com/millipo14/sillage/blob/main/src/routes/Root.jsx"
click node_catalog "https://github.com/millipo14/sillage/blob/main/src/Components/Catalog/Catalog.jsx"
click node_filter_ui "https://github.com/millipo14/sillage/blob/main/src/Components/FilterModal/FilterModal.jsx"
click node_perfume_cards "https://github.com/millipo14/sillage/blob/main/src/Components/Perfume/Perfume.jsx"
click node_perfume_detail "https://github.com/millipo14/sillage/blob/main/src/Components/PerfumePage/PerfumePage.jsx"
click node_quiz "https://github.com/millipo14/sillage/blob/main/src/Components/QuizPage/QuizPage.jsx"
click node_recommendations "https://github.com/millipo14/sillage/blob/main/src/Components/Recommendations/Recommendations.jsx"
click node_selection_sample "https://github.com/millipo14/sillage/blob/main/src/Components/SelectionSample/SelectionSample.jsx"
click node_cart_ui "https://github.com/millipo14/sillage/blob/main/src/Components/Cart/Cart.jsx"
click node_orders_ui "https://github.com/millipo14/sillage/blob/main/src/Components/OrdersList/OrdersList.jsx"
click node_subscription_ui "https://github.com/millipo14/sillage/blob/main/src/Components/Subscription/Subscription.jsx"
click node_profile "https://github.com/millipo14/sillage/blob/main/src/Components/Profile/Profile.jsx"
click node_auth_ui "https://github.com/millipo14/sillage/blob/main/src/routes/AuthPage.jsx"
click node_reviews_ui "https://github.com/millipo14/sillage/blob/main/src/Components/Reviews/Reviews.jsx"
click node_admin_ui "https://github.com/millipo14/sillage/blob/main/src/Components/AdminPage/AdminPage.jsx"
click node_perfume_state "https://github.com/millipo14/sillage/blob/main/src/features/perfumeSlice.js"
click node_cart_state "https://github.com/millipo14/sillage/blob/main/src/features/cartSlice.js"
click node_subscription_state "https://github.com/millipo14/sillage/blob/main/src/features/subscriptionSlice.js"
click node_auth_state "https://github.com/millipo14/sillage/blob/main/src/features/authSlice.js"
click node_review_state "https://github.com/millipo14/sillage/blob/main/src/features/reviewSlice.js"
click node_admin_state "https://github.com/millipo14/sillage/blob/main/src/features/adminAnalyticsSlice.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_app,node_root toneBlue
class node_catalog,node_filter_ui,node_perfume_cards,node_perfume_detail,node_quiz,node_recommendations,node_selection_sample,node_browser_storage toneAmber
class node_profile,node_auth_ui,node_reviews_ui,node_admin_ui,node_api toneMint
class node_cart_ui,node_orders_ui,node_subscription_ui toneRose
class node_perfume_state,node_cart_state,node_subscription_state,node_auth_state,node_review_state,node_admin_state,node_shopper toneIndigo
```

## Components

### Application entry

- [Route application](https://github.com/millipo14/sillage/blob/main/src/App.jsx): `src/App.jsx`
- [Shared page shell](https://github.com/millipo14/sillage/blob/main/src/routes/Root.jsx): `src/routes/Root.jsx`

### Shopping and selection

- [Catalog and filters](https://github.com/millipo14/sillage/blob/main/src/Components/Catalog/Catalog.jsx): `src/Components/Catalog/Catalog.jsx`
- [Filter dialog](https://github.com/millipo14/sillage/blob/main/src/Components/FilterModal/FilterModal.jsx): `src/Components/FilterModal/FilterModal.jsx`
- [Perfume cards](https://github.com/millipo14/sillage/blob/main/src/Components/Perfume/Perfume.jsx): `src/Components/Perfume/Perfume.jsx`
- [Perfume detail](https://github.com/millipo14/sillage/blob/main/src/Components/PerfumePage/PerfumePage.jsx): `src/Components/PerfumePage/PerfumePage.jsx`
- [Preference quiz](https://github.com/millipo14/sillage/blob/main/src/Components/QuizPage/QuizPage.jsx): `src/Components/QuizPage/QuizPage.jsx`
- [Recommendations](https://github.com/millipo14/sillage/blob/main/src/Components/Recommendations/Recommendations.jsx): `src/Components/Recommendations/Recommendations.jsx`
- [Sample selection](https://github.com/millipo14/sillage/blob/main/src/Components/SelectionSample/SelectionSample.jsx): `src/Components/SelectionSample/SelectionSample.jsx`

### Accounts and reviews

- [Customer profile](https://github.com/millipo14/sillage/blob/main/src/Components/Profile/Profile.jsx): `src/Components/Profile/Profile.jsx`
- [Login and registration](https://github.com/millipo14/sillage/blob/main/src/routes/AuthPage.jsx): `src/routes/AuthPage.jsx`
- [Reviews](https://github.com/millipo14/sillage/blob/main/src/Components/Reviews/Reviews.jsx): `src/Components/Reviews/Reviews.jsx`
- [Admin dashboard](https://github.com/millipo14/sillage/blob/main/src/Components/AdminPage/AdminPage.jsx): `src/Components/AdminPage/AdminPage.jsx`

### Orders and subscriptions

- [Shopping cart](https://github.com/millipo14/sillage/blob/main/src/Components/Cart/Cart.jsx): `src/Components/Cart/Cart.jsx`
- [Order history](https://github.com/millipo14/sillage/blob/main/src/Components/OrdersList/OrdersList.jsx): `src/Components/OrdersList/OrdersList.jsx`
- [Subscriptions](https://github.com/millipo14/sillage/blob/main/src/Components/Subscription/Subscription.jsx): `src/Components/Subscription/Subscription.jsx`

### Redux state and API

- [Perfume data](https://github.com/millipo14/sillage/blob/main/src/features/perfumeSlice.js): `src/features/perfumeSlice.js`
- [Cart state](https://github.com/millipo14/sillage/blob/main/src/features/cartSlice.js): `src/features/cartSlice.js`
- [Subscription state](https://github.com/millipo14/sillage/blob/main/src/features/subscriptionSlice.js): `src/features/subscriptionSlice.js`
- [Authentication state](https://github.com/millipo14/sillage/blob/main/src/features/authSlice.js): `src/features/authSlice.js`
- [Review state](https://github.com/millipo14/sillage/blob/main/src/features/reviewSlice.js): `src/features/reviewSlice.js`
- [Admin analytics state](https://github.com/millipo14/sillage/blob/main/src/features/adminAnalyticsSlice.js): `src/features/adminAnalyticsSlice.js`

### Other components

- **Shopper**
- **REST API**
- **Browser local storage**

## Connections

- Shopper → Route application: opens
- Route application → Shared page shell: routes through
- Route application → Catalog and filters: routes to
- Route application → Perfume detail: routes to
- Route application → Shopping cart: routes to
- Route application → Preference quiz: routes to
- Route application → Recommendations: routes to
- Route application → Sample selection: routes to
- Route application → Subscriptions: routes to
- Route application → Customer profile: protects route
- Route application → Login and registration: routes to
- Route application → Admin dashboard: guards route
- Route application → Reviews: routes to
- Catalog and filters → Filter dialog: opens
- Filter dialog → Perfume data: dispatches filters
- Perfume cards → Cart state: adds item
- Perfume cards → Subscription state: adds sample
- Perfume detail → Perfume data: fetches fragrance
- Perfume detail → Cart state: adds item
- Perfume detail → Review state: fetches reviews
- Reviews → Review state: submits review
- Login and registration → Authentication state: authenticates
- Perfume data → REST API: requests data
- Review state → REST API: requests reviews
- Authentication state → REST API: requests account
- Admin analytics state → REST API: requests analytics
- Authentication state → Browser local storage: reads and writes