Este es un proyecto escolar, consiste en crear una App con React, Bootstrap y Firebase. Se requiere ordenar el listado de estudiantes según su calificación y promedio. Estos datos son obtenidos de un JSON desde un reporte de los estudiantes del centro.
- Debe mostrar el listado de estudiantes.
- Debe tener una barra de búsqueda para filtrar los estudiantes por curso.
- Debe tener una barra de búsqueda para filtrar los estudiantes por periodo.
- Debe tener una barra de búsqueda para filtrar los estudiantes por índice.
- Debe mostrar el listado de estudiantes con su índice académico.
- Debe mostrar el listado de estudiantes con su índice técnico.
- Debe mostrar el listado de estudiantes con su índice general.
- Debe ordenar el listado de estudiantes según su número de lista.
- Debe ordenar el listado de estudiantes según su índice académico.
- Debe ordenar el listado de estudiantes según su índice técnico.
- Debe ordenar el listado de estudiantes según su índice general.
- Debe obtener la información desde la base de datos del centro educativo.
- Debe contar con un sistema de inicio de sesión para saber quien usa esta app.
En este proyecto puedes correr los siguientes Scripts:
Para instalar los módulos necesarios de Node.
Ejecuta la aplicación en el modo de desarrollo.
Abra http://localhost:3000 para visualizarlo en el navegador.
La página se recargará si realiza modificaciones.
También verá cualquier error por la consola.
Construye la aplicación para producción en la carpeta build.
Agrupa correctamente React en el modo de producción y optimiza la compilación para obtener el mejor rendimiento.
La compilación se minimiza y los nombres de archivo incluyen los hash.
¡Tu aplicación está lista para salir a producción!
Para mas información visita la sección deployment.
Publica la aplicación usando GH Pages.
El primer paso del algoritmo es obtener los reportes por curso y periodo. Por ejemplo 4A:2020-2021.
La siguiente funcion nos sirve para formar la URL para el pedido de reportes:
getReportsURL.js
const getReportsURL = (curso, periodo) => {
/**
* @description: Obtener todos los reportes por curso y periodo.
* @param {String} curso Ejemplo: "4A"
* @param {String} Periodo Ejemplo: "2020-2021"
* @URL https://cemasapi.herokuapp.com/reportes/boletin/4A:2020-2021:
* @return {String} URL String URL .
*/
// code...
};El hook para gestionar los fecth al API es:
useFetch.js
import { useState, useEffect, useRef } from 'react';
export const useFetch = (url) => {
// code
}El componente que hace la peticion y usa el useFetch:
ListaBoletines.js
import { useFetch } from "../hooks/useFetch";
import ItemBoletin from "./ItemBoletin";
export default function ListaBoletines({ url }) {
// code...
}- Adonys Santos (Product Owner + Developer)
- Rusbert Sánchez (Product Owner + Developer)
- Yusset Roque Martinez (Developer)
- Leidy Laura (Developer)
- Gregory Pimentel (Developer)