# a7madbadri/mubadara architecture

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

- Interactive diagram: https://gitdiagram.com/a7madbadri/mubadara
- Repository: https://github.com/a7madbadri/mubadara

## Overview

This is a Next.js initiatives frontend with two partly separate runtime paths: a demo experience backed by browser-persisted state, and an API-backed initiative listing and creation flow on the root page. Users can browse initiative details, follow initiatives, and view activities; the demo context also supports authentication, activity creation, and activity registration. The API path fetches and creates initiatives through an Axios client. Evidence is sampled for those paths; several route implementations and the mock API are present in the tree but their wiring was not verified.

Main entry points: [`context/demo-context.tsx`](https://github.com/a7madbadri/mubadara/blob/main/context/demo-context.tsx) (Demo domain state), [`app/page.tsx`](https://github.com/a7madbadri/mubadara/blob/main/app/page.tsx) (API initiatives page), [`app/(user)/components/Initiative.tsx`](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/components/Initiative.tsx) (Initiative card), [`lib/api/initiatives.ts`](https://github.com/a7madbadri/mubadara/blob/main/lib/api/initiatives.ts) (Initiative API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_user_shell["User layout<br/>[layout.tsx]"]
  node_home_route["Home route<br/>[page.tsx]"]
  node_initiative_browse["Initiative browsing<br/>[Initiatives.tsx]"]
  node_initiative_card["Initiative card<br/>[Initiative.tsx]"]
  node_initiative_detail["Initiative detail<br/>[page.tsx]"]
  node_activity_carousel["Activity carousel"]
  node_auth_routes["Login and signup"]
end

subgraph group_demo["Demo domain"]
  node_demo_context["Demo domain state<br/>[demo-context.tsx]"]
  node_browser_storage[("Browser storage")]
  node_demo_seed["Demo seed data<br/>[demo-seed.ts]"]
  node_demo_types["Demo domain types<br/>[demo.ts]"]
end

subgraph group_api["API initiative flow"]
  node_api_home["API initiatives page<br/>[page.tsx]"]
  node_initiative_list["API initiative list<br/>[InitiativeList.tsx]"]
  node_initiative_hook["Initiative query hook<br/>[useInitiatives.ts]"]
  node_initiative_api["Initiative API<br/>[initiatives.ts]"]
  node_api_client["Axios client<br/>[client.ts]"]
end

subgraph group_shared["Shared UI and contracts"]
  node_initiative_schema["Creation schema<br/>[initiatives.ts]"]
  node_api_types["API initiative types<br/>[initiative.ts]"]
  node_shared_controls["Shared controls<br/>[Button.tsx]"]
  node_shared_link["Navigation link<br/>[CustomLink.tsx]"]
end

node_visitor(("Visitor"))
node_api_service{{"Configured API"}}

node_visitor -->|"opens"| node_user_shell
node_user_shell -->|"renders"| node_home_route
node_home_route -->|"renders"| node_initiative_browse
node_initiative_browse -->|"renders"| node_initiative_card
node_initiative_card -->|"follows via"| node_demo_context
node_initiative_card -->|"links to"| node_initiative_detail
node_initiative_detail -->|"reads details"| node_demo_context
node_initiative_detail -->|"renders"| node_activity_carousel
node_auth_routes -->|"authenticates via"| node_demo_context
node_user_shell -->|"provides"| node_demo_context
node_demo_context -->|"loads and saves"| node_browser_storage
node_demo_context -->|"initializes from"| node_demo_seed
node_demo_context -->|"uses"| node_demo_types
node_visitor -->|"opens"| node_api_home
node_api_home -->|"validates creation"| node_initiative_schema
node_api_home -->|"loads initiatives"| node_initiative_hook
node_api_home -->|"creates initiative"| node_initiative_api
node_api_home -->|"renders results"| node_initiative_list
node_initiative_list -->|"receives query state"| node_initiative_hook
node_initiative_hook -->|"fetches initiatives"| node_initiative_api
node_initiative_api -->|"sends requests"| node_api_client
node_api_client -->|"targets configured API"| node_api_service
node_api_home -->|"uses request types"| node_api_types
node_initiative_api -->|"uses response types"| node_api_types
node_initiative_schema -->|"defines input type"| node_api_types
node_initiative_card -->|"renders"| node_shared_controls
node_initiative_card -->|"renders"| node_shared_link

click node_user_shell "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/layout.tsx"
click node_home_route "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/home/page.tsx"
click node_initiative_browse "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/home/components/Initiatives.tsx"
click node_initiative_card "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/components/Initiative.tsx"
click node_initiative_detail "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/initiatives/%5Bid%5D/page.tsx"
click node_activity_carousel "https://github.com/a7madbadri/mubadara/blob/main/app/(user)/initiatives/components/InitiativeCarousel.tsx"
click node_auth_routes "https://github.com/a7madbadri/mubadara/tree/main/app/auth"
click node_demo_context "https://github.com/a7madbadri/mubadara/blob/main/context/demo-context.tsx"
click node_demo_seed "https://github.com/a7madbadri/mubadara/blob/main/data/demo-seed.ts"
click node_demo_types "https://github.com/a7madbadri/mubadara/blob/main/types/demo.ts"
click node_api_home "https://github.com/a7madbadri/mubadara/blob/main/app/page.tsx"
click node_initiative_list "https://github.com/a7madbadri/mubadara/blob/main/components/InitiativeList.tsx"
click node_initiative_hook "https://github.com/a7madbadri/mubadara/blob/main/hooks/useInitiatives.ts"
click node_initiative_api "https://github.com/a7madbadri/mubadara/blob/main/lib/api/initiatives.ts"
click node_api_client "https://github.com/a7madbadri/mubadara/blob/main/lib/api/client.ts"
click node_initiative_schema "https://github.com/a7madbadri/mubadara/blob/main/shcemas/initiatives.ts"
click node_api_types "https://github.com/a7madbadri/mubadara/blob/main/types/api/initiative.ts"
click node_shared_controls "https://github.com/a7madbadri/mubadara/blob/main/components/Button.tsx"
click node_shared_link "https://github.com/a7madbadri/mubadara/blob/main/components/CustomLink.tsx"

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_user_shell,node_home_route,node_initiative_browse,node_initiative_card,node_initiative_detail,node_activity_carousel,node_auth_routes toneBlue
class node_demo_context,node_browser_storage,node_demo_seed,node_demo_types toneAmber
class node_api_home,node_initiative_list,node_initiative_hook,node_initiative_api,node_api_client,node_api_service toneMint
class node_initiative_schema,node_api_types,node_shared_controls,node_shared_link toneRose
class node_visitor toneIndigo
```

## Components

### User experience

- [User layout](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/layout.tsx): `app/(user)/layout.tsx`
- [Home route](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/home/page.tsx): `app/(user)/home/page.tsx`
- [Initiative browsing](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/home/components/Initiatives.tsx): `app/(user)/home/components/Initiatives.tsx`
- [Initiative card](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/components/Initiative.tsx): `app/(user)/components/Initiative.tsx`
- [Initiative detail](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/initiatives/%5Bid%5D/page.tsx): `app/(user)/initiatives/[id]/page.tsx`
- [Activity carousel](https://github.com/a7madbadri/mubadara/blob/main/app/(user)/initiatives/components/InitiativeCarousel.tsx): `app/(user)/initiatives/components/InitiativeCarousel.tsx`
- [Login and signup](https://github.com/a7madbadri/mubadara/tree/main/app/auth): `app/auth`

### Demo domain

- [Demo domain state](https://github.com/a7madbadri/mubadara/blob/main/context/demo-context.tsx): `context/demo-context.tsx`
- **Browser storage**
- [Demo seed data](https://github.com/a7madbadri/mubadara/blob/main/data/demo-seed.ts): `data/demo-seed.ts`
- [Demo domain types](https://github.com/a7madbadri/mubadara/blob/main/types/demo.ts): `types/demo.ts`

### API initiative flow

- [API initiatives page](https://github.com/a7madbadri/mubadara/blob/main/app/page.tsx): `app/page.tsx`
- [API initiative list](https://github.com/a7madbadri/mubadara/blob/main/components/InitiativeList.tsx): `components/InitiativeList.tsx`
- [Initiative query hook](https://github.com/a7madbadri/mubadara/blob/main/hooks/useInitiatives.ts): `hooks/useInitiatives.ts`
- [Initiative API](https://github.com/a7madbadri/mubadara/blob/main/lib/api/initiatives.ts): `lib/api/initiatives.ts`
- [Axios client](https://github.com/a7madbadri/mubadara/blob/main/lib/api/client.ts): `lib/api/client.ts`

### Shared UI and contracts

- [Creation schema](https://github.com/a7madbadri/mubadara/blob/main/shcemas/initiatives.ts): `shcemas/initiatives.ts`
- [API initiative types](https://github.com/a7madbadri/mubadara/blob/main/types/api/initiative.ts): `types/api/initiative.ts`
- [Shared controls](https://github.com/a7madbadri/mubadara/blob/main/components/Button.tsx): `components/Button.tsx`
- [Navigation link](https://github.com/a7madbadri/mubadara/blob/main/components/CustomLink.tsx): `components/CustomLink.tsx`

### Other components

- **Visitor**
- **Configured API**

## Connections

- Visitor → User layout: opens
- User layout → Home route: renders (evidence: `app/(user)/layout.tsx`)
- Home route → Initiative browsing: renders (evidence: `app/(user)/home/page.tsx`)
- Initiative browsing → Initiative card: renders (evidence: `app/(user)/home/components/Initiatives.tsx`)
- Initiative card → Demo domain state: follows via (evidence: `app/(user)/components/Initiative.tsx`)
- Initiative card → Initiative detail: links to (evidence: `app/(user)/components/Initiative.tsx`)
- Initiative detail → Demo domain state: reads details (evidence: `app/(user)/initiatives/[id]/page.tsx`)
- Initiative detail → Activity carousel: renders (evidence: `app/(user)/initiatives/[id]/page.tsx`)
- Login and signup → Demo domain state: authenticates via (evidence: `app/auth/login/page.tsx`)
- User layout → Demo domain state: provides
- Demo domain state → Browser storage: loads and saves (evidence: `context/demo-context.tsx`)
- Demo domain state → Demo seed data: initializes from (evidence: `context/demo-context.tsx`)
- Demo domain state → Demo domain types: uses (evidence: `context/demo-context.tsx`)
- Visitor → API initiatives page: opens
- API initiatives page → Creation schema: validates creation (evidence: `app/page.tsx`)
- API initiatives page → Initiative query hook: loads initiatives (evidence: `app/page.tsx`)
- API initiatives page → Initiative API: creates initiative (evidence: `app/page.tsx`)
- API initiatives page → API initiative list: renders results (evidence: `app/page.tsx`)
- API initiative list → Initiative query hook: receives query state (evidence: `components/InitiativeList.tsx`)
- Initiative query hook → Initiative API: fetches initiatives (evidence: `hooks/useInitiatives.ts`)
- Initiative API → Axios client: sends requests (evidence: `lib/api/initiatives.ts`)
- Axios client → Configured API: targets configured API (evidence: `lib/api/client.ts`)
- API initiatives page → API initiative types: uses request types (evidence: `app/page.tsx`)
- Initiative API → API initiative types: uses response types (evidence: `lib/api/initiatives.ts`)
- Creation schema → API initiative types: defines input type (evidence: `types/api/initiative.ts`)
- Initiative card → Shared controls: renders (evidence: `app/(user)/components/Initiative.tsx`)
- Initiative card → Navigation link: renders (evidence: `app/(user)/components/Initiative.tsx`)