# jubayer608/artifacts-tracker-client-a11 architecture

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

- Interactive diagram: https://gitdiagram.com/jubayer608/artifacts-tracker-client-a11
- Repository: https://github.com/jubayer608/artifacts-tracker-client-a11

## Overview

1. This repository is the **frontend client** for “Historical Artifacts Tracker.” The tree contains a React application plus Firebase hosting/config files, but **no backend source code**. The README describes a separate backend stack (Express, MongoDB, Firebase Admin, JWT) that this client is expected to talk to.

2. The app is built with **React 19 + React Router v7** and bootstrapped through `src/main.jsx`, `src/App.jsx`, and `src/router/router.jsx`. Routing is the central composition layer: it decides which page module renders, and it likely wraps the app in shared providers and layout components.

3. There is a clear **app shell / layout boundary** in `src/RootLayout/RootLayout.jsx`, plus shared route-level concerns in `src/routes/TitleManager.jsx` and `src/routes/NotFound.jsx`. This suggests every page is rendered inside a consistent frame with document-title management and a fallback 404 route.

4. **Authentication is a major subsystem.** `src/firebase/firebase.init.js` initializes Firebase Auth, and `src/contexts/AuthContext/AuthProvider.jsx` + `AuthContext.jsx` expose auth state to the tree. `src/routes/PrivateRoute.jsx` enforces access to protected pages, and the README notes an HTTP-only JWT flow for secure access to private data/actions.

5. The protected user areas are clustered under `src/pages/ArtifactCrud` and include **add/update/manage/liked artifacts**. These pages represent the main “user-owned content” workflow: create artifact entries, edit them, and view liked or personal artifacts. This is the primary write-side of the app’s data model.

6. The public discovery side lives under `src/pages/Home`, `src/pages/Search`, `src/pages/ArtifactDetails`, `src/pages/Collections`, `src/pages/Compare`, `src/pages/Comparison`, and `src/pages/Timeline`. Together these modules cover browsing, filtering, detail views, collections, comparisons, and timeline-style exploration of artifacts.

7. The **Home page is highly sectionalized** rather than monolithic. It is composed from many small feature sections such as banner/slider, featured artifacts, reviews/testimonials, stats, newsletter, spotlight, recent items, and about content. This implies the landing experience is assembled from independent content blocks rather than a single feed.

8. Reusable presentation primitives live in `src/pages/Shared` and `src/components`. Notable shared components include `NavBar`, `Footer`, `ArtifactCard`, `SocialLogin`, `ThemeToggle`, `LoadingSpinner`, and `AdvancedSearch`. These are the cross-cutting UI building blocks used across multiple routes and feature pages.

9. **Theme management is another app-wide concern.** `src/contexts/ThemeContext.jsx` and its provider manage light/dark or theme-state behavior, and `ThemeToggle` is the user-facing control. This context likely wraps the entire app so theme state persists across routes.

10. The app’s external integrations are centered on **Firebase** and a separate **backend API**. Firebase handles authentication and hosting; the README says the backend uses JWT and Firebase Admin for token verification, so the client likely authenticates with Firebase, obtains/uses a token, then calls protected artifact endpoints.

11. Static assets are organized in `src/assets` by feature area (`banner`, `login`, `register`), which reinforces the page-centric structure. Styling is handled with **Tailwind CSS v4** plus **DaisyUI**, with additional animation support from **Framer Motion** and carousel behavior from **Swiper**.

12. Build and deployment are front-end focused: **Vite** is the dev/build tool, `firebase.json` and `.firebaserc` indicate deployment to **Firebase Hosting**, and `.firebase/` contains generated hosting cache/state. `eslint.config.js` and `tailwind.config.js` provide code-quality and styling configuration boundaries.

13. For an architecture diagram, the main flows are: **user enters app → router selects page → root layout/shared shell renders → auth/theme contexts provide global state → page modules fetch or mutate artifact data → private routes gate protected CRUD and liked-artifact screens → Firebase Hosting serves the built SPA**.

Main entry points: [`src/router/router.jsx`](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/router/router.jsx) (Router), [`src/pages/Shared/ArtifactCard.jsx`](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/ArtifactCard.jsx) (Artifact card), [`src/App.jsx`](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/App.jsx) (App), [`src/pages/Shared`](https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/pages/Shared) (Page shared)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_shell["App shell"]
  node_node_main["Entry<br/>bootstrap<br/>[main.jsx]"]
  node_node_app["App<br/>composition<br/>[App.jsx]"]
  node_node_router["Router<br/>routing<br/>[router.jsx]"]
  node_node_rootlayout["Root layout<br/>[RootLayout.jsx]"]
  node_node_privateroute["Private route<br/>guard<br/>[PrivateRoute.jsx]"]
  node_node_titlemanager["Title manager<br/>route utility<br/>[TitleManager.jsx]"]
  node_node_notfound["Not found<br/>fallback page<br/>[NotFound.jsx]"]
end

subgraph group_group_auth["Identity"]
  node_node_firebase["Firebase init<br/>firebase auth<br/>[firebase.init.js]"]
  node_node_authprovider["Auth provider<br/>context<br/>[AuthProvider.jsx]"]
  node_node_authcontext["Auth context<br/>[AuthContext.jsx]"]
  node_node_themeprovider["Theme provider<br/>context<br/>[ThemeProvider.jsx]"]
  node_node_themectx["Theme context<br/>[ThemeContext.jsx]"]
end

subgraph group_group_pages["Pages"]
  node_node_home["Home<br/>landing page<br/>[Home.jsx]"]
  node_node_search["Search<br/>discovery page<br/>[Search.jsx]"]
  node_node_details["Details<br/>detail page"]
  node_node_collections["Collections<br/>browse page"]
  node_node_compare["Compare<br/>comparison page"]
  node_node_timeline["Timeline<br/>exploration page"]
  node_node_crud{{"Artifact CRUD<br/>private section"}}
end

subgraph group_group_shared["Shared UI"]
  node_node_sharedui["Shared UI<br/>reusable components"]
  node_node_pageshared["Page shared<br/>shared page components"]
  node_node_navbar["NavBar<br/>navigation<br/>[NavBar.jsx]"]
  node_node_footer["Footer<br/>site chrome<br/>[Footer.jsx]"]
  node_node_artifactcard["Artifact card<br/>presentational card<br/>[ArtifactCard.jsx]"]
  node_node_sociallogin["Social login<br/>auth ui<br/>[SocialLogin.jsx]"]
  node_node_toggletheme(("Theme toggle<br/>theme control<br/>[ThemeToggle.jsx]"))
  node_node_advsearch["Advanced search<br/>search control<br/>[AdvancedSearch.jsx]"]
  node_node_spinner(("Spinner<br/>loading state<br/>[LoadingSpinner.jsx]"))
end

subgraph group_group_deploy["Build & deploy"]
  node_node_build["Vite build<br/>tooling<br/>[vite.config.js]"]
  node_node_firebasehost["Hosting config<br/>deployment<br/>[firebase.json]"]
  node_node_firestorec["Project config<br/>deployment<br/>[.firebaserc]"]
end

node_node_main -->|"boots"| node_node_app
node_node_app -->|"renders"| node_node_router
node_node_router -->|"wraps"| node_node_rootlayout
node_node_router -->|"route metadata"| node_node_titlemanager
node_node_router -->|"fallback"| node_node_notfound
node_node_router -->|"guards"| node_node_privateroute
node_node_rootlayout -->|"includes"| node_node_navbar
node_node_rootlayout -->|"includes"| node_node_footer
node_node_app -->|"provides auth"| node_node_authprovider
node_node_app -->|"provides theme"| node_node_themeprovider
node_node_authprovider -->|"uses"| node_node_firebase
node_node_authprovider -->|"exports"| node_node_authcontext
node_node_themeprovider -->|"exports"| node_node_themectx
node_node_themeprovider -->|"drives"| node_node_toggletheme
node_node_home -->|"uses"| node_node_artifactcard
node_node_home -->|"uses"| node_node_spinner
node_node_search -->|"uses"| node_node_advsearch
node_node_details -->|"relates"| node_node_artifactcard
node_node_collections -->|"uses"| node_node_artifactcard
node_node_compare -->|"compares"| node_node_artifactcard
node_node_crud -->|"edits"| node_node_artifactcard
node_node_crud -->|"auth entry"| node_node_sociallogin
node_node_sharedui -->|"contains"| node_node_spinner
node_node_sharedui -->|"contains"| node_node_advsearch
node_node_pageshared -->|"contains"| node_node_navbar
node_node_pageshared -->|"contains"| node_node_footer
node_node_pageshared -->|"contains"| node_node_sociallogin
node_node_main -->|"built by"| node_node_build
node_node_build -->|"deploys to"| node_node_firebasehost
node_node_firebasehost -->|"configured by"| node_node_firestorec

click node_node_main "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/main.jsx"
click node_node_app "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/App.jsx"
click node_node_router "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/router/router.jsx"
click node_node_rootlayout "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/RootLayout/RootLayout.jsx"
click node_node_privateroute "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/PrivateRoute.jsx"
click node_node_titlemanager "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/TitleManager.jsx"
click node_node_notfound "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/NotFound.jsx"
click node_node_firebase "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/firebase/firebase.init.js"
click node_node_authprovider "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/AuthContext/AuthProvider.jsx"
click node_node_authcontext "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/AuthContext/AuthContext.jsx"
click node_node_themeprovider "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/ThemeContext/ThemeProvider.jsx"
click node_node_themectx "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/ThemeContext/ThemeContext.jsx"
click node_node_home "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Home/Home.jsx"
click node_node_search "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Search/Search.jsx"
click node_node_details "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/ArtifactDetails/ArtifactDetails.jsx"
click node_node_collections "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Collections/CollectionsPage.jsx"
click node_node_compare "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Compare/CompareArtifacts.jsx"
click node_node_timeline "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Timeline/ArtifactTimeline.jsx"
click node_node_crud "https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/pages/ArtifactCrud"
click node_node_sharedui "https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/components"
click node_node_pageshared "https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/pages/Shared"
click node_node_navbar "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/NavBar.jsx"
click node_node_footer "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/Footer.jsx"
click node_node_artifactcard "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/ArtifactCard.jsx"
click node_node_sociallogin "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/SocialLogin.jsx"
click node_node_toggletheme "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/ThemeToggle.jsx"
click node_node_advsearch "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/AdvancedSearch.jsx"
click node_node_spinner "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/LoadingSpinner.jsx"
click node_node_build "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/vite.config.js"
click node_node_firebasehost "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/firebase.json"
click node_node_firestorec "https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/.firebaserc"

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_node_main,node_node_app,node_node_router,node_node_rootlayout,node_node_privateroute,node_node_titlemanager,node_node_notfound toneBlue
class node_node_firebase,node_node_authprovider,node_node_authcontext,node_node_themeprovider,node_node_themectx toneAmber
class node_node_home,node_node_search,node_node_details,node_node_collections,node_node_compare,node_node_timeline,node_node_crud toneMint
class node_node_sharedui,node_node_pageshared,node_node_navbar,node_node_footer,node_node_artifactcard,node_node_sociallogin,node_node_toggletheme,node_node_advsearch,node_node_spinner toneRose
class node_node_build,node_node_firebasehost,node_node_firestorec toneIndigo
```

## Components

### App shell

Bootstrap, routing, layout, and route guards.

- [Entry](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/main.jsx): bootstrap · Application entry point that mounts the React tree. · `src/main.jsx`
- [App](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/App.jsx): composition · Top-level app composition and global wiring. · `src/App.jsx`
- [Router](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/router/router.jsx): routing · Route table and page selection logic. · `src/router/router.jsx`
- [Root layout](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/RootLayout/RootLayout.jsx): layout · Shared app shell around routed pages. · `src/RootLayout/RootLayout.jsx`
- [Private route](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/PrivateRoute.jsx): guard · Protects authenticated routes and private screens. · `src/routes/PrivateRoute.jsx`
- [Title manager](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/TitleManager.jsx): route utility · Manages document title or other route-level metadata. · `src/routes/TitleManager.jsx`
- [Not found](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/routes/NotFound.jsx): fallback page · 404 route fallback for unmatched paths. · `src/routes/NotFound.jsx`

### Identity

Authentication, theme state, and Firebase integration.

- [Firebase init](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/firebase/firebase.init.js): firebase auth · Initializes Firebase authentication client state. · `src/firebase/firebase.init.js`
- [Auth provider](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/AuthContext/AuthProvider.jsx): context · Provides authentication state and actions to the app. · `src/contexts/AuthContext/AuthProvider.jsx`
- [Auth context](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/AuthContext/AuthContext.jsx): context · Shared auth context definition and access hook. · `src/contexts/AuthContext/AuthContext.jsx`
- [Theme provider](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/ThemeContext/ThemeProvider.jsx): context · Provides theme state across the UI. · `src/contexts/ThemeContext/ThemeProvider.jsx`
- [Theme context](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/contexts/ThemeContext/ThemeContext.jsx): context · Theme context definition and access hook. · `src/contexts/ThemeContext/ThemeContext.jsx`

### Pages

Primary user-facing route modules for browsing and CRUD.

- [Home](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Home/Home.jsx): landing page · Public landing page assembled from many content sections. · `src/pages/Home/Home.jsx`
- [Search](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Search/Search.jsx): discovery page · Search and filtering experience for artifacts. · `src/pages/Search/Search.jsx`
- [Details](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/ArtifactDetails/ArtifactDetails.jsx): detail page · Artifact detail view and related interactions. · `src/pages/ArtifactDetails/ArtifactDetails.jsx`
- [Collections](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Collections/CollectionsPage.jsx): browse page · Collection-oriented artifact browsing. · `src/pages/Collections/CollectionsPage.jsx`
- [Compare](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Compare/CompareArtifacts.jsx): comparison page · Side-by-side artifact comparison screen. · `src/pages/Compare/CompareArtifacts.jsx`
- [Timeline](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Timeline/ArtifactTimeline.jsx): exploration page · Chronological artifact exploration view. · `src/pages/Timeline/ArtifactTimeline.jsx`
- [Artifact CRUD](https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/pages/ArtifactCrud): private section · Protected create, update, and user-owned artifact screens. · `src/pages/ArtifactCrud`

### Shared UI

Reusable UI primitives used across routes and sections.

- [Shared UI](https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/components): reusable components · Cross-cutting UI primitives used across routes. · `src/components`
- [Page shared](https://github.com/jubayer608/artifacts-tracker-client-a11/tree/main/src/pages/Shared): shared page components · Shared route-level UI used by page modules. · `src/pages/Shared`
- [NavBar](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/NavBar.jsx): navigation · Primary site navigation. · `src/pages/Shared/NavBar.jsx`
- [Footer](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/Footer.jsx): site chrome · Global footer displayed across the app shell. · `src/pages/Shared/Footer.jsx`
- [Artifact card](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/ArtifactCard.jsx): presentational card · Reusable artifact summary card. · `src/pages/Shared/ArtifactCard.jsx`
- [Social login](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/pages/Shared/SocialLogin.jsx): auth ui · Authentication UI for social sign-in. · `src/pages/Shared/SocialLogin.jsx`
- [Theme toggle](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/ThemeToggle.jsx): theme control · User-facing theme switch control. · `src/components/ThemeToggle.jsx`
- [Advanced search](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/AdvancedSearch.jsx): search control · Enhanced search/filtering component. · `src/components/AdvancedSearch.jsx`
- [Spinner](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/src/components/LoadingSpinner.jsx): loading state · Shared loading indicator. · `src/components/LoadingSpinner.jsx`

### Build & deploy

Frontend build and Firebase Hosting configuration.

- [Vite build](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/vite.config.js): tooling · Frontend dev and build tooling. · `vite.config.js`
- [Hosting config](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/firebase.json): deployment · Firebase Hosting configuration and deployment state. · `firebase.json`
- [Project config](https://github.com/jubayer608/artifacts-tracker-client-a11/blob/main/.firebaserc): deployment · Firebase project targeting configuration. · `.firebaserc`

## Connections

- Entry → App: boots · Entry mounts the application root.
- App → Router: renders · App delegates screen selection to the router.
- Router → Root layout: wraps · Most routes render inside the shared layout.
- Router → Title manager: route metadata · Routes coordinate title updates.
- Router → Not found: fallback · Unmatched paths go to the 404 screen.
- Router → Private route: guards · Protected routes are wrapped in the auth gate.
- Root layout → NavBar: includes · The shell uses global navigation.
- Root layout → Footer: includes · The shell uses the shared footer.
- App → Auth provider: provides auth · Auth context is available across the tree.
- App → Theme provider: provides theme · Theme state is available across the tree.
- Auth provider → Firebase init: uses · Auth provider depends on Firebase auth initialization.
- Auth provider → Auth context: exports · Context implementation is exposed to consumers.
- Theme provider → Theme context: exports · Theme context implementation is exposed to consumers.
- Theme provider → Theme toggle: drives · Theme toggle controls provider state.
- Home → Artifact card: uses · Landing sections surface artifacts via cards.
- Home → Spinner: uses · Home sections may show loading state.
- Search → Advanced search: uses · Search page relies on advanced search controls.
- Details → Artifact card: relates · Detail screens connect to artifact summaries and related items.
- Collections → Artifact card: uses · Collections present artifacts in card form.
- Compare → Artifact card: compares · Comparison views likely reuse artifact summaries.
- Artifact CRUD → Artifact card: edits · CRUD views operate on artifact entities.
- Artifact CRUD → Social login: auth entry · Protected flows can connect to login options.
- Shared UI → Spinner: contains · Shared UI includes loading indicators.
- Shared UI → Advanced search: contains · Shared UI includes advanced search controls.
- Page shared → NavBar: contains · Shared page chrome includes navigation.
- Page shared → Footer: contains · Shared page chrome includes footer.
- Page shared → Social login: contains · Shared page chrome includes social auth UI.
- Entry → Vite build: built by · The app is bundled with Vite.
- Vite build → Hosting config: deploys to · Built assets are hosted on Firebase Hosting.
- Hosting config → Project config: configured by · Hosting targets are linked to the Firebase project config.