# ikhoanulislam/fitlog-nextjs architecture

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

- Interactive diagram: https://gitdiagram.com/ikhoanulislam/fitlog-nextjs
- Repository: https://github.com/ikhoanulislam/fitlog-nextjs

## Overview

FitLog is a workout-library web app. The main workflow is browsing workouts, loading a lift’s details, adding it to today’s plan or saving it, then reviewing, sorting, completing, and removing lifts in My Plan. PlanContext enforces the five-lift cap, tracks completion, and persists plan state in localStorage; the navbar reflects plan and saved counts. The sampled source confirms these interactions and API calls; route composition and other README-described behavior are represented only where supported by the tree or README.

Main entry points: [`app/workout/[id]/page.js`](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/workout/%5Bid%5D/page.js) (Workout detail), [`context/PlanContext.js`](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/context/PlanContext.js) (Plan state), [`components/Library.js`](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Library.js) (Workout library), [`app/my-plan/page.js`](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/my-plan/page.js) (My Plan)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_layout["App shell<br/>[layout.js]"]
  node_home["Home route<br/>[page.js]"]
  node_navbar["Live counters<br/>[Navbar.js]"]
  node_spinner["Loading indicator<br/>[Spinner.js]"]
  node_notfound["Not found page<br/>[not-found.js]"]
end

subgraph group_discovery["Workout discovery"]
  node_hero["Library intro<br/>[Hero.js]"]
  node_library["Workout library<br/>[Library.js]"]
  node_card["Workout card<br/>[WorkoutCard.js]"]
  node_detail["Workout detail<br/>[page.js]"]
  node_stats["Workout stats<br/>[Stats.js]"]
  node_tags["Muscle tags<br/>[Tags.js]"]
end

subgraph group_planning["Plan management"]
  node_planpage["My Plan<br/>[page.js]"]
  node_state["Plan state<br/>[PlanContext.js]"]
end

subgraph group_data["Workout and state data"]
  node_api["Workout API client<br/>[api.js]"]
  node_storage[("Browser storage")]
end

node_user(("Gym user"))
node_service["Workout API"]

node_user -->|"opens"| node_home
node_layout -->|"renders route"| node_home
node_layout -->|"provides state"| node_state
node_layout -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_library
node_library -->|"requests list"| node_api
node_api -->|"fetches workouts"| node_service
node_library -->|"renders items"| node_card
node_card -->|"links to"| node_detail
node_user -->|"opens lift"| node_detail
node_detail -->|"requests lift"| node_api
node_api -->|"fetches lift"| node_service
node_detail -->|"adds or saves"| node_state
node_detail -->|"renders groups"| node_tags
node_library -->|"shows while loading"| node_spinner
node_detail -->|"shows while loading"| node_spinner
node_detail -->|"shows when missing"| node_notfound
node_user -->|"opens plan"| node_planpage
node_planpage -->|"reads and updates"| node_state
node_planpage -->|"renders metrics"| node_stats
node_planpage -->|"shows until ready"| node_spinner
node_navbar -->|"reads counts"| node_state
node_state -->|"loads and saves"| node_storage

click node_layout "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/layout.js"
click node_home "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/page.js"
click node_hero "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Hero.js"
click node_library "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Library.js"
click node_card "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/WorkoutCard.js"
click node_detail "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/workout/%5Bid%5D/page.js"
click node_api "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/lib/api.js"
click node_planpage "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/my-plan/page.js"
click node_state "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/context/PlanContext.js"
click node_navbar "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Navbar.js"
click node_stats "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Stats.js"
click node_tags "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Tags.js"
click node_spinner "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Spinner.js"
click node_notfound "https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/not-found.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_layout,node_home,node_navbar,node_spinner,node_notfound,node_user toneBlue
class node_hero,node_library,node_card,node_detail,node_stats,node_tags toneAmber
class node_planpage,node_state,node_service toneMint
class node_api,node_storage toneRose
```

## Components

### App experience

- [App shell](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/layout.js): `app/layout.js`
- [Home route](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/page.js): `app/page.js`
- [Live counters](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Navbar.js): `components/Navbar.js`
- [Loading indicator](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Spinner.js): `components/Spinner.js`
- [Not found page](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/not-found.js): `app/not-found.js`

### Workout discovery

- [Library intro](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Hero.js): `components/Hero.js`
- [Workout library](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Library.js): `components/Library.js`
- [Workout card](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/WorkoutCard.js): `components/WorkoutCard.js`
- [Workout detail](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/workout/%5Bid%5D/page.js): `app/workout/[id]/page.js`
- [Workout stats](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Stats.js): `components/Stats.js`
- [Muscle tags](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/components/Tags.js): `components/Tags.js`

### Plan management

- [My Plan](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/app/my-plan/page.js): `app/my-plan/page.js`
- [Plan state](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/context/PlanContext.js): `context/PlanContext.js`

### Workout and state data

- [Workout API client](https://github.com/ikhoanulislam/fitlog-nextjs/blob/main/lib/api.js): `lib/api.js`
- **Browser storage**

### Other components

- **Gym user**
- **Workout API**

## Connections

- Gym user → Home route: opens
- App shell → Home route: renders route
- App shell → Plan state: provides state
- App shell → Live counters: renders
- Home route → Library intro: renders
- Home route → Workout library: renders
- Workout library → Workout API client: requests list
- Workout API client → Workout API: fetches workouts
- Workout library → Workout card: renders items
- Workout card → Workout detail: links to
- Gym user → Workout detail: opens lift
- Workout detail → Workout API client: requests lift
- Workout API client → Workout API: fetches lift
- Workout detail → Plan state: adds or saves
- Workout detail → Muscle tags: renders groups
- Workout library → Loading indicator: shows while loading
- Workout detail → Loading indicator: shows while loading
- Workout detail → Not found page: shows when missing
- Gym user → My Plan: opens plan
- My Plan → Plan state: reads and updates
- My Plan → Workout stats: renders metrics
- My Plan → Loading indicator: shows until ready
- Live counters → Plan state: reads counts
- Plan state → Browser storage: loads and saves