# twistandtanglecrochet/new-site architecture

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

- Interactive diagram: https://gitdiagram.com/twistandtanglecrochet/new-site
- Repository: https://github.com/twistandtanglecrochet/new-site

## Overview

Twist & Tangle Crochet is a handmade-crochet storefront. Shoppers browse and filter the catalog, inspect products, manage a cart or buy-now selection, and can submit product reviews; the app loads live catalog and review data from Firestore. A separate admin page supports catalog management, though its implementation is not sampled. The tree and excerpts support these main flows, but not the exact checkout or admin operations, so those connections are left unspecified.

Main entry points: [`src/App.jsx`](https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx) (Storefront app), [`src/firebase.js`](https://github.com/twistandtanglecrochet/new-site/blob/main/src/firebase.js) (Firebase client), [`src/main.jsx`](https://github.com/twistandtanglecrochet/new-site/blob/main/src/main.jsx) (React entry), [`public/admin.html`](https://github.com/twistandtanglecrochet/new-site/blob/main/public/admin.html) (Admin portal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_app["Storefront app<br/>[App.jsx]"]
  node_entry["React entry<br/>[main.jsx]"]
  node_cart["Cart and purchase<br/>[App.jsx]"]
  node_reviews["Product reviews<br/>[App.jsx]"]
  node_social["Social links<br/>[App.jsx]"]
end

subgraph group_catalog["Catalog data"]
  node_seed["Starter catalog<br/>[products.js]"]
  node_site["Site settings<br/>[siteConfig.js]"]
  node_images["Brand images<br/>[siteImages.js]"]
  node_colors["Brand palette<br/>[colors.js]"]
  node_slugs["Category slugs<br/>[slug.js]"]
end

subgraph group_backend["Backend"]
  node_firebase["Firebase client<br/>[firebase.js]"]
  node_firebaseconfig["Firebase settings<br/>[firebaseConfig.js]"]
  node_firestore[("Firestore")]
end

subgraph group_admin["Administration"]
  node_adminpage["Admin portal<br/>[admin.html]"]
end

node_shopper(("Shopper"))
node_socialservices(("Social platforms"))

node_shopper -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_shopper -->|"browses"| node_app
node_app -->|"uses starter data"| node_seed
node_app -->|"uses settings"| node_site
node_app -->|"uses images"| node_images
node_app -->|"uses palette"| node_colors
node_app -->|"creates category links"| node_slugs
node_app -->|"manages selection"| node_cart
node_shopper -->|"submits review"| node_reviews
node_app -->|"shows reviews"| node_reviews
node_reviews -->|"reads and writes"| node_firestore
node_app -->|"streams products"| node_firestore
node_app -->|"uses database client"| node_firebase
node_firebase -->|"loads settings"| node_firebaseconfig
node_firebase -->|"connects"| node_firestore
node_adminpage -.->|"catalog administration"| node_firestore
node_shopper -->|"follows links"| node_social
node_social -->|"opens"| node_socialservices

click node_app "https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx"
click node_entry "https://github.com/twistandtanglecrochet/new-site/blob/main/src/main.jsx"
click node_cart "https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx"
click node_reviews "https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx"
click node_social "https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx"
click node_seed "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/products.js"
click node_site "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/siteConfig.js"
click node_images "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/siteImages.js"
click node_colors "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/colors.js"
click node_slugs "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/slug.js"
click node_firebase "https://github.com/twistandtanglecrochet/new-site/blob/main/src/firebase.js"
click node_firebaseconfig "https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/firebaseConfig.js"
click node_adminpage "https://github.com/twistandtanglecrochet/new-site/blob/main/public/admin.html"

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_entry,node_cart,node_reviews,node_social toneBlue
class node_seed,node_site,node_images,node_colors,node_slugs toneAmber
class node_firebase,node_firebaseconfig,node_firestore toneMint
class node_adminpage toneRose
class node_shopper,node_socialservices toneIndigo
```

## Components

### Storefront

- [Storefront app](https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx): `src/App.jsx`
- [React entry](https://github.com/twistandtanglecrochet/new-site/blob/main/src/main.jsx): `src/main.jsx`
- [Cart and purchase](https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx): `src/App.jsx`
- [Product reviews](https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx): `src/App.jsx`
- [Social links](https://github.com/twistandtanglecrochet/new-site/blob/main/src/App.jsx): `src/App.jsx`

### Catalog data

- [Starter catalog](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/products.js): `src/data/products.js`
- [Site settings](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/siteConfig.js): `src/data/siteConfig.js`
- [Brand images](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/siteImages.js): `src/data/siteImages.js`
- [Brand palette](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/colors.js): `src/data/colors.js`
- [Category slugs](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/slug.js): `src/data/slug.js`

### Backend

- [Firebase client](https://github.com/twistandtanglecrochet/new-site/blob/main/src/firebase.js): `src/firebase.js`
- [Firebase settings](https://github.com/twistandtanglecrochet/new-site/blob/main/src/data/firebaseConfig.js): `src/data/firebaseConfig.js`
- **Firestore**

### Administration

- [Admin portal](https://github.com/twistandtanglecrochet/new-site/blob/main/public/admin.html): `public/admin.html`

### Other components

- **Shopper**
- **Social platforms**

## Connections

- Shopper → React entry: opens site
- React entry → Storefront app: renders
- Shopper → Storefront app: browses
- Storefront app → Starter catalog: uses starter data
- Storefront app → Site settings: uses settings
- Storefront app → Brand images: uses images
- Storefront app → Brand palette: uses palette
- Storefront app → Category slugs: creates category links
- Storefront app → Cart and purchase: manages selection
- Shopper → Product reviews: submits review
- Storefront app → Product reviews: shows reviews
- Product reviews → Firestore: reads and writes
- Storefront app → Firestore: streams products
- Storefront app → Firebase client: uses database client
- Firebase client → Firebase settings: loads settings
- Firebase client → Firestore: connects
- Admin portal → Firestore: catalog administration
- Shopper → Social links: follows links
- Social links → Social platforms: opens