Esta página funciona como una tienda de ventas de diversos productos online, mostramos el nombre de los productos, una descripción, su precio, la cantidad disponible, la categoría del producto y una imagen de este, las funciones que tiene la página son las siguientes:
- Crear productos: Tenemos una sección para crear los productos llenando un formulario con todos los datos que se deben mostrar, los cuales son: El nombre de los productos, la descripción, el precio, la cantidad disponible, la categoría del producto y una imagen de este.
- Eliminar productos: Con el botón de eliminar productos como su nombre lo indica, podremos eliminar los productos.
- Actualizar: Podremos actualizar productos ya creados rellenando un formulario que ya viene por defecto con la información del producto, solo debemos editar dicha información para actualizar el producto.
- Buscar productos: Tenemos una barra de búsqueda para buscar los productos por su nombre y así encontrarlos fácilmente.
- Detalles de los productos: En las tarjetas de vista previa no se ven todos los detalles del producto, pero si le damos clic a cualquier parte de dicha tarjeta nos llevara a una página donde salen los detalles completos de producto; también es allí donde se encuentra el botón de actualizar y de eliminar.
- Paginador: Tenemos un paginador en la página que nos permite dividirla en secciones, para así lograr que los productos no se acumulen en una sola página y tener más orden.
- Regístrate: Tenemos una vista de registro donde el usuario puede crear su cuenta rellenando los campos de nombre, apellido, correo electrónico, contraseña y repetir contraseña, y así podar crear su cuenta.
- Inicio de sesión: El usuario luego de registrarse podrá iniciar sesión siempre que quiera solo con su correo electrónico y su contraseña.
- Lista de usuarios: En esta lista el administrador de la página podrá ver los datos de todos los usuarios, eliminarlos, o editarlos si así lo desea.
- Editar usuario: En esta página el usuario podrá editar todos los datos de su cuanta, teniendo la opción de agregar su número de teléfono y su dirección; esta zona también funcionara como una especie de “My Profile” ya que el usuario podrá ver los datos que ya registro.
Una lista de tecnologías utilizadas dentro del proyecto:
- [Vite]: Versión ^4.3.9
- [React]: Versión ^18.2.0
- [Tailwind]: Versión ^3.3.2
- [Node]: Versión 6.0.0
- [Express]: Versión ^4.18.2
- [Cloudinary]: Versión ^1.37.0
- [Mongoose]: Versión ^7.2.2
- [Bulma.io]: versión ^0.9.4
- [Axios]: version ^1.4.0
- [FontAwesome]: version ^6.4.2
Lo primero que deberemos hacer será clonar el repositorio y luego seguir los siguientes pasos para ejecutar el proyecto:
- Necesitamos abrir el proyecto en nuestro editor de código.
- Luego debemos seguir los siguientes pasos para ejecutar el Api y el Cliente, pero empezamos por el Api.
- Para correr el Api lo primero que debemos hacer es abrir una terminal y colocar los siguientes tres códigos, uno por uno, para correr la base de datos:
-
cd Api
-
npm i
-
npm run start
- Y ya estaría corriendo nuestra base de datos.
- Para correr el Cliente lo primero que debemos hacer es abrir una terminal (diferente a la del Api de preferencia) y colocar los siguientes tres códigos, uno por uno, para correr el Cliente:
-
cd Client
-
npm i
-
npm run dev
- Y ya estaría corriendo nuestro cliente, y solo debemos ir al link que nos da la terminal.