Prueba Técnica Front-End tipo C

By

 Instrucciones generales

  • El proyecto debe ser desarrollado utilizando React , React Router , Axios y Sass .
  • Debes estructurar tu código de manera limpia y modular.
  • Al finalizar, sube tu proyecto a GitHub y comparte el enlace.

Ejercicio 1: Creación de una aplicación de productos.

Descripción:

Desarrolla una aplicación web que permita visualizar una lista de productos obtenida desde una API pública. La aplicación debe tener las siguientes características:

Página principal : Muestra una lista de productos con su nombre, precio y una imagen. Usa la siguiente API pública:

  • https://fakestoreapi.com/products

Detalles del producto : Al hacer clic en un producto, redirige al usuario a una página de detalles donde se muestre más información sobre el producto (nombre, descripción, precio, categoría e imagen).

Estilos con Sass : Usa Sass para estilizar la aplicación. Asegúrate de que los componentes tengan un diseño limpio y profesional.

Manejo de errores : Si ocurre un error al cargar los datos, muestra un mensaje de error amigable.


Requisitos técnicos:

  • Usa React Router para manejar las rutas (/ para la lista de productos y /product/:id para los detalles).
  • Usa Axios para realizar las peticiones HTTP.
  • Usa useState y useEffect para manejar el estado y cargar los datos.

Ejercicio 2: Simulación de carrito de compras

Descripción:

Agrega funcionalidad de carrito de compras a la aplicación anterior. Implementa las siguientes características:


Agregar al carrito : En la página de detalles del producto, agrega un botón "Agregar al carrito". Al hacer clic, el producto debe añadirse al carrito.

Ver carrito : Agrega una nueva ruta (/cart) donde se muestre una lista de los productos agregados al carrito con su nombre, precio y cantidad.

Total del carrito : Calcula y muestra el total del carrito en la página del carrito.

Eliminar producto : Permite eliminar productos del carrito.


Requisitos técnicos:

  • Usa useState para manejar el estado del carrito.
  • Usa React Router para agregar la nueva ruta del carrito.
  • Estiliza el carrito usando Sass .


Sube el proyecto a GitHub y GitHub Pages y deja los enlaces como comentario en el presente blog.




9 comentarios:

  1. Santiago Morales11 de abril de 2025, 8:36 p.m.

    Enlaces de ejercicios de parcial, repositorios GITHUB: https://github.com/SantiM78/products-app y https://github.com/SantiM78/shopping-cart

    ResponderBorrar
  2. Alejandro Forero Saavedra12 de abril de 2025, 8:03 a.m.

    Enlace parcial reporitorio GitHub https://github.com/TheBigMaster254/Examen-Vite.git

    ResponderBorrar
  3. Andrey Corchuelo12 de abril de 2025, 8:30 a.m.

    Enlace parcial (subir volumen) https://github.com/RobertCorchuelo/AppProductos.git

    ResponderBorrar
  4. Kaleth Santiago Triana Barrios12 de abril de 2025, 8:50 a.m.

    Enlace parcial repositorio GitHub:

    https://github.com/kaletho811/parcial-corte2-F

    ResponderBorrar
  5. Diegoleon Montero12 de abril de 2025, 10:07 a.m.

    Enlace del parcial, repositorio GitHub

    https://github.com/Diego-lion/parcial-segundo-corte

    ResponderBorrar
  6. Santiago Ruiz12 de abril de 2025, 3:36 p.m.

    Enlace Parcial Segundo Corte: https://github.com/devsantiagox/QuickCart

    ResponderBorrar
  7. Johan David Vasquez12 de abril de 2025, 5:05 p.m.

    Enlace parcia: https://github.com/johan2806/Parcial.git

    ResponderBorrar
  8. Jeisson volveras12 de abril de 2025, 8:01 p.m.

    Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  9. Jeisson volveras12 de abril de 2025, 8:02 p.m.

    Enlace del parcial se debe dar en el boton inicio para correr el programa: https://jeissonestivenv.github.io/parcial1/?classId=ba98877f-829a-417b-b5ee-f38d7f2cccb3&assignmentId=03909d01-8192-4974-aa29-35031a39186f&submissionId=6d4c2234-c5f6-8efb-e917-93ef02465c18

    Git hub: https://github.com/jeissonestivenv/parcial1?classId=ba98877f-829a-417b-b5ee-f38d7f2cccb3&assignmentId=03909d01-8192-4974-aa29-35031a39186f&submissionId=6d4c2234-c5f6-8efb-e917-93ef02465c18

    ResponderBorrar