Skip to content

Frontend

El frontend és la part encarregada de la visualització, interacció amb l’usuari i consum dels serveis de backend i API, permetent gestionar i mostrar tant les dades dels CV com les ofertes de feina captades.

1. Estructura i Arquitectura

  • Desenvolupat amb React.js com a llibreria principal.
  • Arquitectura modular:
  • Components reutilitzables (Navbar, Footer, Cards, Gràfiques…)
  • Pàgines dedicades (Home, Dashboard)
  • Plantilles de CV separades (CVDark.jsx, CVFormal.jsx, CVModern.jsx)

Estructura del projecte React
Figura 1: Ex:Diferents Plantilles

2. Gestor de Plantilles de CV

Les plantilles estan dissenyades per separar les diferents seccions d’un CV i permeten mostrar dades dinàmiques passades com a props.Aqui tenim un exemple de la reactivitat.

Estructura del projecte React
Figura 2:Plantilles Reactives

Plantilles incloses:

  • CVDark: Estil minimalista i fosc, ideal per a presentacions modernes.
  • CVFormal: Disposició clàssica, estructurada per seccions formals.
  • CVModern: Plantilla amb sidebar lateral i seccions addicionals com idiomes i hobbies.

3. Dashboard d’Ofertes

El dashboard integra visualitzacions i filtres per mostrar ofertes de feina:

  • Obtenció de dades via peticions fetch a l’API backend.
  • Filtrat per:
  • Ubicació geogràfica
  • Tags o tecnologies associades a les ofertes
  • Visualització de resultats amb targetes individuals i gràfiques estadístiques

Estructura del projecte React
Figura 3:Cartes de Ofertes
### 3.1 Gràfica Aquesta secció s'encarrega de mostrar la gràfica de manera visual, la qual canvia dinàmicament segons els filtres seleccionats.

Estructura del projecte React
Figura 4: Grafica

## --- ## 4. Datatables i Register - En aquest apartat havíem pensat que, de cara al futur, es podrien implementar restriccions i, per això, vam crear un CRUD bàsic per gestionar els usuaris. - La idea de gestionar usuaris sorgeix perquè, en el futur, si els usuaris volguessin guardar el seu currículum, s’haurien de registrar.

Estructura del projecte React
Figura 4:Administracio d'usuaris
## 5. Connexió amb API Backend - La comunicació es realitza mitjançant **fetch API** per obtenir JSON de les ofertes. - Els filtres s’apliquen al frontend per evitar múltiples peticions. - Gestió d’estats amb `useState` i `useEffect` per actualitzar la UI en temps real.

Estructura del projecte React
Figura 5:Botons per fer la Crida de la Api