How a7madbadri/mubadara works
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: demo-context.tsx Demo domain state · page.tsx API initiatives page · Initiative.tsx Initiative card · initiatives.ts Initiative API
Components 22
User experience
- User layout
app/(user)/layout.tsx - Home route
app/(user)/home/page.tsx - Initiative browsing
app/(user)/home/components/Initiatives.tsx - Initiative card
app/(user)/components/Initiative.tsx - Initiative detail
app/(user)/initiatives/[id]/page.tsx - Activity carousel
app/(user)/initiatives/components/InitiativeCarousel.tsx - Login and signup
app/auth
Demo domain
- Demo domain state
context/demo-context.tsx - Browser storage
- Demo seed data
data/demo-seed.ts - Demo domain types
types/demo.ts
API initiative flow
- API initiatives page
app/page.tsx - API initiative list
components/InitiativeList.tsx - Initiative query hook
hooks/useInitiatives.ts - Initiative API
lib/api/initiatives.ts - Axios client
lib/api/client.ts
Shared UI and contracts
- Creation schema
shcemas/initiatives.ts - API initiative types
types/api/initiative.ts - Shared controls
components/Button.tsx - Navigation link
components/CustomLink.tsx
Other components
- Visitor
- Configured API
Connections 27
- Visitor → User layout: opens
- User layout → Home route: renders
app/(user)/layout.tsx - Home route → Initiative browsing: renders
app/(user)/home/page.tsx - Initiative browsing → Initiative card: renders
app/(user)/home/components/Initiatives.tsx - Initiative card → Demo domain state: follows via
app/(user)/components/Initiative.tsx - Initiative card → Initiative detail: links to
app/(user)/components/Initiative.tsx - Initiative detail → Demo domain state: reads details
app/(user)/initiatives/[id]/page.tsx - Initiative detail → Activity carousel: renders
app/(user)/initiatives/[id]/page.tsx - Login and signup → Demo domain state: authenticates via
app/auth/login/page.tsx - User layout → Demo domain state: provides
- Demo domain state → Browser storage: loads and saves
context/demo-context.tsx - Demo domain state → Demo seed data: initializes from
context/demo-context.tsx - Demo domain state → Demo domain types: uses
context/demo-context.tsx - Visitor → API initiatives page: opens
- API initiatives page → Creation schema: validates creation
app/page.tsx - API initiatives page → Initiative query hook: loads initiatives
app/page.tsx - API initiatives page → Initiative API: creates initiative
app/page.tsx - API initiatives page → API initiative list: renders results
app/page.tsx - API initiative list → Initiative query hook: receives query state
components/InitiativeList.tsx - Initiative query hook → Initiative API: fetches initiatives
hooks/useInitiatives.ts - Initiative API → Axios client: sends requests
lib/api/initiatives.ts - Axios client → Configured API: targets configured API
lib/api/client.ts - API initiatives page → API initiative types: uses request types
app/page.tsx - Initiative API → API initiative types: uses response types
lib/api/initiatives.ts - Creation schema → API initiative types: defines input type
types/api/initiative.ts - Initiative card → Shared controls: renders
app/(user)/components/Initiative.tsx - Initiative card → Navigation link: renders
app/(user)/components/Initiative.tsx