# samshe531/client-bricolink architecture

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

- Interactive diagram: https://gitdiagram.com/samshe531/client-bricolink
- Repository: https://github.com/samshe531/client-bricolink

## Overview

Bricolink is a React marketplace for finding building and repair professionals, with professional registration, profile management, and admin review. The main visitor workflow loads professionals and presents the validated list; users can register or log in, while authenticated professionals can submit or update profiles and administrators can review pending applications and manage users. The graph follows the visible React routing, Redux dispatches, and API calls. Several page and state-module details are unsampled, so their internal links are omitted.

Main entry points: [`src/App.js`](https://github.com/samshe531/client-bricolink/blob/master/src/App.js) (App and routes), [`src/JS/actions/bPro.action.js`](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/bPro.action.js) (Professional actions), [`src/JS/actions/auth.action.js`](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/auth.action.js) (Authentication actions), [`src/pages/home/Home.jsx`](https://github.com/samshe531/client-bricolink/blob/master/src/pages/home/Home.jsx) (Marketplace home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Web experience"]
  node_app["App and routes<br/>[App.js]"]
  node_home["Marketplace home<br/>[Home.jsx]"]
end

subgraph group_professional["Professional marketplace"]
  node_pro_listing["Professional listings<br/>[ListeValide.jsx]"]
  node_pro_card["Professional card"]
  node_pro_filter["Specialty filter<br/>[FilterBySpec.jsx]"]
  node_pro_form["Professional application<br/>[Form.jsx]"]
  node_location_data["Location choices<br/>[cities.js]"]
  node_pro_profile["Professional profile"]
  node_pro_update["Edit professional"]
  node_pro_actions["Professional actions<br/>[bPro.action.js]"]
  node_pro_types["Professional action types<br/>[bPro.actionType.js]"]
  node_pro_reducer["Professional state<br/>[bPro.reducer.js]"]
end

subgraph group_identity["Identity and state"]
  node_registration["Registration page<br/>[Register.jsx]"]
  node_login["Login page<br/>[Login.jsx]"]
  node_auth_actions["Authentication actions<br/>[auth.action.js]"]
  node_auth_types["Authentication action types<br/>[auth.actionType.js]"]
  node_store["Redux store<br/>[store.js]"]
  node_reducers["Redux reducers<br/>[index.js]"]
  node_auth_reducer["Auth state<br/>[auth.reducer.js]"]
end

subgraph group_admin["Administration"]
  node_pending_page["Pending applications<br/>[listeEnAttente.jsx]"]
  node_user_actions["User actions<br/>[user.action.js]"]
  node_user_types["User action types<br/>[user.actionType.js]"]
  node_users_page["User dashboard<br/>[DashBoard.jsx]"]
  node_users_list["User list<br/>[ListUsers.jsx]"]
end

node_visitor(("Visitor"))
node_api{{"Backend API"}}

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_registration
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_pending_page
node_app -->|"routes to"| node_pro_form
node_app -->|"routes to"| node_pro_profile
node_app -->|"routes to"| node_pro_update
node_app -->|"routes to"| node_users_page
node_app -->|"checks session"| node_auth_actions
node_app -->|"loads professionals"| node_pro_actions
node_home -->|"requests list"| node_pro_actions
node_home -->|"renders"| node_pro_listing
node_pro_listing -->|"renders"| node_pro_card
node_pro_listing -->|"renders"| node_pro_filter
node_pro_card -->|"uses validation control"| node_user_actions
node_registration -->|"submits registration"| node_auth_actions
node_login -->|"submits credentials"| node_auth_actions
node_auth_actions -->|"sends auth requests"| node_api
node_auth_actions -->|"dispatches"| node_auth_types
node_pro_actions -->|"requests professional data"| node_api
node_pro_actions -->|"dispatches"| node_pro_types
node_pro_profile -->|"loads profile"| node_pro_actions
node_pro_update -->|"submits update"| node_pro_actions
node_pro_form -->|"submits application"| node_pro_actions
node_pro_form -->|"uses location options"| node_location_data
node_pro_update -->|"uses location options"| node_location_data
node_pending_page -->|"loads pending list"| node_pro_actions
node_users_page -->|"loads users"| node_user_actions
node_users_page -->|"renders"| node_users_list
node_store -->|"configures"| node_reducers
node_reducers -->|"combines"| node_auth_reducer
node_reducers -->|"combines"| node_pro_reducer
node_auth_reducer -->|"handles"| node_auth_types
node_pro_reducer -->|"handles"| node_pro_types

click node_app "https://github.com/samshe531/client-bricolink/blob/master/src/App.js"
click node_home "https://github.com/samshe531/client-bricolink/blob/master/src/pages/home/Home.jsx"
click node_registration "https://github.com/samshe531/client-bricolink/blob/master/src/pages/register/Register.jsx"
click node_login "https://github.com/samshe531/client-bricolink/blob/master/src/pages/login/Login.jsx"
click node_pro_listing "https://github.com/samshe531/client-bricolink/blob/master/src/components/listeValide/ListeValide.jsx"
click node_pro_card "https://github.com/samshe531/client-bricolink/blob/master/src/components/cardProfessional/CardProfessional.jsx"
click node_pro_filter "https://github.com/samshe531/client-bricolink/blob/master/src/components/filteringBySpec/FilterBySpec.jsx"
click node_pro_form "https://github.com/samshe531/client-bricolink/blob/master/src/components/form/Form.jsx"
click node_location_data "https://github.com/samshe531/client-bricolink/blob/master/src/components/form/cities.js"
click node_pending_page "https://github.com/samshe531/client-bricolink/blob/master/src/pages/listeEnAttente/listeEnAttente.jsx"
click node_pro_profile "https://github.com/samshe531/client-bricolink/blob/master/src/pages/professionalProfile/ProfessionalProfile.jsx"
click node_pro_update "https://github.com/samshe531/client-bricolink/blob/master/src/components/updateProfessional/UpdateProfessional.jsx"
click node_auth_actions "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/auth.action.js"
click node_auth_types "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/auth.actionType.js"
click node_pro_actions "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/bPro.action.js"
click node_pro_types "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/bPro.actionType.js"
click node_user_actions "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/user.action.js"
click node_user_types "https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/user.actionType.js"
click node_store "https://github.com/samshe531/client-bricolink/blob/master/src/JS/store/store.js"
click node_reducers "https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/index.js"
click node_auth_reducer "https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/auth.reducer.js"
click node_pro_reducer "https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/bPro.reducer.js"
click node_users_page "https://github.com/samshe531/client-bricolink/blob/master/src/pages/dashBoard/DashBoard.jsx"
click node_users_list "https://github.com/samshe531/client-bricolink/blob/master/src/components/listUsers/ListUsers.jsx"

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_home toneBlue
class node_pro_listing,node_pro_card,node_pro_filter,node_pro_form,node_location_data,node_pro_profile,node_pro_update,node_pro_actions,node_pro_types,node_pro_reducer toneAmber
class node_registration,node_login,node_auth_actions,node_auth_types,node_store,node_reducers,node_auth_reducer,node_api toneMint
class node_pending_page,node_user_actions,node_user_types,node_users_page,node_users_list toneRose
class node_visitor toneIndigo
```

## Components

### Web experience

- [App and routes](https://github.com/samshe531/client-bricolink/blob/master/src/App.js): `src/App.js`
- [Marketplace home](https://github.com/samshe531/client-bricolink/blob/master/src/pages/home/Home.jsx): `src/pages/home/Home.jsx`

### Professional marketplace

- [Professional listings](https://github.com/samshe531/client-bricolink/blob/master/src/components/listeValide/ListeValide.jsx): `src/components/listeValide/ListeValide.jsx`
- [Professional card](https://github.com/samshe531/client-bricolink/blob/master/src/components/cardProfessional/CardProfessional.jsx): `src/components/cardProfessional/CardProfessional.jsx`
- [Specialty filter](https://github.com/samshe531/client-bricolink/blob/master/src/components/filteringBySpec/FilterBySpec.jsx): `src/components/filteringBySpec/FilterBySpec.jsx`
- [Professional application](https://github.com/samshe531/client-bricolink/blob/master/src/components/form/Form.jsx): `src/components/form/Form.jsx`
- [Location choices](https://github.com/samshe531/client-bricolink/blob/master/src/components/form/cities.js): `src/components/form/cities.js`
- [Professional profile](https://github.com/samshe531/client-bricolink/blob/master/src/pages/professionalProfile/ProfessionalProfile.jsx): `src/pages/professionalProfile/ProfessionalProfile.jsx`
- [Edit professional](https://github.com/samshe531/client-bricolink/blob/master/src/components/updateProfessional/UpdateProfessional.jsx): `src/components/updateProfessional/UpdateProfessional.jsx`
- [Professional actions](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/bPro.action.js): `src/JS/actions/bPro.action.js`
- [Professional action types](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/bPro.actionType.js): `src/JS/actionType/bPro.actionType.js`
- [Professional state](https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/bPro.reducer.js): `src/JS/reducers/bPro.reducer.js`

### Identity and state

- [Registration page](https://github.com/samshe531/client-bricolink/blob/master/src/pages/register/Register.jsx): `src/pages/register/Register.jsx`
- [Login page](https://github.com/samshe531/client-bricolink/blob/master/src/pages/login/Login.jsx): `src/pages/login/Login.jsx`
- [Authentication actions](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/auth.action.js): `src/JS/actions/auth.action.js`
- [Authentication action types](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/auth.actionType.js): `src/JS/actionType/auth.actionType.js`
- [Redux store](https://github.com/samshe531/client-bricolink/blob/master/src/JS/store/store.js): `src/JS/store/store.js`
- [Redux reducers](https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/index.js): `src/JS/reducers/index.js`
- [Auth state](https://github.com/samshe531/client-bricolink/blob/master/src/JS/reducers/auth.reducer.js): `src/JS/reducers/auth.reducer.js`

### Administration

- [Pending applications](https://github.com/samshe531/client-bricolink/blob/master/src/pages/listeEnAttente/listeEnAttente.jsx): `src/pages/listeEnAttente/listeEnAttente.jsx`
- [User actions](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actions/user.action.js): `src/JS/actions/user.action.js`
- [User action types](https://github.com/samshe531/client-bricolink/blob/master/src/JS/actionType/user.actionType.js): `src/JS/actionType/user.actionType.js`
- [User dashboard](https://github.com/samshe531/client-bricolink/blob/master/src/pages/dashBoard/DashBoard.jsx): `src/pages/dashBoard/DashBoard.jsx`
- [User list](https://github.com/samshe531/client-bricolink/blob/master/src/components/listUsers/ListUsers.jsx): `src/components/listUsers/ListUsers.jsx`

### Other components

- **Visitor**
- **Backend API**

## Connections

- Visitor → App and routes: opens
- App and routes → Marketplace home: routes to (evidence: `src/App.js`)
- App and routes → Registration page: routes to (evidence: `src/App.js`)
- App and routes → Login page: routes to (evidence: `src/App.js`)
- App and routes → Pending applications: routes to (evidence: `src/App.js`)
- App and routes → Professional application: routes to (evidence: `src/App.js`)
- App and routes → Professional profile: routes to (evidence: `src/App.js`)
- App and routes → Edit professional: routes to (evidence: `src/App.js`)
- App and routes → User dashboard: routes to (evidence: `src/App.js`)
- App and routes → Authentication actions: checks session (evidence: `src/App.js`)
- App and routes → Professional actions: loads professionals (evidence: `src/App.js`)
- Marketplace home → Professional actions: requests list (evidence: `src/pages/home/Home.jsx`)
- Marketplace home → Professional listings: renders (evidence: `src/pages/home/Home.jsx`)
- Professional listings → Professional card: renders (evidence: `src/components/listeValide/ListeValide.jsx`)
- Professional listings → Specialty filter: renders (evidence: `src/components/listeValide/ListeValide.jsx`)
- Professional card → User actions: uses validation control (evidence: `src/components/cardProfessional/CardProfessional.jsx`)
- Registration page → Authentication actions: submits registration (evidence: `src/pages/register/Register.jsx`)
- Login page → Authentication actions: submits credentials (evidence: `src/pages/login/Login.jsx`)
- Authentication actions → Backend API: sends auth requests (evidence: `src/JS/actions/auth.action.js`)
- Authentication actions → Authentication action types: dispatches (evidence: `src/JS/actions/auth.action.js`)
- Professional actions → Backend API: requests professional data (evidence: `src/JS/actions/bPro.action.js`)
- Professional actions → Professional action types: dispatches (evidence: `src/JS/actions/bPro.action.js`)
- Professional profile → Professional actions: loads profile (evidence: `src/pages/professionalProfile/ProfessionalProfile.jsx`)
- Edit professional → Professional actions: submits update (evidence: `src/components/updateProfessional/UpdateProfessional.jsx`)
- Professional application → Professional actions: submits application (evidence: `src/JS/actions/bPro.action.js`)
- Professional application → Location choices: uses location options (evidence: `src/components/form/Form.jsx`)
- Edit professional → Location choices: uses location options (evidence: `src/components/updateProfessional/UpdateProfessional.jsx`)
- Pending applications → Professional actions: loads pending list (evidence: `src/pages/listeEnAttente/listeEnAttente.jsx`)
- User dashboard → User actions: loads users (evidence: `src/pages/dashBoard/DashBoard.jsx`)
- User dashboard → User list: renders (evidence: `src/pages/dashBoard/DashBoard.jsx`)
- Redux store → Redux reducers: configures (evidence: `src/JS/store/store.js`)
- Redux reducers → Auth state: combines (evidence: `src/JS/reducers/index.js`)
- Redux reducers → Professional state: combines (evidence: `src/JS/reducers/index.js`)
- Auth state → Authentication action types: handles (evidence: `src/JS/reducers/auth.reducer.js`)
- Professional state → Professional action types: handles (evidence: `src/JS/reducers/bPro.reducer.js`)