E-Commerce | Workshop Axios-CRUD 🏪

Descripción del desarrollo

Crear un e-commerce usando lo aprendido en JavaScript (Eventos DOM, funciones, condicionales, objetos, arreglos, métodos de arreglos, localStorage, promesas, asincronías, peticiones HTTPs, hacer uso de CSS para realizar el diseño responsive).

Desarrollo del Trabajo

Para el desarrollo del trabajo se cumplió con lo solicitado en el documento proporcionado, se crearon funciones para:

• Mostrar los Productos
• Sumar/Restar Productos del Carrito
• Agregar a Favoritos
• Eliminar producto de Favoritos
• Agregar productos al carrito y total de productos agregados y precio
• Eliminar productos del Carrito
• Muestra de la Factura de los Productos (Total final de la compra)
• Solicitud de Datos y Compra final
• Validacion de datos del adminsitrador
• Mostrar los productos actuales
• Modificar Los Productos actuales
• Eliminar Producto
• Agregar un nuevo Producto
• Mostrar compras de Usuarios

Tambien se realizaron peticiones HTTPS como PUT, POST, GET y DELETE las cuales nos permitieron:

• Obtener Datos de la API
• Subir Datos a la API
• Eliminar Datos de la API
• Actualizar con Nuevos Datos

Tambien se trabajo con localStorage para

• Manejar datos y mostrar en tiempo real el carrito del usuario
• Manejar datos y mostrar en tiempo real los objetos favoritos del usuario

Ademas se uso sessionStorage para

• Validar del login en el panel de administrador
• Restringir acceso de usuarios al panel de administrador

Librerías externas implementadas

Las librerías utilizadas fueron la de Axios, Bootstrap, sweetalert y AnimateCSS

• Axios es una librería la cual nos permite trabajar de manera más rápida y cómoda con peticiones HTTPS.
• Bootstrap es una librería la cual nos permite usar algunos estilos y trabajar con CSS de manera más cómoda y rápida,
• SweetAlert es una libreria que nos permite tener popouts boxes de manera customizable y sencilla
• AnimateCSS es una libreria que nos permite tener animaciones CSS de manera rápida y sencilla.

Estructura de carpetas del proyecto

La estructura de las carpetas es la siguiente:

• 📁 css
  • css almacena el css de todos los sitios, cart, admin, login, wishlist
• 📁 db
  • db es una carpeta donde esta almacenado el db.json el cual permite usarlo como Fake API para poder montar ahi los productos, los usuarios, las compras, y los favoritos
• 📁 imgs
  • en esta carpeta se almacenan todas las imagene relacionadas con el sitio, tanto logos, products, imagenes de las cards etc.
• 📁 pages
  • en esta carpeta se almacen las otras paginas del sitio, como lo son: wishlist, login, admin y cart.
• 📁 scripts
  • en esta carpeta se almacena todos los archivos js para cada sitio, donde en estos se escribio la logica para el funcionamiento del sitio y los puntos requeridos.
• 📁 services
  • en esta carpeta se almacenan un archivo JS el cual nos permite manejar la logica de verificar el login del usuario.

Vistas de las pantallas: desktop, mobile

Estadísticas de Wakatime

Wakatime Enlace