# yoshi-ko1/s.a.n.g.k.a.p architecture

> Architecture diagram of the GitHub repository yoshi-ko1/s.a.n.g.k.a.p, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/yoshi-ko1/s.a.n.g.k.a.p
- Repository: https://github.com/yoshi-ko1/s.a.n.g.k.a.p

## Overview

S.A.N.G.K.A.P. is a recipe-discovery and community website: visitors browse and search recipes, compare ingredients with a shopping basket, then view details and rate or save recipes; signed-in users can contribute recipes and profiles. The browser modules implement discovery, recommendations, community, basket, and account features. Data can use the browser prototype store or the SQL Server API; the sampled server excerpt confirms routing and upload handling but not all endpoint-to-table relationships, so those are not expanded here.

Main entry points: [`index.html`](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/index.html) (Website Pages), [`js/database.js`](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/database.js) (Browser Data), [`js/recipe-details.js`](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recipe-details.js) (Recipe Details), [`js/api.js`](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/api.js) (API Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Recipe Website"]
  node_pages["Website Pages<br/>[index.html]"]
  node_shared["Shared Interface<br/>[app.js]"]
end

subgraph group_features["Recipe Features"]
  node_discovery["Recipe Search<br/>[recipes.js]"]
  node_home["Home Feed<br/>[home.js]"]
  node_featured["Featured Recipes<br/>[featured.js]"]
  node_recommendations["Ingredient Matching<br/>[recommendation.js]"]
  node_details["Recipe Details<br/>[recipe-details.js]"]
  node_basket["Shopping Basket<br/>[basket.js]"]
  node_community["Community Recipes<br/>[community.js]"]
  node_ratings["Ratings<br/>[ratings.js]"]
  node_favorites["Favorites<br/>[favorites.js]"]
  node_profile["User Profile<br/>[profile.js]"]
  node_auth["Authentication<br/>[auth.js]"]
  node_upload["Image Upload<br/>[upload.js]"]
end

subgraph group_data["Data Services"]
  node_browserdb[("Browser Data<br/>[database.js]")]
  node_localstore[("Local Storage<br/>[storage.js]")]
  node_api["API Client<br/>[api.js]"]
end

subgraph group_server["Server"]
  node_server["HTTP API Server<br/>[server.js]"]
  node_sqldb["SQL Access<br/>[db.js]"]
  node_uploadservice["Upload Handling<br/>[uploads.js]"]
end

node_visitor(("Visitor"))
node_sqlserver[("SQL Server")]
node_imagefiles[("Uploaded Images")]

node_visitor -->|"browses"| node_pages
node_pages -.->|"loads interface"| node_shared
node_pages -.->|"loads discovery"| node_discovery
node_pages -.->|"loads feed"| node_home
node_pages -.->|"loads featured"| node_featured
node_pages -.->|"loads details"| node_details
node_pages -.->|"loads basket"| node_basket
node_pages -.->|"loads community"| node_community
node_pages -.->|"loads profile"| node_profile
node_pages -.->|"loads account"| node_auth
node_discovery -.->|"reads recipes"| node_browserdb
node_home -.->|"reads recipes"| node_browserdb
node_featured -.->|"reads recipes"| node_browserdb
node_details -->|"calculates match"| node_recommendations
node_details -->|"reads basket"| node_basket
node_details -.->|"reads recipe"| node_browserdb
node_community -.->|"saves recipes"| node_browserdb
node_ratings -.->|"updates ratings"| node_browserdb
node_favorites -.->|"stores favorites"| node_browserdb
node_profile -.->|"reads profile"| node_browserdb
node_auth -.->|"stores accounts"| node_browserdb
node_browserdb -.->|"persists data"| node_localstore
node_auth -->|"calls API"| node_api
node_ratings -->|"submits rating"| node_api
node_upload -.->|"sends image"| node_api
node_api -.->|"sends requests"| node_server
node_server -->|"queries data"| node_sqldb
node_sqldb -->|"reads and writes"| node_sqlserver
node_server -->|"saves image"| node_uploadservice
node_uploadservice -->|"writes files"| node_imagefiles

click node_pages "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/index.html"
click node_shared "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/app.js"
click node_discovery "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recipes.js"
click node_home "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/home.js"
click node_featured "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/featured.js"
click node_recommendations "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recommendation.js"
click node_details "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recipe-details.js"
click node_basket "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/basket.js"
click node_community "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/community.js"
click node_ratings "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/ratings.js"
click node_favorites "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/favorites.js"
click node_profile "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/profile.js"
click node_auth "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/auth.js"
click node_upload "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/upload.js"
click node_browserdb "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/database.js"
click node_localstore "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/storage.js"
click node_api "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/api.js"
click node_server "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/server.js"
click node_sqldb "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/db.js"
click node_imagefiles "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/tree/main/assets/uploads"
click node_uploadservice "https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/uploads.js"

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_pages,node_shared toneBlue
class node_discovery,node_home,node_featured,node_recommendations,node_details,node_basket,node_community,node_ratings,node_favorites,node_profile,node_auth,node_upload,node_sqlserver,node_imagefiles toneAmber
class node_browserdb,node_localstore,node_api toneMint
class node_server,node_sqldb,node_uploadservice toneRose
class node_visitor toneIndigo
```

## Components

### Recipe Website

- [Website Pages](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/index.html): `index.html`
- [Shared Interface](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/app.js): `js/app.js`

### Recipe Features

- [Recipe Search](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recipes.js): `js/recipes.js`
- [Home Feed](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/home.js): `js/home.js`
- [Featured Recipes](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/featured.js): `js/featured.js`
- [Ingredient Matching](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recommendation.js): `js/recommendation.js`
- [Recipe Details](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/recipe-details.js): `js/recipe-details.js`
- [Shopping Basket](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/basket.js): `js/basket.js`
- [Community Recipes](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/community.js): `js/community.js`
- [Ratings](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/ratings.js): `js/ratings.js`
- [Favorites](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/favorites.js): `js/favorites.js`
- [User Profile](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/profile.js): `js/profile.js`
- [Authentication](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/auth.js): `js/auth.js`
- [Image Upload](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/upload.js): `js/upload.js`

### Data Services

- [Browser Data](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/database.js): `js/database.js`
- [Local Storage](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/storage.js): `js/storage.js`
- [API Client](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/js/api.js): `js/api.js`

### Server

- [HTTP API Server](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/server.js): `backend/server.js`
- [SQL Access](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/db.js): `backend/db.js`
- [Upload Handling](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/blob/main/backend/uploads.js): `backend/uploads.js`

### Other components

- **Visitor**
- **SQL Server**
- [Uploaded Images](https://github.com/yoshi-ko1/s.a.n.g.k.a.p/tree/main/assets/uploads): `assets/uploads`

## Connections

- Visitor → Website Pages: browses
- Website Pages → Shared Interface: loads interface
- Website Pages → Recipe Search: loads discovery
- Website Pages → Home Feed: loads feed
- Website Pages → Featured Recipes: loads featured
- Website Pages → Recipe Details: loads details
- Website Pages → Shopping Basket: loads basket
- Website Pages → Community Recipes: loads community
- Website Pages → User Profile: loads profile
- Website Pages → Authentication: loads account
- Recipe Search → Browser Data: reads recipes
- Home Feed → Browser Data: reads recipes
- Featured Recipes → Browser Data: reads recipes
- Recipe Details → Ingredient Matching: calculates match (evidence: `js/recipe-details.js`)
- Recipe Details → Shopping Basket: reads basket (evidence: `js/recipe-details.js`)
- Recipe Details → Browser Data: reads recipe
- Community Recipes → Browser Data: saves recipes
- Ratings → Browser Data: updates ratings
- Favorites → Browser Data: stores favorites
- User Profile → Browser Data: reads profile
- Authentication → Browser Data: stores accounts
- Browser Data → Local Storage: persists data
- Authentication → API Client: calls API (evidence: `js/auth.js`)
- Ratings → API Client: submits rating (evidence: `js/ratings.js`)
- Image Upload → API Client: sends image
- API Client → HTTP API Server: sends requests
- HTTP API Server → SQL Access: queries data (evidence: `backend/server.js`)
- SQL Access → SQL Server: reads and writes (evidence: `backend/db.js`)
- HTTP API Server → Upload Handling: saves image (evidence: `backend/server.js`)
- Upload Handling → Uploaded Images: writes files (evidence: `backend/uploads.js`)