React_Cherry_Demo

React Cherry Demo

Este es un proyecto web realizado por React y Material UI. En este proyecto, tenemos una página de sistema de usuarios, productos y pedidos, y obteniendo una API de formulario de datos.

En el sistema de usuario, tenemos un registro y una página de inicio de sesión, que puede registrar un nuevo usuario e iniciar sesión por el usuario. Si no iniciamos sesión como usuario, solo podemos acceder a la página de inicio, de lo contrario podemos ingresar la página de productos y pedidos para verificar los datos de productos y pedidos de API.

En la página de productos, obtenemos todos los datos de productos de API y los mostramos en la tabla colapsada de la interfaz de usuario de material con paginación, clasificación y búsqueda, cada productos se puede editar y eliminar, también podemos agregar nuevos productos y cargar imagen en productos.

En la página de órdenes, igual que la página de productos, obtenemos todos los datos de pedidos de API y mostramos en la tabla. La fila de pedidos se puede filtrar por fecha.

Tanto los productos como la página de pedidos pueden exportar datos al archivo CSV.

Dependencias utilizadas

Ui material

npm install @material-ui/core

Material UI comienza

Axios

npm install axios

Axios comienza

React Router DOM

npm install react-router-dom

React Router DOM Comienza

Reaccionar CSV

npm i react-csv

React CSV instalado

Captura de pantalla del proyecto

Página de inicio

Página de inicio de sesión

Página de registro

Página de productos

Agregar producto

Editar producto

Eliminar el producto

Búsqueda de productos

Hilandero

Órdenes con diferentes paginación

Filtro de fecha de pedidos