# farooqkhwaja/socialeventswebsite architecture

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

- Interactive diagram: https://gitdiagram.com/farooqkhwaja/socialeventswebsite
- Repository: https://github.com/farooqkhwaja/socialeventswebsite

## Overview

Salsa Events is a web calendar for sharing dance events and tracking attendance. Visitors browse, search and filter events, then open event cards to view details, respond Going/Maybe/Not going, share events or download calendar files. Organizers can add, edit, pin, cancel/restore and delete events. The page delegates event state and mutations to a client hook, which calls API routes that validate or update event records in MongoDB. The tree and excerpts support these main paths; some documented-by-UI integrations and secondary routes are unsampled, so their wiring is not inferred.

Main entry points: [`salsa-events/src/lib/api.ts`](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/api.ts) (API client), [`salsa-events/src/app/api/events/route.ts`](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/route.ts) (Event collection API), [`salsa-events/src/lib/mongodb.ts`](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/mongodb.ts) (MongoDB), [`salsa-events/src/models/Event.ts`](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/models/Event.ts) (Event model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browse["Event browsing"]
  node_page["Event calendar page<br/>[page.tsx]"]
  node_filters["Search and filters<br/>[Filters.tsx]"]
  node_cards["Event cards<br/>[EventCard.tsx]"]
end

subgraph group_manage["Event management"]
  node_event_api["Event detail API<br/>[route.ts]"]
  node_pin_api["Pin API<br/>[route.ts]"]
  node_status_api["Event status API<br/>[route.ts]"]
  node_form["Event editor<br/>[EventForm.tsx]"]
  node_header["Calendar header<br/>[AppHeader.tsx]"]
end

subgraph group_attendance["Attendance"]
  node_attendance_api["Attendance API<br/>[route.ts]"]
  node_attendee_api["Attendee rename API<br/>[route.ts]"]
  node_attendance_controls["Attendance controls"]
  node_local_attendee["Local attendee identity<br/>[localAttendee.ts]"]
  node_attendee_update["Update attendee name<br/>[NameSettings.tsx]"]
end

subgraph group_backend["API and persistence"]
  node_hook["Event state hook<br/>[useEvents.ts]"]
  node_api_client["API client<br/>[api.ts]"]
  node_events_api["Event collection API<br/>[route.ts]"]
  node_mongodb[("MongoDB<br/>[mongodb.ts]")]
  node_event_model["Event model<br/>[Event.ts]"]
  node_serialize["Event serialization<br/>[serialize.ts]"]
  node_validation["Event validation<br/>[validateEvent.ts]"]
  node_cleanup["Old event cleanup"]
end

subgraph group_utilities["Sharing and calendar"]
  node_share["Share event<br/>[share.ts]"]
  node_calendar["Calendar export<br/>[ics.ts]"]
end

node_visitor(("Visitor"))
node_whatsapp(("WhatsApp"))

node_visitor -->|"opens"| node_page
node_page -->|"loads and mutates"| node_hook
node_page -->|"renders"| node_filters
node_page -->|"renders"| node_cards
node_page -->|"opens editor"| node_form
node_cards -->|"renders"| node_attendance_controls
node_cards -->|"builds share text"| node_share
node_cards -->|"builds calendar file"| node_calendar
node_share -->|"opens share link"| node_whatsapp
node_hook -->|"gets identity"| node_local_attendee
node_attendance_controls -->|"submits response"| node_hook
node_header -->|"provides settings"| node_attendee_update
node_attendee_update -->|"renames attendee"| node_api_client
node_hook -->|"calls"| node_api_client
node_api_client -->|"requests events"| node_events_api
node_api_client -->|"updates or deletes"| node_event_api
node_api_client -->|"changes pin"| node_pin_api
node_api_client -->|"changes status"| node_status_api
node_api_client -->|"changes attendance"| node_attendance_api
node_events_api -->|"validates input"| node_validation
node_events_api -->|"sweeps old events"| node_cleanup
node_events_api -->|"connects"| node_mongodb
node_event_api -->|"connects"| node_mongodb
node_pin_api -->|"connects"| node_mongodb
node_status_api -->|"connects"| node_mongodb
node_attendance_api -->|"connects"| node_mongodb
node_attendee_api -->|"connects"| node_mongodb
node_events_api -->|"reads and writes"| node_event_model
node_event_api -->|"updates and deletes"| node_event_model
node_pin_api -->|"updates"| node_event_model
node_status_api -->|"updates"| node_event_model
node_attendance_api -->|"updates"| node_event_model
node_attendee_api -->|"updates"| node_event_model
node_events_api -->|"serializes events"| node_serialize
node_event_api -->|"serializes event"| node_serialize
node_pin_api -->|"serializes event"| node_serialize
node_status_api -->|"serializes event"| node_serialize
node_attendance_api -->|"serializes event"| node_serialize

click node_page "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/page.tsx"
click node_filters "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/Filters.tsx"
click node_cards "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/EventCard.tsx"
click node_hook "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/useEvents.ts"
click node_api_client "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/api.ts"
click node_events_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/route.ts"
click node_event_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/route.ts"
click node_pin_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/pin/route.ts"
click node_status_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/status/route.ts"
click node_attendance_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/attendance/route.ts"
click node_attendee_api "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/attendees/%5Bid%5D/route.ts"
click node_form "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/EventForm.tsx"
click node_header "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/AppHeader.tsx"
click node_attendance_controls "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/AttendanceControls.tsx"
click node_local_attendee "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/localAttendee.ts"
click node_attendee_update "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/NameSettings.tsx"
click node_share "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/share.ts"
click node_calendar "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/ics.ts"
click node_mongodb "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/mongodb.ts"
click node_event_model "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/models/Event.ts"
click node_serialize "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/serialize.ts"
click node_validation "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/validateEvent.ts"
click node_cleanup "https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/cleanupOldEvents.ts"

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_page,node_filters,node_cards toneBlue
class node_event_api,node_pin_api,node_status_api,node_form,node_header toneAmber
class node_attendance_api,node_attendee_api,node_attendance_controls,node_local_attendee,node_attendee_update toneMint
class node_hook,node_api_client,node_events_api,node_mongodb,node_event_model,node_serialize,node_validation,node_cleanup toneRose
class node_share,node_calendar,node_visitor,node_whatsapp toneIndigo
```

## Components

### Event browsing

- [Event calendar page](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/page.tsx): `salsa-events/src/app/page.tsx`
- [Search and filters](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/Filters.tsx): `salsa-events/src/components/Filters.tsx`
- [Event cards](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/EventCard.tsx): `salsa-events/src/components/EventCard.tsx`

### Event management

- [Event detail API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/route.ts): `salsa-events/src/app/api/events/[id]/route.ts`
- [Pin API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/pin/route.ts): `salsa-events/src/app/api/events/[id]/pin/route.ts`
- [Event status API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/status/route.ts): `salsa-events/src/app/api/events/[id]/status/route.ts`
- [Event editor](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/EventForm.tsx): `salsa-events/src/components/EventForm.tsx`
- [Calendar header](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/AppHeader.tsx): `salsa-events/src/components/AppHeader.tsx`

### Attendance

- [Attendance API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/%5Bid%5D/attendance/route.ts): `salsa-events/src/app/api/events/[id]/attendance/route.ts`
- [Attendee rename API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/attendees/%5Bid%5D/route.ts): `salsa-events/src/app/api/attendees/[id]/route.ts`
- [Attendance controls](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/AttendanceControls.tsx): `salsa-events/src/components/AttendanceControls.tsx`
- [Local attendee identity](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/localAttendee.ts): `salsa-events/src/lib/localAttendee.ts`
- [Update attendee name](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/components/NameSettings.tsx): `salsa-events/src/components/NameSettings.tsx`

### API and persistence

- [Event state hook](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/useEvents.ts): `salsa-events/src/lib/useEvents.ts`
- [API client](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/api.ts): `salsa-events/src/lib/api.ts`
- [Event collection API](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/app/api/events/route.ts): `salsa-events/src/app/api/events/route.ts`
- [MongoDB](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/mongodb.ts): `salsa-events/src/lib/mongodb.ts`
- [Event model](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/models/Event.ts): `salsa-events/src/models/Event.ts`
- [Event serialization](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/serialize.ts): `salsa-events/src/lib/serialize.ts`
- [Event validation](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/validateEvent.ts): `salsa-events/src/lib/validateEvent.ts`
- [Old event cleanup](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/cleanupOldEvents.ts): `salsa-events/src/lib/cleanupOldEvents.ts`

### Sharing and calendar

- [Share event](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/share.ts): `salsa-events/src/lib/share.ts`
- [Calendar export](https://github.com/farooqkhwaja/socialeventswebsite/blob/main/salsa-events/src/lib/ics.ts): `salsa-events/src/lib/ics.ts`

### Other components

- **Visitor**
- **WhatsApp**

## Connections

- Visitor → Event calendar page: opens
- Event calendar page → Event state hook: loads and mutates
- Event calendar page → Search and filters: renders
- Event calendar page → Event cards: renders
- Event calendar page → Event editor: opens editor
- Event cards → Attendance controls: renders
- Event cards → Share event: builds share text
- Event cards → Calendar export: builds calendar file
- Share event → WhatsApp: opens share link
- Event state hook → Local attendee identity: gets identity
- Attendance controls → Event state hook: submits response
- Calendar header → Update attendee name: provides settings
- Update attendee name → API client: renames attendee
- Event state hook → API client: calls
- API client → Event collection API: requests events
- API client → Event detail API: updates or deletes
- API client → Pin API: changes pin
- API client → Event status API: changes status
- API client → Attendance API: changes attendance
- Event collection API → Event validation: validates input
- Event collection API → Old event cleanup: sweeps old events
- Event collection API → MongoDB: connects
- Event detail API → MongoDB: connects
- Pin API → MongoDB: connects
- Event status API → MongoDB: connects
- Attendance API → MongoDB: connects
- Attendee rename API → MongoDB: connects
- Event collection API → Event model: reads and writes
- Event detail API → Event model: updates and deletes
- Pin API → Event model: updates
- Event status API → Event model: updates
- Attendance API → Event model: updates
- Attendee rename API → Event model: updates
- Event collection API → Event serialization: serializes events
- Event detail API → Event serialization: serializes event
- Pin API → Event serialization: serializes event
- Event status API → Event serialization: serializes event
- Attendance API → Event serialization: serializes event