Realizado por Tomás Margiottiello.
Diamond - Shop es un ecommerce realizado con ReactJS como proyecto final para el curso de Desarrollo FrontEnd en ReactJS para CoderHouse. Tiempo estimado de dos meses entre cursado y desarrollo de la aplicación.
La temática es sobre camisetas de fútbol de distintos países, clubes argentinos y clubes europeos. La idea surge con el fin de un fácil acceso a imágenes ya que hay gran cantidad en internet y no solamente quedarnos con un ecommerce de ropa.
Para la visualización y conocer la app mas a fondo se cuenta con una breve descripción de la instalación.
Debemos seguir los siguientes pasos para correr la app en nuestro localhost.
Clonamos el repositorio en nuestra computadora:
git clone https://github.com/TomasM99/ecommerce-camisetas-futbol.git
Corremos el siguiente comando desde la consola, parados en la carpeta clonada:
npm start
Luego de unos instantes se instalarán las dependencias y se abrirá en nuestro navegador.
Como ya fue mencionado previamente la aplicación web es un ecommerce de camisetas de fútbol. Si bien de cierta forma es una simulación, nos permite realizar un recorrido completo para la compra de un producto o más, desde que lo seleccionamos hasta que se nos genera una orden de compra.
-
Navegación por medio de componentes, hooks y dependencias permitiendo mostrar diferentes pantallas sin necesidad de recargar la página.
-
Filtrado por categorías de los productos.
-
Detalle del producto donde podemos interactuar con él mismo.
-
Manejo de favoritos.
-
Carrito de compras.
-
Control de stock.
-
Generación de orden de compra mediante firebase.
El siguiente gif muestra el recorrido para realizar una compra.
Toca acá para ver el gif con mas detenimiento en forma de video.
A continuación se comentan un poco los componentes creados y las dependencias utilizadas para enriquecer y facilitar el trabajo.
Cada parte de la app interactúa con distintos componentes, los más destacables son los siguientes:
<NavBar />
<CartWidget />
<Cart />
<ItemCart />
<ItemListContainer />
<Item />
<ItemDetail />
<ItemCount />
<Modal />
<Error404 />Todas las dependencias se instalan mediante npm y nos sirven para resolver una pequeña problemática o darnos contenido extra de estilos, etc.
Ejemplo de instalación: (parados en la carpeta del proyecto)
npm install sass
Dependencias usadas:
Nos proporciona estilos predefinidos que podemos sobreescribir.
Nos permite escribir las sentencias CSS de una manera mas amigable y sencilla.
Generación de alertas y notificaciones ante eventos.
Nos proporciona distintos spinner para pantallas de carga.
Librería utilizada para el manejo de enlaces dentro de React, llevándonos de una pantalla a otra sin recargar el contenido.
Base de datos:
Servicio proporcionado por google que nos brinda distintas funcionalidades, en específico usamos firestore que es una base de datos NoSQL para almacener productos y guardar las órdenes de compras generadas.