# jimenezreyesjoseantonio/noticias-front architecture

> Architecture diagram of the GitHub repository jimenezreyesjoseantonio/noticias-front, 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/jimenezreyesjoseantonio/noticias-front
- Repository: https://github.com/jimenezreyesjoseantonio/noticias-front

## Overview

Noti-Oax is a Vue frontend for browsing Oaxaca news and managing articles and accounts. Readers land on a news listing, filter by category, and open article details; authenticated users can sign in to create, edit, or delete articles, while admins can create accounts. The app shell and router provide navigation and client-side role checks; views call a shared Axios client, which attaches a locally stored token. The README is empty, so capabilities and relationships here are based on the sampled source and source index; the backend implementation was not provided.

Main entry points: [`noti-oax-frontend/src/router/index.js`](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/router/index.js) (Route guard), [`noti-oax-frontend/src/services/api.js`](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/services/api.js) (API client), [`noti-oax-frontend/src/App.vue`](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/App.vue) (App shell), [`noti-oax-frontend/src/views/LoginView.vue`](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/LoginView.vue) (Sign in)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App and navigation"]
  node_app["App shell<br/>[App.vue]"]
  node_router["Route guard<br/>[index.js]"]
  node_api_client["API client<br/>[api.js]"]
  node_browser_storage[("Browser local storage")]
end

subgraph group_news["News experience"]
  node_home["News home<br/>[HomeView.vue]"]
  node_detail["Article detail"]
  node_create_article["Create article"]
  node_edit_article["Edit article"]
end

subgraph group_accounts["Accounts and authoring"]
  node_login["Sign in<br/>[LoginView.vue]"]
  node_create_user["Create account"]
end

node_visitor(("Visitor"))
node_backend{{"Noti-Oax API"}}

node_visitor -->|"uses"| node_app
node_app -->|"renders routes"| node_router
node_app -->|"reads and clears session"| node_browser_storage
node_router -->|"checks session"| node_browser_storage
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_detail
node_router -->|"routes to"| node_create_article
node_router -->|"routes to"| node_edit_article
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_create_user
node_home -->|"requests news and team"| node_api_client
node_detail -->|"loads and deletes articles"| node_api_client
node_create_article -->|"publishes and uploads"| node_api_client
node_edit_article -->|"loads, updates, uploads"| node_api_client
node_login -->|"submits credentials"| node_api_client
node_login -->|"stores session"| node_browser_storage
node_create_user -->|"creates account"| node_api_client
node_api_client -->|"reads token"| node_browser_storage
node_api_client -->|"sends API requests"| node_backend

click node_app "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/App.vue"
click node_router "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/router/index.js"
click node_home "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/HomeView.vue"
click node_detail "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/DetalleNoticiaView.vue"
click node_create_article "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/CrearNoticiaView.vue"
click node_edit_article "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/EditarNoticiaView.vue"
click node_login "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/LoginView.vue"
click node_create_user "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/CrearUsuarioView.vue"
click node_api_client "https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/services/api.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_router,node_api_client,node_browser_storage toneBlue
class node_home,node_detail,node_create_article,node_edit_article toneAmber
class node_login,node_create_user,node_backend toneMint
class node_visitor toneIndigo
```

## Components

### App and navigation

- [App shell](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/App.vue): `noti-oax-frontend/src/App.vue`
- [Route guard](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/router/index.js): `noti-oax-frontend/src/router/index.js`
- [API client](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/services/api.js): `noti-oax-frontend/src/services/api.js`
- **Browser local storage**

### News experience

- [News home](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/HomeView.vue): `noti-oax-frontend/src/views/HomeView.vue`
- [Article detail](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/DetalleNoticiaView.vue): `noti-oax-frontend/src/views/DetalleNoticiaView.vue`
- [Create article](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/CrearNoticiaView.vue): `noti-oax-frontend/src/views/CrearNoticiaView.vue`
- [Edit article](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/EditarNoticiaView.vue): `noti-oax-frontend/src/views/EditarNoticiaView.vue`

### Accounts and authoring

- [Sign in](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/LoginView.vue): `noti-oax-frontend/src/views/LoginView.vue`
- [Create account](https://github.com/jimenezreyesjoseantonio/noticias-front/blob/main/noti-oax-frontend/src/views/CrearUsuarioView.vue): `noti-oax-frontend/src/views/CrearUsuarioView.vue`

### Other components

- **Visitor**
- **Noti-Oax API**

## Connections

- Visitor → App shell: uses
- App shell → Route guard: renders routes (evidence: `noti-oax-frontend/src/App.vue`)
- App shell → Browser local storage: reads and clears session (evidence: `noti-oax-frontend/src/App.vue`)
- Route guard → Browser local storage: checks session (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → News home: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → Article detail: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → Create article: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → Edit article: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → Sign in: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- Route guard → Create account: routes to (evidence: `noti-oax-frontend/src/router/index.js`)
- News home → API client: requests news and team (evidence: `noti-oax-frontend/src/views/HomeView.vue`)
- Article detail → API client: loads and deletes articles (evidence: `noti-oax-frontend/src/views/DetalleNoticiaView.vue`)
- Create article → API client: publishes and uploads (evidence: `noti-oax-frontend/src/views/CrearNoticiaView.vue`)
- Edit article → API client: loads, updates, uploads (evidence: `noti-oax-frontend/src/views/EditarNoticiaView.vue`)
- Sign in → API client: submits credentials (evidence: `noti-oax-frontend/src/views/LoginView.vue`)
- Sign in → Browser local storage: stores session (evidence: `noti-oax-frontend/src/views/LoginView.vue`)
- Create account → API client: creates account (evidence: `noti-oax-frontend/src/views/CrearUsuarioView.vue`)
- API client → Browser local storage: reads token (evidence: `noti-oax-frontend/src/services/api.js`)
- API client → Noti-Oax API: sends API requests (evidence: `noti-oax-frontend/src/services/api.js`)