Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/JuanSebax85/frontend-prueba-fullstack/llms.txt

Use this file to discover all available pages before exploring further.

Every HTTP request in the application flows through a single shared Axios instance defined in src/services/api.js. This centralises the base URL configuration and makes it straightforward to add interceptors or default headers in the future. All six feature components import this instance directly — no fetch calls or additional HTTP libraries are used.

​
The Axios instance

src/services/api.js creates and exports one Axios instance with baseURL set from the REACT_APP_API_URL environment variable.
src/services/api.js
import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});

export default api;
REACT_APP_API_URL must be defined at build time (Create React App inlines environment variables prefixed with REACT_APP_ during npm run build). A typical value is http://localhost:8080. See Environment Configuration for how to set this in Docker.
If REACT_APP_API_URL is undefined at build time, all API calls will use a relative path and will fail unless the backend is served from the same origin.

​
Importing the client

Each component imports api with the same one-liner: 
import api from "../../services/api";

​
HTTP methods in use

The application uses all four standard REST methods. The examples below are taken directly from the component source code. 
// AlumnosLista.js
api.get("/alumnos")
  .then(res => {
    const ordenados = [...res.data].sort((a, b) =>
      a.apellido.localeCompare(b.apellido)
    );
    setAlumnos(ordenados);
  })
  .catch(err => console.log(err));

// MateriasLista.js
api.get("/materias")
  .then(res => {
    const ordenadas = [...res.data].sort((a, b) =>
      a.nombre.localeCompare(b.nombre)
    );
    setMaterias(ordenadas);
  });

// NotasLista.js
api.get("/notas")
  .then(res => {
    const ordenadas = res.data.sort((a, b) =>
      a.alumnoApellido.localeCompare(b.alumnoApellido)
    );
    setNotas(ordenadas);
  });

​
Response data shapes

The shapes below are inferred from how each component reads res.data.

​
Alumno

{
  "id": 1,
  "nombre": "Juan",
  "apellido": "Pérez",
  "email": "juan.perez@example.com",
  "fechaNacimiento": "2000-05-15"
}
FieldTypeNotes
idnumberPrimary key, present on existing records
nombrestringFirst name
apellidostringLast name, used for alphabetical sorting
emailstringEmail address
fechaNacimientostringISO date string (YYYY-MM-DD)

​
Materia

{
  "id": 3,
  "nombre": "Matemáticas"
}
FieldTypeNotes
idnumberPrimary key
nombrestringSubject name, used for alphabetical sorting

​
Nota

{
  "id": 7,
  "alumnoId": 1,
  "alumnoNombre": "Juan",
  "alumnoApellido": "Pérez",
  "materiaId": 3,
  "materiaNombre": "Matemáticas",
  "valor": 8.5
}
FieldTypeNotes
idnumberPrimary key
alumnoIdnumberForeign key to Alumno
alumnoNombrestringDenormalised first name for display
alumnoApellidostringDenormalised last name, used for sorting
materiaIdnumberForeign key to Materia
materiaNombrestringDenormalised subject name for display
valornumberNumeric grade value (step 0.1)
The POST/PUT payload for Notas uses a nested object format rather than flat IDs: { alumno: { id }, materia: { id }, valor }. This matches the backend’s expected request body.

​
Error handling patterns

Two distinct patterns are used across the components. Validation errors (client-side): Form components validate required fields before making any network call. If validation fails, they set an error string and set mostrarError to true, which renders a modal overlay with the message.
Client-side validation (AlumnosFormulario.js)
if (
  !alumno.nombre.trim() ||
  !alumno.apellido.trim() ||
  !alumno.email.trim() ||
  !alumno.fechaNacimiento
) {
  setError("Todos los campos son obligatorios");
  setMostrarError(true);
  return; // abort — no API call is made
}
Server errors (DELETE constraints): List components catch errors from DELETE requests and display the backend’s message field if present, or a default message explaining that the record has dependent grades.
Server error handling (AlumnosLista.js)
api.delete(`/alumnos/${alumno.id}`)
  .catch((error) => {
    const mensaje = error.response?.data?.message;
    setError(
      mensaje ||
      "Error: el alumno tiene notas registradas en el sistema..."
    );
    setMostrarError(true);
  });
The error modal is dismissed by clicking a close button that sets mostrarError back to false.

Build docs developers (and LLMs) love

Get started for freeTalk to us