# sengleapheng65-lab/cookly-website architecture

> Architecture diagram of the GitHub repository sengleapheng65-lab/cookly-website, 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/sengleapheng65-lab/cookly-website
- Repository: https://github.com/sengleapheng65-lab/cookly-website

## Overview

Cookly is a recipe-sharing website for home cooks to post, find, and save recipes. Its principal workflow spans recipe creation, browsing and search, recipe detail, and saving; account and profile pages provide supporting capabilities. The Flask application handles server-side routes and database operations, with a MySQL connection helper. The excerpts show only selected route behavior, so UI-to-route wiring and several capabilities visible in the file tree are not mapped as confirmed calls.

Main entry points: [`backend/app.py`](https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/app.py) (Flask application), [`backend/db.py`](https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/db.py) (Connection helper), [`frontend/templates/browse.html`](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/browse.html) (Browse page), [`frontend/templates/add-recipe.html`](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/add-recipe.html) (Add recipe page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interaction["User interface"]
  node_home["Home page<br/>[home.html]"]
  node_browse["Browse page<br/>[browse.html]"]
  node_recipe_detail["Recipe detail page<br/>[recipe-detail.html]"]
  node_add_page["Add recipe page<br/>[add-recipe.html]"]
  node_auth_page["Login and register<br/>[login.html]"]
  node_collections_page["Collections page<br/>[collections.html]"]
  node_home_search["Home search<br/>[home.js]"]
  node_browse_search["Browse search<br/>[browse.js]"]
  node_nav_behavior["Navigation behavior<br/>[navbar.js]"]
end

subgraph group_recipes["Recipe workflows"]
  node_recipe_actions["Recipe actions<br/>[recipe-actions.js]"]
  node_add_behavior["Add form behavior<br/>[add-recipe.js]"]
  node_server["Flask application<br/>[app.py]"]
end

subgraph group_accounts["Accounts and collections"]
  node_auth_behavior["Auth form behavior<br/>[auth.js]"]
  node_collection_tabs["Collection tabs<br/>[collections.js]"]
end

subgraph group_data["Persistence"]
  node_db_helper["Connection helper<br/>[db.py]"]
  node_mysql[("MySQL database")]
end

node_cook(("Home cook"))

node_cook -.->|"uses"| node_home
node_cook -.->|"uses"| node_browse
node_cook -.->|"posts recipes"| node_add_page
node_cook -.->|"saves recipes"| node_collections_page
node_server -->|"calls"| node_db_helper
node_db_helper -->|"connects to"| node_mysql
node_server -->|"renders"| node_browse
node_server -->|"renders"| node_recipe_detail
node_server -->|"renders"| node_add_page

click node_home "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/home.html"
click node_browse "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/browse.html"
click node_recipe_detail "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/recipe-detail.html"
click node_add_page "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/add-recipe.html"
click node_auth_page "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/login.html"
click node_collections_page "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/collections.html"
click node_home_search "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/home.js"
click node_browse_search "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/browse.js"
click node_nav_behavior "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/navbar.js"
click node_auth_behavior "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/auth.js"
click node_recipe_actions "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/recipe-actions.js"
click node_add_behavior "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/add-recipe.js"
click node_collection_tabs "https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/collections.js"
click node_server "https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/app.py"
click node_db_helper "https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/db.py"

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_home,node_browse,node_recipe_detail,node_add_page,node_auth_page,node_collections_page,node_home_search,node_browse_search,node_nav_behavior toneBlue
class node_recipe_actions,node_add_behavior,node_server toneAmber
class node_auth_behavior,node_collection_tabs toneMint
class node_db_helper,node_mysql toneRose
class node_cook toneIndigo
```

## Components

### User interface

- [Home page](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/home.html): `frontend/templates/home.html`
- [Browse page](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/browse.html): `frontend/templates/browse.html`
- [Recipe detail page](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/recipe-detail.html): `frontend/templates/recipe-detail.html`
- [Add recipe page](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/add-recipe.html): `frontend/templates/add-recipe.html`
- [Login and register](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/login.html): `frontend/templates/login.html`
- [Collections page](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/templates/collections.html): `frontend/templates/collections.html`
- [Home search](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/home.js): `frontend/static/js/home.js`
- [Browse search](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/browse.js): `frontend/static/js/browse.js`
- [Navigation behavior](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/navbar.js): `frontend/static/js/navbar.js`

### Recipe workflows

- [Recipe actions](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/recipe-actions.js): `frontend/static/js/recipe-actions.js`
- [Add form behavior](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/add-recipe.js): `frontend/static/js/add-recipe.js`
- [Flask application](https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/app.py): `backend/app.py`

### Accounts and collections

- [Auth form behavior](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/auth.js): `frontend/static/js/auth.js`
- [Collection tabs](https://github.com/sengleapheng65-lab/cookly-website/blob/main/frontend/static/js/collections.js): `frontend/static/js/collections.js`

### Persistence

- [Connection helper](https://github.com/sengleapheng65-lab/cookly-website/blob/main/backend/db.py): `backend/db.py`
- **MySQL database**

### Other components

- **Home cook**

## Connections

- Home cook → Home page: uses (evidence: `README.md`)
- Home cook → Browse page: uses (evidence: `README.md`)
- Home cook → Add recipe page: posts recipes (evidence: `README.md`)
- Home cook → Collections page: saves recipes (evidence: `README.md`)
- Flask application → Connection helper: calls (evidence: `backend/app.py`)
- Connection helper → MySQL database: connects to (evidence: `backend/db.py`)
- Flask application → Browse page: renders (evidence: `backend/app.py`)
- Flask application → Recipe detail page: renders (evidence: `backend/app.py`)
- Flask application → Add recipe page: renders (evidence: `backend/app.py`)