Proyecto:E-commerce: Mi Tienda

Introducción:

¡Bienvenido a E-commerce: Mi tienda! Con formularios controlados, enrutamientos, carrito de compra y otras funcionalidades. Esta página web ofrece una experiencia de compra ficticia. Inspirado y orientado por la experiencia del profesor del bootcamp. Hemos diseñado esta página para brindar una simulación de compra en línea.

Tipo

  • Web App
  • Comercio electrónico

Herramientas:

  • React
  • React Router
  • Redux, Redux Toolkit
  • CSS & HTML
  • Javascript ES6
  • Axios
  • Git & GitHub
  • Firebase
  • Netlify

En vivo:

Propósito del proyecto

El propósito de este proyecto E-commerce ha sido combinar la dirección del profesor con mi habilidad para implementar sus enseñanzas en un entorno práctico. Desde la idea inicial hasta la implementación final, he estado enfocada en integrar los elementos esenciales de la app.

Este proyecto no solo buscaba cumplir con los requisitos del bootcamp, sino también fomentar la participación activa de todos los estudiantes. Después de seguir las directrices del profesor, mediantes las tutorias impartidas, se hablaba y discutia todo lo desarrollado. Permitiendo que cada estudiante aportara sus ideas y perspectivas.

A través de este proceso colaborativo, buscamos no solo mejorar nuestras habilidades individuales, sino también enriquecer nuestra comprensión colectiva.

Mi papel en el proyecto

Como alumna en este proyecto E-commerce, mi papel ha sido fundamentalmente el de aprender y aplicar los conocimientos adquirido.

A lo largo del sprint, mi enfoque ha sido seguir las pautas establecidas, mientras exploraba cómo implementarlas en la práctica. En cada etapa del desarrollo, he buscado la orientación del profesor para comprender mejor los conceptos y abordar los desafíos que han surgido.

Gracias a todo lo que he aprendido, he podido encontrar las soluciones adecuadas y superar los desafíos planteados. Estos conocimientos no solo me han permitido alcanzar los objetivos del proyecto, sino también consolidarlos.

Imágenes del formulario de múltiples pasos

Web stack y su explicación

React: He utilizado componentes, props, renderizado condicional. useEffect para uso secundario como el tema de los colores. useState y useReducer para el manejo de estado.

Custom Hooks: Para extraer lógica compleja y reutilizable en la app. Esto me ha permitido mantener el código limpio y modular.

React Router: Con la función createBrowserRouter me ha permitido definir rutas y enlaces entre diferentes páginas.

Axios: Para realizar solicitudes HTTP a nuestro servidor y generar un CRUD para interactuar con los datos de nuestra aplicación.

Redux y Redux Toolkit: He modificado nuestra app para pasar la gestión del estado a Redux y Redux Toolkit. He utilizado métodos como createAsyncThunk y createSlice para definir acciones asíncronas y slices de estado respectivamente, simplificando la gestión del estado global de nuestra aplicación.

React Hook Form: He imprementado validaciones y proporcionado feedback sobre posibles errores, como datos incorrectos en los formularios de edición de productos e inicio de sesión.

JSON Server & Firebase: Se ha utilizado como servidor durante desarrollo. Luego he pasado los datos a Firebase y he compilado la app en Netlify.

Git & GitHub: Commits, Branches, Merge, Restore, Push. También conexión con Netlify para despliegue continuo.

Imágenes del formulario de múltiples pasos