# binyam-ta/skillswap architecture

> Architecture diagram of the GitHub repository binyam-ta/skillswap, 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/binyam-ta/skillswap
- Repository: https://github.com/binyam-ta/skillswap

## Overview

Skill Swap is a community app for users to present skills, discover teachers/learners, arrange exchanges, and communicate. The principal path runs from authentication and profile onboarding through skill browsing and swap management, with messaging supporting the exchange. Firebase provides identity, profile/swap/conversation data, and file storage. The tree and README document broader features than the sampled excerpts; arrows below are limited to evidenced calls or documented capabilities, so some page-to-page wiring is intentionally not inferred.

Main entry points: [`lib/firebase.ts`](https://github.com/binyam-ta/skillswap/blob/main/lib/firebase.ts) (Firebase setup), [`app/page.tsx`](https://github.com/binyam-ta/skillswap/blob/main/app/page.tsx) (Landing page), [`components/Chat.tsx`](https://github.com/binyam-ta/skillswap/blob/main/components/Chat.tsx) (Chat component), [`context/AppContext.tsx`](https://github.com/binyam-ta/skillswap/blob/main/context/AppContext.tsx) (App state context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["User experience"]
  node_home["Landing page<br/>[page.tsx]"]
  node_auth["Login and signup"]
  node_dashboard["Dashboard<br/>[page.tsx]"]
  node_onboarding["Profile onboarding<br/>[page.tsx]"]
  node_profile["Profile management<br/>[page.tsx]"]
  node_settings["User settings<br/>[page.tsx]"]
end

subgraph group_exchange["Skill exchange"]
  node_browse["Browse skills<br/>[page.tsx]"]
  node_swaplist["Swap overview<br/>[page.tsx]"]
  node_pending["Pending swaps<br/>[page.tsx]"]
  node_active["Active swaps<br/>[page.tsx]"]
  node_completed["Completed swaps<br/>[page.tsx]"]
end

subgraph group_messaging["Communication"]
  node_conversations["Conversation list<br/>[page.tsx]"]
  node_conversation["Direct chat<br/>[page.tsx]"]
  node_chatui["Chat component<br/>[Chat.tsx]"]
  node_uploads["Upload controls<br/>[FileUpload.tsx]"]
end

subgraph group_platform["Firebase platform"]
  node_usercontext["App state context<br/>[AppContext.tsx]"]
  node_realtime["Realtime subscriptions<br/>[realtimeDb.ts]"]
  node_firebase["Firebase setup<br/>[firebase.ts]"]
  node_firestore[("Firestore")]
  node_authservice["Firebase Auth"]
  node_storage[("Firebase Storage")]
  node_storageutil["Storage utilities<br/>[storage.ts]"]
  node_uploadhook["Upload hook<br/>[useFileUpload.ts]"]
end

node_visitor(("Community user"))

node_visitor -->|"visits"| node_home
node_home -->|"links to signup"| node_auth
node_home -->|"links to browse"| node_browse
node_visitor -->|"signs in"| node_auth
node_auth -->|"authenticates"| node_authservice
node_authservice -->|"auth state"| node_usercontext
node_usercontext -->|"creates user record"| node_firestore
node_usercontext -->|"subscribes to user data"| node_realtime
node_realtime -->|"listens to records"| node_firestore
node_visitor -->|"completes profile"| node_onboarding
node_onboarding -->|"updates profile"| node_firestore
node_visitor -->|"opens dashboard"| node_dashboard
node_dashboard -->|"reads profile"| node_firestore
node_visitor -->|"edits profile"| node_profile
node_profile -->|"reads and updates"| node_firestore
node_visitor -->|"changes preferences"| node_settings
node_settings -->|"reads and updates"| node_firestore
node_visitor -->|"finds skills"| node_browse
node_browse -.->|"queries skills"| node_firestore
node_visitor -->|"manages exchanges"| node_swaplist
node_swaplist -->|"queries swaps"| node_firestore
node_visitor -->|"reviews requests"| node_pending
node_visitor -->|"works on exchanges"| node_active
node_visitor -->|"reviews finished swaps"| node_completed
node_visitor -->|"opens messages"| node_conversations
node_conversations -->|"queries conversations"| node_firestore
node_visitor -->|"starts direct chat"| node_conversation
node_conversation -.->|"renders chat"| node_chatui
node_chatui -.->|"exchanges messages"| node_firestore
node_chatui -.->|"attaches files"| node_uploads
node_uploads -.->|"uploads with progress"| node_uploadhook
node_uploadhook -->|"uploads bytes"| node_storage
node_storageutil -->|"uploads and deletes"| node_storage
node_firebase -->|"initializes"| node_authservice
node_firebase -->|"initializes"| node_firestore
node_firebase -->|"initializes"| node_storage

click node_home "https://github.com/binyam-ta/skillswap/blob/main/app/page.tsx"
click node_auth "https://github.com/binyam-ta/skillswap/tree/main/app/auth"
click node_dashboard "https://github.com/binyam-ta/skillswap/blob/main/app/dashboard/page.tsx"
click node_onboarding "https://github.com/binyam-ta/skillswap/blob/main/app/onboarding/page.tsx"
click node_profile "https://github.com/binyam-ta/skillswap/blob/main/app/profile/page.tsx"
click node_settings "https://github.com/binyam-ta/skillswap/blob/main/app/settings/page.tsx"
click node_browse "https://github.com/binyam-ta/skillswap/blob/main/app/skills/browse/page.tsx"
click node_swaplist "https://github.com/binyam-ta/skillswap/blob/main/app/swaps/page.tsx"
click node_pending "https://github.com/binyam-ta/skillswap/blob/main/app/swaps/pending/page.tsx"
click node_active "https://github.com/binyam-ta/skillswap/blob/main/app/swaps/active/page.tsx"
click node_completed "https://github.com/binyam-ta/skillswap/blob/main/app/swaps/completed/page.tsx"
click node_conversations "https://github.com/binyam-ta/skillswap/blob/main/app/messages/page.tsx"
click node_conversation "https://github.com/binyam-ta/skillswap/blob/main/app/messages/%5BuserId%5D/page.tsx"
click node_chatui "https://github.com/binyam-ta/skillswap/blob/main/components/Chat.tsx"
click node_uploads "https://github.com/binyam-ta/skillswap/blob/main/components/FileUpload.tsx"
click node_usercontext "https://github.com/binyam-ta/skillswap/blob/main/context/AppContext.tsx"
click node_realtime "https://github.com/binyam-ta/skillswap/blob/main/lib/realtimeDb.ts"
click node_firebase "https://github.com/binyam-ta/skillswap/blob/main/lib/firebase.ts"
click node_storageutil "https://github.com/binyam-ta/skillswap/blob/main/lib/storage.ts"
click node_uploadhook "https://github.com/binyam-ta/skillswap/blob/main/hooks/useFileUpload.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_home,node_auth,node_dashboard,node_onboarding,node_profile,node_settings,node_visitor toneBlue
class node_browse,node_swaplist,node_pending,node_active,node_completed toneAmber
class node_conversations,node_conversation,node_chatui,node_uploads toneMint
class node_usercontext,node_realtime,node_firebase,node_firestore,node_authservice,node_storage,node_storageutil,node_uploadhook toneRose
```

## Components

### User experience

- [Landing page](https://github.com/binyam-ta/skillswap/blob/main/app/page.tsx): `app/page.tsx`
- [Login and signup](https://github.com/binyam-ta/skillswap/tree/main/app/auth): `app/auth`
- [Dashboard](https://github.com/binyam-ta/skillswap/blob/main/app/dashboard/page.tsx): `app/dashboard/page.tsx`
- [Profile onboarding](https://github.com/binyam-ta/skillswap/blob/main/app/onboarding/page.tsx): `app/onboarding/page.tsx`
- [Profile management](https://github.com/binyam-ta/skillswap/blob/main/app/profile/page.tsx): `app/profile/page.tsx`
- [User settings](https://github.com/binyam-ta/skillswap/blob/main/app/settings/page.tsx): `app/settings/page.tsx`

### Skill exchange

- [Browse skills](https://github.com/binyam-ta/skillswap/blob/main/app/skills/browse/page.tsx): `app/skills/browse/page.tsx`
- [Swap overview](https://github.com/binyam-ta/skillswap/blob/main/app/swaps/page.tsx): `app/swaps/page.tsx`
- [Pending swaps](https://github.com/binyam-ta/skillswap/blob/main/app/swaps/pending/page.tsx): `app/swaps/pending/page.tsx`
- [Active swaps](https://github.com/binyam-ta/skillswap/blob/main/app/swaps/active/page.tsx): `app/swaps/active/page.tsx`
- [Completed swaps](https://github.com/binyam-ta/skillswap/blob/main/app/swaps/completed/page.tsx): `app/swaps/completed/page.tsx`

### Communication

- [Conversation list](https://github.com/binyam-ta/skillswap/blob/main/app/messages/page.tsx): `app/messages/page.tsx`
- [Direct chat](https://github.com/binyam-ta/skillswap/blob/main/app/messages/%5BuserId%5D/page.tsx): `app/messages/[userId]/page.tsx`
- [Chat component](https://github.com/binyam-ta/skillswap/blob/main/components/Chat.tsx): `components/Chat.tsx`
- [Upload controls](https://github.com/binyam-ta/skillswap/blob/main/components/FileUpload.tsx): `components/FileUpload.tsx`

### Firebase platform

- [App state context](https://github.com/binyam-ta/skillswap/blob/main/context/AppContext.tsx): `context/AppContext.tsx`
- [Realtime subscriptions](https://github.com/binyam-ta/skillswap/blob/main/lib/realtimeDb.ts): `lib/realtimeDb.ts`
- [Firebase setup](https://github.com/binyam-ta/skillswap/blob/main/lib/firebase.ts): `lib/firebase.ts`
- **Firestore**
- **Firebase Auth**
- **Firebase Storage**
- [Storage utilities](https://github.com/binyam-ta/skillswap/blob/main/lib/storage.ts): `lib/storage.ts`
- [Upload hook](https://github.com/binyam-ta/skillswap/blob/main/hooks/useFileUpload.ts): `hooks/useFileUpload.ts`

### Other components

- **Community user**

## Connections

- Community user → Landing page: visits
- Landing page → Login and signup: links to signup
- Landing page → Browse skills: links to browse
- Community user → Login and signup: signs in
- Login and signup → Firebase Auth: authenticates
- Firebase Auth → App state context: auth state
- App state context → Firestore: creates user record
- App state context → Realtime subscriptions: subscribes to user data
- Realtime subscriptions → Firestore: listens to records
- Community user → Profile onboarding: completes profile
- Profile onboarding → Firestore: updates profile
- Community user → Dashboard: opens dashboard
- Dashboard → Firestore: reads profile
- Community user → Profile management: edits profile
- Profile management → Firestore: reads and updates
- Community user → User settings: changes preferences
- User settings → Firestore: reads and updates
- Community user → Browse skills: finds skills
- Browse skills → Firestore: queries skills
- Community user → Swap overview: manages exchanges
- Swap overview → Firestore: queries swaps
- Community user → Pending swaps: reviews requests
- Community user → Active swaps: works on exchanges
- Community user → Completed swaps: reviews finished swaps
- Community user → Conversation list: opens messages
- Conversation list → Firestore: queries conversations
- Community user → Direct chat: starts direct chat
- Direct chat → Chat component: renders chat
- Chat component → Firestore: exchanges messages
- Chat component → Upload controls: attaches files
- Upload controls → Upload hook: uploads with progress
- Upload hook → Firebase Storage: uploads bytes
- Storage utilities → Firebase Storage: uploads and deletes
- Firebase setup → Firebase Auth: initializes
- Firebase setup → Firestore: initializes
- Firebase setup → Firebase Storage: initializes