# phuongle2312/fandomverse-techwiz architecture

> Architecture diagram of the GitHub repository phuongle2312/fandomverse-techwiz, 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/phuongle2312/fandomverse-techwiz
- Repository: https://github.com/phuongle2312/fandomverse-techwiz

## Overview

FandomVerse is a React SPA for exploring fandom content across seven categories, searching and viewing media, and interacting with merchandise, accounts, and an admin area. The main visitor flow enters through the app router, browses category content or searches across content types, then can save bookmarks or proceed through cart and checkout to order history. The README also describes chatbot, trailer, event, and character features. The supplied tree omits the documented JSON data directory, and sampled excerpts do not establish all page-to-service wiring, so uncertain links are left out.

Main entry points: [`src/App.jsx`](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/App.jsx) (Router and providers), [`src/services/storageService.js`](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/storageService.js) (Browser storage service), [`src/pages/CategoryHub.jsx`](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/CategoryHub.jsx) (Category hub), [`src/pages/TrailersHub.jsx`](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/TrailersHub.jsx) (Trailer hub)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["Router and providers<br/>[App.jsx]"]
  node_chatbot["Chatbot widget<br/>[ChatbotWidget.jsx]"]
  node_chatservice["Chatbot service<br/>[chatbotService.js]"]
end

subgraph group_discovery["Fandom discovery"]
  node_home["Home<br/>[Home.jsx]"]
  node_category["Category hub<br/>[CategoryHub.jsx]"]
  node_detail["Content detail<br/>[ContentDetail.jsx]"]
  node_trailers["Trailer hub<br/>[TrailersHub.jsx]"]
  node_searchpage["Search results<br/>[SearchResults.jsx]"]
  node_search["Search service<br/>[searchService.js]"]
  node_categoryhook["Category data hook<br/>[useCategoryData.js]"]
end

subgraph group_commerce["Commerce"]
  node_merch["Merchandise<br/>[Merchandise.jsx]"]
  node_cart["Cart state<br/>[CartContext.jsx]"]
  node_checkout["Checkout<br/>[Checkout.jsx]"]
  node_orders["Order history<br/>[OrdersHistory.jsx]"]
end

subgraph group_identity["Accounts and saved items"]
  node_auth["Authentication state<br/>[AuthContext.jsx]"]
  node_bookmarks["Bookmarks<br/>[Bookmarks.jsx]"]
  node_storage["Browser storage service<br/>[storageService.js]"]
end

subgraph group_operations["Content operations"]
  node_data["Data service<br/>[dataService.js]"]
  node_admin["Admin pages"]
end

node_visitor(("Visitor"))
node_browser[("Browser storage")]
node_youtube["YouTube embeds"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_category
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_trailers
node_app -->|"routes"| node_searchpage
node_app -->|"routes"| node_merch
node_app -->|"routes"| node_checkout
node_app -->|"routes"| node_bookmarks
node_app -->|"routes"| node_orders
node_app -->|"routes"| node_admin
node_category -->|"loads data"| node_categoryhook
node_categoryhook -->|"reads category"| node_data
node_searchpage -->|"searches"| node_search
node_search -->|"scans records"| node_data
node_chatbot -->|"requests replies"| node_chatservice
node_cart -->|"persists cart"| node_storage
node_bookmarks -->|"persists saves"| node_storage
node_auth -->|"persists session"| node_storage
node_checkout -->|"records orders"| node_storage
node_orders -->|"loads orders"| node_storage
node_storage -->|"reads and writes"| node_browser
node_trailers -.->|"embeds videos"| node_youtube

click node_app "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/App.jsx"
click node_home "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Home.jsx"
click node_category "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/CategoryHub.jsx"
click node_detail "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/ContentDetail.jsx"
click node_trailers "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/TrailersHub.jsx"
click node_searchpage "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/SearchResults.jsx"
click node_search "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/searchService.js"
click node_categoryhook "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/hooks/useCategoryData.js"
click node_data "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/dataService.js"
click node_chatbot "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/components/interactive/ChatbotWidget.jsx"
click node_chatservice "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/chatbotService.js"
click node_merch "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Merchandise.jsx"
click node_cart "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/context/CartContext.jsx"
click node_checkout "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Checkout.jsx"
click node_orders "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/OrdersHistory.jsx"
click node_auth "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/context/AuthContext.jsx"
click node_bookmarks "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Bookmarks.jsx"
click node_storage "https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/storageService.js"
click node_admin "https://github.com/phuongle2312/fandomverse-techwiz/tree/main/src/pages/admin"

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_chatbot,node_chatservice toneBlue
class node_home,node_category,node_detail,node_trailers,node_searchpage,node_search,node_categoryhook,node_browser toneAmber
class node_merch,node_cart,node_checkout,node_orders toneMint
class node_auth,node_bookmarks,node_storage toneRose
class node_data,node_admin,node_visitor,node_youtube toneIndigo
```

## Components

### App shell

- [Router and providers](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/App.jsx): `src/App.jsx`
- [Chatbot widget](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/components/interactive/ChatbotWidget.jsx): `src/components/interactive/ChatbotWidget.jsx`
- [Chatbot service](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/chatbotService.js): `src/services/chatbotService.js`

### Fandom discovery

- [Home](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Category hub](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/CategoryHub.jsx): `src/pages/CategoryHub.jsx`
- [Content detail](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/ContentDetail.jsx): `src/pages/ContentDetail.jsx`
- [Trailer hub](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/TrailersHub.jsx): `src/pages/TrailersHub.jsx`
- [Search results](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/SearchResults.jsx): `src/pages/SearchResults.jsx`
- [Search service](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/searchService.js): `src/services/searchService.js`
- [Category data hook](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/hooks/useCategoryData.js): `src/hooks/useCategoryData.js`

### Commerce

- [Merchandise](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Merchandise.jsx): `src/pages/Merchandise.jsx`
- [Cart state](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx`
- [Checkout](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Checkout.jsx): `src/pages/Checkout.jsx`
- [Order history](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/OrdersHistory.jsx): `src/pages/OrdersHistory.jsx`

### Accounts and saved items

- [Authentication state](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Bookmarks](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/pages/Bookmarks.jsx): `src/pages/Bookmarks.jsx`
- [Browser storage service](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/storageService.js): `src/services/storageService.js`

### Content operations

- [Data service](https://github.com/phuongle2312/fandomverse-techwiz/blob/main/src/services/dataService.js): `src/services/dataService.js`
- [Admin pages](https://github.com/phuongle2312/fandomverse-techwiz/tree/main/src/pages/admin): `src/pages/admin`

### Other components

- **Visitor**
- **Browser storage**
- **YouTube embeds**

## Connections

- Visitor → Router and providers: opens
- Router and providers → Home: routes
- Router and providers → Category hub: routes
- Router and providers → Content detail: routes
- Router and providers → Trailer hub: routes
- Router and providers → Search results: routes
- Router and providers → Merchandise: routes
- Router and providers → Checkout: routes
- Router and providers → Bookmarks: routes
- Router and providers → Order history: routes
- Router and providers → Admin pages: routes
- Category hub → Category data hook: loads data
- Category data hook → Data service: reads category
- Search results → Search service: searches
- Search service → Data service: scans records
- Chatbot widget → Chatbot service: requests replies
- Cart state → Browser storage service: persists cart
- Bookmarks → Browser storage service: persists saves
- Authentication state → Browser storage service: persists session
- Checkout → Browser storage service: records orders
- Order history → Browser storage service: loads orders
- Browser storage service → Browser storage: reads and writes
- Trailer hub → YouTube embeds: embeds videos