# edwardosamosir/cnbc-news-portal-clone-reactjs architecture

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

- Interactive diagram: https://gitdiagram.com/edwardosamosir/cnbc-news-portal-clone-reactjs
- Repository: https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs

## Overview

This repository is a news publishing system: administrators manage accounts, posts, categories, and tags, while readers browse news and open article details. The backend provides authentication and content endpoints backed by Sequelize models. The sampled sources confirm app mounting and backend middleware, but do not show the route-to-controller or frontend-to-API calls; those links are therefore omitted. Frontend page and state responsibilities are inferred from the file tree.

Main entry points: [`client-user/src/App.jsx`](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-user/src/App.jsx) (Reader app), [`client-admin/src/App.jsx`](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-admin/src/App.jsx) (Admin app), [`server/routes/index.js`](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/routes/index.js) (API routes), [`server/middleware/authentication.js`](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/middleware/authentication.js) (Authentication)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_reader["Reader experience"]
  node_reader_app["Reader app<br/>[App.jsx]"]
  node_reader_pages["News pages"]
  node_reader_components["News display"]
  node_reader_router["Reader routing<br/>[index.jsx]"]
  node_reader_store["Reader state"]
end

subgraph group_admin["Content administration"]
  node_admin_app["Admin app<br/>[App.jsx]"]
  node_admin_pages["Management pages"]
  node_admin_components["Admin components"]
  node_admin_router["Admin routing<br/>[index.jsx]"]
  node_admin_store["Admin state"]
end

subgraph group_backend["API and content"]
  node_api_server["HTTP server<br/>[app.js]"]
  node_api_routes["API routes<br/>[index.js]"]
  node_auth["Authentication<br/>[authentication.js]"]
  node_controllers["Content handlers<br/>[index.js]"]
  node_errors["Error responses<br/>[errorHandler.js]"]
  node_models["Content models"]
  node_database[("Application database<br/>[index.js]")]
  node_tokens["JWT helper"]
end

node_reader_actor(("News reader"))
node_admin_actor(("Administrator"))

node_reader_actor -->|"uses"| node_reader_app
node_reader_app -->|"renders routes"| node_reader_router
node_reader_app -->|"provides state"| node_reader_store
node_admin_actor -->|"uses"| node_admin_app
node_admin_app -->|"renders routes"| node_admin_router
node_admin_app -->|"provides state"| node_admin_store
node_api_server -->|"mounts routes"| node_api_routes
node_api_routes -->|"applies middleware"| node_auth
node_api_routes -->|"registers handler"| node_errors
node_auth -->|"decodes token"| node_tokens
node_auth -->|"looks up user"| node_models
node_controllers -->|"queries and updates"| node_models
node_models -->|"initializes"| node_database

click node_reader_app "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-user/src/App.jsx"
click node_reader_pages "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/views"
click node_reader_components "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/components"
click node_reader_router "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-user/src/router/index.jsx"
click node_reader_store "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/store"
click node_admin_app "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-admin/src/App.jsx"
click node_admin_pages "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/views"
click node_admin_components "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/components"
click node_admin_router "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-admin/src/router/index.jsx"
click node_admin_store "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/store"
click node_api_server "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/app.js"
click node_api_routes "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/routes/index.js"
click node_auth "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/middleware/authentication.js"
click node_controllers "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/controllers/index.js"
click node_errors "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/middleware/errorHandler.js"
click node_models "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/server/models"
click node_database "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/models/index.js"
click node_tokens "https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/helpers/jwt-encode-decode.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_reader_app,node_reader_pages,node_reader_components,node_reader_router,node_reader_store toneBlue
class node_admin_app,node_admin_pages,node_admin_components,node_admin_router,node_admin_store toneAmber
class node_api_server,node_api_routes,node_auth,node_controllers,node_errors,node_models,node_database,node_tokens toneMint
class node_reader_actor,node_admin_actor toneIndigo
```

## Components

### Reader experience

- [Reader app](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-user/src/App.jsx): `client-user/src/App.jsx`
- [News pages](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/views): `client-user/src/views`
- [News display](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/components): `client-user/src/components`
- [Reader routing](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-user/src/router/index.jsx): `client-user/src/router/index.jsx`
- [Reader state](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-user/src/store): `client-user/src/store`

### Content administration

- [Admin app](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-admin/src/App.jsx): `client-admin/src/App.jsx`
- [Management pages](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/views): `client-admin/src/views`
- [Admin components](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/components): `client-admin/src/components`
- [Admin routing](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/client-admin/src/router/index.jsx): `client-admin/src/router/index.jsx`
- [Admin state](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/client-admin/src/store): `client-admin/src/store`

### API and content

- [HTTP server](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/app.js): `server/app.js`
- [API routes](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/routes/index.js): `server/routes/index.js`
- [Authentication](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/middleware/authentication.js): `server/middleware/authentication.js`
- [Content handlers](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/controllers/index.js): `server/controllers/index.js`
- [Error responses](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/middleware/errorHandler.js): `server/middleware/errorHandler.js`
- [Content models](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/tree/main/server/models): `server/models`
- [Application database](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/models/index.js): `server/models/index.js`
- [JWT helper](https://github.com/edwardosamosir/cnbc-news-portal-clone-reactjs/blob/main/server/helpers/jwt-encode-decode.js): `server/helpers/jwt-encode-decode.js`

### Other components

- **News reader**
- **Administrator**

## Connections

- News reader → Reader app: uses
- Reader app → Reader routing: renders routes
- Reader app → Reader state: provides state
- Administrator → Admin app: uses
- Admin app → Admin routing: renders routes
- Admin app → Admin state: provides state
- HTTP server → API routes: mounts routes
- API routes → Authentication: applies middleware
- API routes → Error responses: registers handler
- Authentication → JWT helper: decodes token
- Authentication → Content models: looks up user
- Content handlers → Content models: queries and updates
- Content models → Application database: initializes