# shan-fsd/projects architecture

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

- Interactive diagram: https://gitdiagram.com/shan-fsd/projects
- Repository: https://github.com/shan-fsd/projects

## Overview

This is a React storefront and editorial landing page for Shan Atelier, a parent-facing maker of seasonal children’s play editions. Visitors explore the atelier’s approach, age guidance, stories, and plan options, then can open a reservation flow. The sampled source shows client-side UI state and static content, but no payment, order-processing, or external service integration; the reservation form’s submission behavior is not established by the excerpts.

Main entry points: [`src/content.ts`](https://github.com/shan-fsd/projects/blob/main/src/content.ts) (Season and plan content), [`src/App.tsx`](https://github.com/shan-fsd/projects/blob/main/src/App.tsx) (Page and UI state), [`src/main.tsx`](https://github.com/shan-fsd/projects/blob/main/src/main.tsx) (React bootstrap), [`src/index.css`](https://github.com/shan-fsd/projects/blob/main/src/index.css) (Global styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_main["React bootstrap<br/>[main.tsx]"]
  node_styles["Global styles<br/>[index.css]"]
  node_classnames["Class merging<br/>[cn.ts]"]
end

subgraph group_experience["Storefront experience"]
  node_app["Page and UI state<br/>[App.tsx]"]
  node_atelier["Atelier feature<br/>[App.tsx]"]
  node_ageguide["Age guide<br/>[App.tsx]"]
  node_stories["Parent stories<br/>[App.tsx]"]
  node_plans["Plan selection<br/>[App.tsx]"]
end

subgraph group_content["Product content"]
  node_contentdata["Season and plan content<br/>[content.ts]"]
end

subgraph group_reservation["Reservation flow"]
  node_reserveform["Reservation form<br/>[App.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_main
node_main -->|"renders"| node_app
node_main -->|"loads"| node_styles
node_app -->|"reads content"| node_contentdata
node_atelier -->|"shows features"| node_contentdata
node_ageguide -->|"shows age guidance"| node_contentdata
node_stories -->|"shows testimonials"| node_contentdata
node_plans -->|"shows plans"| node_contentdata
node_app -->|"opens reservation"| node_reserveform
node_app -->|"merges classes"| node_classnames

click node_main "https://github.com/shan-fsd/projects/blob/main/src/main.tsx"
click node_app "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_atelier "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_ageguide "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_stories "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_plans "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_reserveform "https://github.com/shan-fsd/projects/blob/main/src/App.tsx"
click node_contentdata "https://github.com/shan-fsd/projects/blob/main/src/content.ts"
click node_styles "https://github.com/shan-fsd/projects/blob/main/src/index.css"
click node_classnames "https://github.com/shan-fsd/projects/blob/main/src/utils/cn.ts"

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_main,node_styles,node_classnames toneBlue
class node_app,node_atelier,node_ageguide,node_stories,node_plans toneAmber
class node_contentdata toneMint
class node_reserveform toneRose
class node_visitor toneIndigo
```

## Components

### Application entry

- [React bootstrap](https://github.com/shan-fsd/projects/blob/main/src/main.tsx): `src/main.tsx`
- [Global styles](https://github.com/shan-fsd/projects/blob/main/src/index.css): `src/index.css`
- [Class merging](https://github.com/shan-fsd/projects/blob/main/src/utils/cn.ts): `src/utils/cn.ts`

### Storefront experience

- [Page and UI state](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`
- [Atelier feature](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`
- [Age guide](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`
- [Parent stories](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`
- [Plan selection](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`

### Product content

- [Season and plan content](https://github.com/shan-fsd/projects/blob/main/src/content.ts): `src/content.ts`

### Reservation flow

- [Reservation form](https://github.com/shan-fsd/projects/blob/main/src/App.tsx): `src/App.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → React bootstrap: opens
- React bootstrap → Page and UI state: renders
- React bootstrap → Global styles: loads
- Page and UI state → Season and plan content: reads content
- Atelier feature → Season and plan content: shows features
- Age guide → Season and plan content: shows age guidance
- Parent stories → Season and plan content: shows testimonials
- Plan selection → Season and plan content: shows plans
- Page and UI state → Reservation form: opens reservation
- Page and UI state → Class merging: merges classes