# singhgemsaman/sprints-and-outsource-projects architecture

> Architecture diagram of the GitHub repository singhgemsaman/sprints-and-outsource-projects, 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/singhgemsaman/sprints-and-outsource-projects
- Repository: https://github.com/singhgemsaman/sprints-and-outsource-projects

## Overview

1. This repository is not one app; it is a collection of standalone front-end deliverables organized by sprint and phase. The architecture is evolutionary: early folders are static HTML/CSS/JS prototypes, while later folders introduce build tooling, CSS generation, and a React/Vite application.

2. The simplest boundary is the “static site” tier: `Phase_1`, `phase_2`, `phase_3`, `Outsorce_Portfolio`, and several `Sprint_*/*Phase*` folders contain `index.html`, CSS, and a small `main.js`. These are self-contained browser apps with direct DOM scripting and no obvious shared runtime.

3. A second tier uses a CSS build pipeline. In `Sprint_2/Phase_1-3` and `Sprint_3/Phase1-3`, the presence of `package.json`, `src/input.css`, and generated `src/output.css` indicates a Tailwind/PostCSS-style workflow where source styles are compiled into distributable CSS. The app logic still lives in `main.js`, but styling is produced through a build step instead of hand-authored CSS only.

4. The most complete subsystem is `Sprint_3/Outsourced(Veridian-gallery)`, which is a React application built with Vite. `src/main.jsx` is the entry point, `App.jsx` is the composition root, and `vite.config.js` plus `eslint.config.js` show a modern SPA toolchain.

5. In the gallery app, the UI is split into reusable components and page-level views. Components such as `Navbar`, `Footer`, `ArtworkCard`, and `SkeletonLoader` handle shared layout, card rendering, and loading states. Page modules such as `ArtistDirectory`, `ArtistPortfolio`, `ExhibitionHall`, `Wishlist`, `Contact`, and `NotFound` represent the major navigable screens.

6. Data and state are separated from presentation in that React app. `src/data/exhibitions.js` provides local content, `src/hooks/useArtists.js` and `src/hooks/useArtworks.js` encapsulate data retrieval and related state, and `src/context/PatronWishlistContext.jsx` holds client-side wishlist state across pages. `useDocumentTitle.js` is a small cross-cutting hook for page metadata.

7. The gallery app’s data flow is typical SPA flow: entry point mounts the app, the app renders navigation and page shells, hooks fetch or derive artist/artwork data, context stores wishlist selections, and presentational components render cards and loading skeletons. The boundaries are cleanly split between UI, data fetching, and shared state.

8. Styling in the gallery app is modularized alongside components and pages. Each component/page has its own CSS file, with global styling in `src/index.css` and app-level styling in `src/App.css`, which makes the visual system easy to diagram as shared shell styles plus feature-specific styles.

9. `Sprint_4` appears to be a separate Vite-based browser app focused on document parsing. The presence of `src/pdfParser.js` suggests a distinct parsing/processing layer isolated from the main UI in `src/main.js`, with `src/style.css` handling presentation. This is a clear example of logic split between parsing and interface layers.

10. The repo also contains deployment and quality artifacts rather than runtime code: the README links to a Netlify-hosted version of a sprint build, and the screenshot folder stores desktop/mobile/audit images for documentation or validation. These are supporting assets, not part of the runtime architecture.

11. From an architecture-diagram perspective, the main repeating patterns are: static pages; CSS-build pages; React SPA with hooks/context/components; and a document-processing app with a dedicated parser module. The important boundaries are between source and generated CSS, between presentation and shared state, and between UI and domain-specific processing logic.

Main entry points: [`Sprint_3/Outsourced(Veridian-gallery)/src/App.jsx`](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/App.jsx) (App shell), [`Sprint_3/Outsourced(Veridian-gallery)/src/pages/ArtistDirectory.jsx`](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/pages/ArtistDirectory.jsx) (Pages), [`Phase_1/index.html`](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/index.html) (Phase 1), [`phase_2/index.html`](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/index.html) (Phase 2)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_static["Static sites"]
  node_phase1_root["Phase 1<br/>static site<br/>[index.html]"]
  node_phase1_script["DOM script<br/>browser logic<br/>[main.js]"]
  node_phase1_css["Phase 1 style<br/>stylesheet<br/>[style.css]"]
  node_phase2_root["Phase 2<br/>static site<br/>[index.html]"]
  node_phase2_script["DOM script<br/>browser logic<br/>[main.js]"]
  node_phase2_css["Theme CSS<br/>stylesheet<br/>[style.css]"]
  node_outsource_portfolio["Portfolio site<br/>static site<br/>[index.html]"]
  node_outsource_style["Portfolio CSS<br/>stylesheet<br/>[style.css]"]
end

subgraph group_buildcss["CSS build tier"]
  node_s2_phase1["Sprint 2 P1<br/>css-build app<br/>[index.html]"]
  node_s2_phase1_style["CSS source<br/>style source<br/>[input.css]"]
  node_s2_phase1_script["Main script<br/>browser logic<br/>[main.js]"]
  node_s2_phase3["Sprint 2 P3<br/>css-build app<br/>[index.html]"]
end

subgraph group_reactspa["React SPA"]
  node_s3_gallery_root["Gallery app<br/>react spa<br/>[main.jsx]"]
  node_s3_app["App shell<br/>react root<br/>[App.jsx]"]
  node_s3_components["UI components<br/>react components<br/>[Navbar.jsx]"]
  node_s3_pages["Pages<br/>react views"]
  node_s3_state["Wishlist state<br/>context state"]
  node_s3_hooks["Data hooks<br/>react hooks<br/>[useArtists.js]"]
  node_s3_data["Exhibitions data<br/>local data<br/>[exhibitions.js]"]
end

subgraph group_parserapp["Parser app"]
  node_s4_root["Parser app<br/>vite app<br/>[main.js]"]
  node_s4_parser["PDF parser<br/>parser module<br/>[pdfParser.js]"]
  node_s4_style["App style<br/>stylesheet<br/>[style.css]"]
end

subgraph group_support["Supporting assets"]
  node_readme["README<br/>docs<br/>[README.md]"]
  node_screenshot[("Screenshots<br/>asset set")]
end

node_phase1_root -->|"loads"| node_phase1_script
node_phase1_root -->|"styles"| node_phase1_css
node_phase2_root -->|"loads"| node_phase2_script
node_phase2_root -->|"styles"| node_phase2_css
node_outsource_portfolio -->|"styles"| node_outsource_style
node_s2_phase1 -->|"builds CSS"| node_s2_phase1_style
node_s2_phase1 -->|"runs"| node_s2_phase1_script
node_s2_phase3 -->|"builds CSS"| node_s2_phase1_style
node_s3_gallery_root -->|"mounts"| node_s3_app
node_s3_app -->|"uses"| node_s3_components
node_s3_app -->|"renders"| node_s3_pages
node_s3_app -->|"shares state"| node_s3_state
node_s3_app -->|"depends on"| node_s3_hooks
node_s3_hooks -->|"reads"| node_s3_data
node_s3_pages -->|"reuses"| node_s3_components
node_s3_pages -->|"consumes"| node_s3_state
node_s4_root -->|"processes"| node_s4_parser
node_s4_root -->|"styles"| node_s4_style
node_readme -.->|"documents"| node_s3_gallery_root
node_readme -.->|"references"| node_screenshot

click node_phase1_root "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/index.html"
click node_phase1_script "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/scripts/main.js"
click node_phase1_css "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/css/style.css"
click node_phase2_root "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/index.html"
click node_phase2_script "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/scripts/main.js"
click node_phase2_css "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/css/style.css"
click node_outsource_portfolio "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Outsorce_Portfolio/index.html"
click node_outsource_style "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Outsorce_Portfolio/style.css"
click node_s2_phase1 "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/index.html"
click node_s2_phase1_style "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/src/input.css"
click node_s2_phase1_script "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/main.js"
click node_s2_phase3 "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_3/index.html"
click node_s3_gallery_root "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/main.jsx"
click node_s3_app "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/App.jsx"
click node_s3_components "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/components/Navbar.jsx"
click node_s3_pages "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/pages/ArtistDirectory.jsx"
click node_s3_state "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/context/PatronWishlistContext.jsx"
click node_s3_hooks "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/hooks/useArtists.js"
click node_s3_data "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/data/exhibitions.js"
click node_s4_root "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/main.js"
click node_s4_parser "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/pdfParser.js"
click node_s4_style "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/style.css"
click node_readme "https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/README.md"
click node_screenshot "https://github.com/singhgemsaman/sprints-and-outsource-projects/tree/main/screenshot"

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_phase1_root,node_phase1_script,node_phase1_css,node_phase2_root,node_phase2_script,node_phase2_css,node_outsource_portfolio,node_outsource_style toneBlue
class node_s2_phase1,node_s2_phase1_style,node_s2_phase1_script,node_s2_phase3 toneAmber
class node_s3_gallery_root,node_s3_app,node_s3_components,node_s3_pages,node_s3_state,node_s3_hooks,node_s3_data toneMint
class node_s4_root,node_s4_parser,node_s4_style toneRose
class node_readme,node_screenshot toneIndigo
```

## Components

### Static sites

Standalone HTML/CSS/JS deliverables with direct DOM scripting.

- [Phase 1](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/index.html): static site · Early standalone browser deliverable. · `Phase_1/index.html`
- [DOM script](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/scripts/main.js): browser logic · Direct client-side behavior for the Phase 1 site. · `Phase_1/scripts/main.js`
- [Phase 1 style](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Phase_1/css/style.css): stylesheet · Hand-authored styling for the Phase 1 site. · `Phase_1/css/style.css`
- [Phase 2](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/index.html): static site · Standalone browser deliverable with multiple style modules. · `phase_2/index.html`
- [DOM script](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/scripts/main.js): browser logic · Client-side behavior for the Phase 2 site. · `phase_2/scripts/main.js`
- [Theme CSS](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/phase_2/css/style.css): stylesheet · Core style, responsive rules, and animation/theme layers. · `phase_2/css/style.css`
- [Portfolio site](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Outsorce_Portfolio/index.html): static site · Self-contained portfolio deliverable. · `Outsorce_Portfolio/index.html`
- [Portfolio CSS](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Outsorce_Portfolio/style.css): stylesheet · Standalone styling for the portfolio site. · `Outsorce_Portfolio/style.css`

### CSS build tier

Browser apps that compile source CSS into distributable output CSS.

- [Sprint 2 P1](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/index.html): css-build app · Phase app with source CSS compiled into output CSS. · `Sprint_2/Phase_1/index.html`
- [CSS source](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/src/input.css): style source · Input CSS compiled into distributable output CSS. · `Sprint_2/Phase_1/src/input.css`
- [Main script](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_1/main.js): browser logic · Client-side behavior for the Sprint 2 Phase 1 app. · `Sprint_2/Phase_1/main.js`
- [Sprint 2 P3](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_2/Phase_3/index.html): css-build app · Later Sprint 2 phase with the same source-to-output CSS flow. · `Sprint_2/Phase_3/index.html`

### React SPA

Vite-based gallery application with components, hooks, and context.

- [Gallery app](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/main.jsx): react spa · Vite-built Veridian gallery application. · `Sprint_3/Outsourced(Veridian-gallery)/src/main.jsx`
- [App shell](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/App.jsx): react root · Composition root for routes, layout, and feature wiring. · `Sprint_3/Outsourced(Veridian-gallery)/src/App.jsx`
- [UI components](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/components/Navbar.jsx): react components · Shared presentation pieces for navigation, cards, footer, and loading states. · `Sprint_3/Outsourced(Veridian-gallery)/src/components/Navbar.jsx`
- [Pages](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/pages/ArtistDirectory.jsx): react views · Major navigable screens in the gallery application. · `Sprint_3/Outsourced(Veridian-gallery)/src/pages/ArtistDirectory.jsx`
- [Wishlist state](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/context/PatronWishlistContext.jsx): context state · Client-side shared wishlist context. · `Sprint_3/Outsourced(Veridian-gallery)/src/context/PatronWishlistContext.jsx`
- [Data hooks](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/hooks/useArtists.js): react hooks · Hooks for artists, artworks, and document title management. · `Sprint_3/Outsourced(Veridian-gallery)/src/hooks/useArtists.js`
- [Exhibitions data](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_3/Outsourced(Veridian-gallery)/src/data/exhibitions.js): local data · Static data used by the gallery app. · `Sprint_3/Outsourced(Veridian-gallery)/src/data/exhibitions.js`

### Parser app

Document-processing Vite app with dedicated parsing logic.

- [Parser app](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/main.js): vite app · Separate Vite-based browser app focused on parsing. · `Sprint_4/src/main.js`
- [PDF parser](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/pdfParser.js): parser module · Dedicated document parsing and processing logic. · `Sprint_4/src/pdfParser.js`
- [App style](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/Sprint_4/src/style.css): stylesheet · Presentation layer for the parser app. · `Sprint_4/src/style.css`

### Supporting assets

Documentation and screenshots that support delivery and validation.

- [README](https://github.com/singhgemsaman/sprints-and-outsource-projects/blob/main/README.md): docs · Repository overview and deployment notes. · `README.md`
- [Screenshots](https://github.com/singhgemsaman/sprints-and-outsource-projects/tree/main/screenshot): asset set · Documentation and validation images. · `screenshot`

## Connections

- Phase 1 → DOM script: loads · HTML boots the browser script.
- Phase 1 → Phase 1 style: styles · Page pulls in its stylesheet.
- Phase 2 → DOM script: loads · HTML boots the browser script.
- Phase 2 → Theme CSS: styles · Page uses the shared theme and responsive CSS.
- Portfolio site → Portfolio CSS: styles · Portfolio HTML uses its standalone stylesheet.
- Sprint 2 P1 → CSS source: builds CSS · Source CSS compiles to output CSS.
- Sprint 2 P1 → Main script: runs · Main script drives browser behavior.
- Sprint 2 P3 → CSS source: builds CSS · Same source-to-output CSS pattern as other build-tier phases.
- Gallery app → App shell: mounts · React entry mounts the app shell.
- App shell → UI components: uses · App shell composes shared UI components.
- App shell → Pages: renders · App shell switches between page views.
- App shell → Wishlist state: shares state · Wishlist context is provided across the app.
- App shell → Data hooks: depends on · Feature hooks feed data and metadata into the UI.
- Data hooks → Exhibitions data: reads · Hooks consume local exhibition data.
- Pages → UI components: reuses · Pages reuse shared presentation components.
- Pages → Wishlist state: consumes · Pages read and update wishlist state.
- Parser app → PDF parser: processes · Main UI coordinates document parsing.
- Parser app → App style: styles · App presentation is separated into CSS.
- README → Gallery app: documents · Repository docs reference the gallery build and delivery.
- README → Screenshots: references · Docs and validation assets support the project.