Shopping Cart -Prueba Técnica

Buscar, Filtrar y a pochoclear 🍿

Muestra de unas de las pruebas técnicas que he realizado para perfeccionarme como desarrollador

En este caso de prueba, he aplicado los conocimientos basicos en React Router, donde se evalua la interaccion con una API, el manejo de documentacion, la manipulacion de datos extraidos y su implementacion en los componentes correspondientes.

Requerimientos de la prueba técnica

✅ Necesita mostrar un input para buscar la película y un botón para buscar.
✅ Lista las películas y muestra el título, año y poster.
✅ Que el formulario funcione
✅ Haz que las películas se muestren en un grid responsive.
✅ Hacer el fetching de datos a la API

Primera iteración:

✅ Evitar que se haga la misma búsqueda dos veces seguidas.
✅ Haz que la búsqueda se haga automáticamente al escribir.
✅ Evita que se haga la búsqueda continuamente al escribir (debounce)

Herramientas

He utilizado el empaquetador de aplicaciones Web Vite el cual es una alternativa a Webpack, con mayor fluidez y adaptabilidad. Por cuestiones de aprendizaje, el proyecto es creado de forma vanilla, es decir, sin pre instalaciones de depencias de React, con el objetivo de dominar todos los aspectos del framework y no depender de los empaquetadores para obtener el punto de entrada de nuestras aplicaciones. Como hemos mencionado, aplicacomos las dependencias correspondientes para el correcto funcionamiento de React:

npm react
npm react dom -E

Esta escrito en React 100% vanilla, conjunto a CSS Standar. Para mantener un código limpio y consistente he usado Eslint, el cual facilita encontrar y corregir problemas de estilo, errores de sintaxis y posibles problemas en el código.

• Preferencia: JSStandar

Como herramienta de compilacion, he aplicado SWC que esta desarrollado en Rust y es uno de los compiladores mas renombrados en la actualidad.

Descripción Técnica

Acontinuacion describire algunos puntos claves del desarrollo de esta aplicacion Web:

---

• Diseño de la Interfaz: Implementa una interfaz sencilla dado al tiempo de desarrollo, en el cual se puede realizar la interacción mínima para su funcionamiento.

  
  

• Visualización de Resultados: Desarrollé la lógica para mostrar los resultados de búsqueda en un grid responsive, mostrando título, año y póster de las películas.

  
  

• Implementación del Formulario: Aseguré el funcionamiento del formulario para realizar búsquedas, gestionando los eventos de entrada y clic.

  
  

• Evitar Búsquedas Redundantes: Implementé una lógica que evita realizar la misma búsqueda dos veces seguidas, mejorando la eficiencia.

  
  

• RExperiencia de Usuario: La habilitación de la búsqueda automática proporciona al usuario una experiencia más dinámica,además se implemento búsquedas continuas al escribir mediante la implementación de un debounce, optimizando la carga de la API.

  
  

Este enfoque técnico garantiza un rendimiento eficiente, una experiencia de usuario fluida y un mantenimiento sencillo en el desarrollo del Shopping Cart con React y Vite, conectándolo a la API de OMDB para obtener información actualizada sobre películas.