Índice
🔎 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:
-
Clonar el repo
git clone https://github.com/Meli-clone/meli-clone.git
-
Instalar las paqueterias
npm install
-
Configura tu aplicacion en Firebase Auth para obtener las variables de entorno necesarias.
-
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';
-
Inicia el servidor
npm run dev
-
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.