meli-clone

🔎 Sobre el proyecto

Este proyecto es un ejercicio de front-end desarrollado colaborativamente con el fin de mejorar las habilidades de los participantes, principalmente en React, como parte de la acelaración adelantada en Alkemy durante un periodo de 7 semanas.

La aplicación es un clon de la web de Mercado Libre, para lo que cual se ha utilizado la API provista por la empresa.

Las principales funciones de aplicación son:

• Registro y autenticación de usuarios.
• Busqueda de artículos.
• Vista con los resultados de la búsqueda.
• Detalle del artículo.
• Agregar artículos al carrito.
• Realizar checkout.

Construido con:

• 
• 
• 

🤝 Colaboradores

🚀 Cómo ejecutar la aplicación

Si quieres ejecutar esta aplicación localmente puedes:

1. Clonar el repo

   git clone https://github.com/Meli-clone/meli-clone.git
   

2. Instalar las paqueterias

   npm install
   

3. Configura tu aplicacion en Firebase Auth para obtener las variables de entorno necesarias.

4. Configura las variables de firebase en el archivo .env

   VITE_FB_API_KEY = 'YOUR API_KEY';
   VITE_FB_AUTH_DOMAIN = 'YOUR AUTH_DOMAIN';
   VITE_FB_PROJECT_ID = 'YOUR PROJECT_ID';
   VITE_FB_STOGARE_BUCKET = 'YOUR STOGARE_BUCKET';
   VITE_FB_MESSAGING_SENDER_ID = 'YOUR MESSAGING_SENDER_ID';
   VITE_FB_APP_ID = 'YOUR APP_ID';
   VITE_FB_MEASUREMENT_ID = 'YOUR MEASUREMENT_ID';
   

5. Inicia el servidor

   npm run dev
   

6. Firebase solo permitira peticiones desde dominios registrados, asi que recuerda cambiar tu direccion IP en el navegardor por localhost.

📂 Estructura de archivos

El código está organizado de la siguiente manera:

• assets: Imágenes, logos y fuentes.
• components: Componentes genéricos globales.
• layouts: Componentes base para las vistas.
• services: Peticiones externas a la aplicación.
• stores: Archivos para el manejo de estados globales.
• views: Componentes principales para las vistas.

src/
┣ assets/
┃ ┣ fonts/
┃ ┗ images/
┣ components/
┃ ┣ CartBtnMobile/
┃ ┣ CustomInput/
┃ ┣ FreeShipping/
┃ ┣ Fulfillment/
┃ ┣ MinimalFooter/
┃ ┣ MinimalHeader/
┃ ┣ PageNotFound/
┃ ┣ ProtectedRoutes/
┃ ┗ PurchaseDiscount/
┣ hooks/
┃ ┗ useWindowSize/
┣ layout/
┃ ┣ components/
┃ ┣ Footer/
┃ ┣ HamburgerMenu/
┃ ┣ Header/
┃ ┣ MainLayout/
┃ ┗ MinimalLayout/
┣ services/
┃ ┣ categories/
┃ ┣ category/
┃ ┣ details/
┃ ┣ products/
┃ ┗ firebase.ts
┣ store/
┃ ┣ cart/
┃ ┣ checkout/
┃ ┣ summary/
┃ ┣ user/
┃ ┣ hooks.ts
┃ ┗ store.ts
┣ test/
┃ ┗ setup.ts
┣ utils/
┃ ┣ helpers/
┃ ┗ sass/
┣ views/
┃ ┣ Cart/
┃ ┣ Checkout/
┃ ┣ Home/
┃ ┣ Login/
┃ ┣ ProductDetails/
┃ ┣ Register/
┃ ┗ SearchResults/
┣ App.tsx
┣ main.scss
┣ main.tsx
┣ types.d.ts
┗ vite-env.d.ts

🛠 Herramientas adicionales

Formik: se utilizó esta librería para facilitar el manejo de los formularios.

Yup: se utilizó esta librería para la validación de formularios.

Redux Toolkit: Redux Toolkit para el manejo del state global.

sweetAlert2: sweetAlert se utilizó para facilitar la creación de alertas tipo pop-up durante la validación de formulario de login.

Jest y React Testing Library: para el testeo de componentes.