# aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine architecture

> Architecture diagram of the GitHub repository aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine
- Repository: https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine

## Overview

This is a React/PostgreSQL profile and contact-management application with an Express API. The main workflow is login, search or upload profile/contact data, then browse and manage records. Admin user management and CSV contact updates are separate capabilities. The frontend-to-API links below are limited to routes visible in excerpts; backend internals are not mapped because the server source was not excerpted.

Main entry points: [`src/App.jsx`](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/App.jsx) (App routing), [`server/server.js`](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/server/server.js) (Express API), [`src/components/login.jsx`](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/login.jsx) (Login), [`src/AuthContext.jsx`](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/AuthContext.jsx) (Auth state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web application"]
  node_app["App routing<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[navbar.jsx]"]
end

subgraph group_identity["Identity and administration"]
  node_auth["Auth state<br/>[AuthContext.jsx]"]
  node_login["Login<br/>[login.jsx]"]
  node_useradmin["User management<br/>[UserManagement.jsx]"]
end

subgraph group_profiles["Profile workflows"]
  node_search["Profile search<br/>[search.jsx]"]
  node_news["Google News<br/>[google.jsx]"]
  node_search2["Profile editing search<br/>[search2.jsx]"]
  node_contacts["Contact list<br/>[list.jsx]"]
  node_next["Next workflow view<br/>[next.jsx]"]
end

subgraph group_data["Data management"]
  node_profileupload["Profile upload<br/>[profileupload.jsx]"]
  node_csvupdate["CSV contact update<br/>[update.jsx]"]
  node_records["Profile records<br/>[out.jsx]"]
  node_out2["Record view<br/>[out2.jsx]"]
  node_backend["Express API<br/>[server.js]"]
  node_postgres[("PostgreSQL")]
end

node_user(("User"))

node_user -->|"submits credentials"| node_login
node_login -->|"posts login"| node_backend
node_login -->|"sets auth state"| node_auth
node_app -->|"reads auth state"| node_auth
node_app -->|"routes to"| node_login
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_search
node_app -->|"routes to"| node_useradmin
node_app -->|"renders"| node_contacts
node_app -->|"renders"| node_csvupdate
node_app -->|"routes to"| node_profileupload
node_app -->|"routes to"| node_search2
node_app -->|"routes to"| node_records
node_app -->|"routes to"| node_out2
node_app -->|"routes to"| node_next
node_search -->|"renders"| node_news
node_navbar -->|"reads logout state"| node_auth
node_useradmin -->|"calls user routes"| node_backend
node_contacts -->|"fetches contacts"| node_backend
node_csvupdate -->|"uploads CSV"| node_backend
node_records -->|"fetches records"| node_backend
node_backend -.->|"uses database"| node_postgres

click node_app "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/App.jsx"
click node_auth "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/AuthContext.jsx"
click node_login "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/login.jsx"
click node_useradmin "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/UserManagement.jsx"
click node_navbar "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/navbar.jsx"
click node_search "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/search.jsx"
click node_news "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/google.jsx"
click node_search2 "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/search2.jsx"
click node_contacts "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/list.jsx"
click node_profileupload "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/profileupload.jsx"
click node_csvupdate "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/update.jsx"
click node_records "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/out.jsx"
click node_out2 "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/out2.jsx"
click node_next "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/next.jsx"
click node_backend "https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/server/server.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_app,node_navbar,node_user toneBlue
class node_auth,node_login,node_useradmin toneAmber
class node_search,node_news,node_search2,node_contacts,node_next toneMint
class node_profileupload,node_csvupdate,node_records,node_out2,node_backend,node_postgres toneRose
```

## Components

### Web application

- [App routing](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/navbar.jsx): `src/navbar.jsx`

### Identity and administration

- [Auth state](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/AuthContext.jsx): `src/AuthContext.jsx`
- [Login](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/login.jsx): `src/components/login.jsx`
- [User management](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/UserManagement.jsx): `src/components/UserManagement.jsx`

### Profile workflows

- [Profile search](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/search.jsx): `src/components/search.jsx`
- [Google News](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/google.jsx): `src/components/google.jsx`
- [Profile editing search](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/search2.jsx): `src/components/search2.jsx`
- [Contact list](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/list.jsx): `src/components/list.jsx`
- [Next workflow view](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/next.jsx): `src/components/next.jsx`

### Data management

- [Profile upload](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/profileupload.jsx): `src/components/profileupload.jsx`
- [CSV contact update](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/update.jsx): `src/components/update.jsx`
- [Profile records](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/out.jsx): `src/components/out.jsx`
- [Record view](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/src/components/out2.jsx): `src/components/out2.jsx`
- [Express API](https://github.com/aymaan-mulla/phone-directory-with-linkedin-scraper-and-search-engine/blob/main/server/server.js): `server/server.js`
- **PostgreSQL**

### Other components

- **User**

## Connections

- User → Login: submits credentials (evidence: `src/components/login.jsx`)
- Login → Express API: posts login (evidence: `src/components/login.jsx`)
- Login → Auth state: sets auth state (evidence: `src/components/login.jsx`)
- App routing → Auth state: reads auth state (evidence: `src/App.jsx`)
- App routing → Login: routes to (evidence: `src/App.jsx`)
- App routing → Navigation: renders (evidence: `src/App.jsx`)
- App routing → Profile search: routes to (evidence: `src/App.jsx`)
- App routing → User management: routes to (evidence: `src/App.jsx`)
- App routing → Contact list: renders (evidence: `src/App.jsx`)
- App routing → CSV contact update: renders (evidence: `src/App.jsx`)
- App routing → Profile upload: routes to (evidence: `src/App.jsx`)
- App routing → Profile editing search: routes to (evidence: `src/App.jsx`)
- App routing → Profile records: routes to (evidence: `src/App.jsx`)
- App routing → Record view: routes to (evidence: `src/App.jsx`)
- App routing → Next workflow view: routes to (evidence: `src/App.jsx`)
- Profile search → Google News: renders (evidence: `src/components/search.jsx`)
- Navigation → Auth state: reads logout state (evidence: `src/navbar.jsx`)
- User management → Express API: calls user routes (evidence: `src/components/UserManagement.jsx`)
- Contact list → Express API: fetches contacts (evidence: `src/components/list.jsx`)
- CSV contact update → Express API: uploads CSV (evidence: `src/components/update.jsx`)
- Profile records → Express API: fetches records (evidence: `src/components/out.jsx`)
- Express API → PostgreSQL: uses database (evidence: `README.md`)