Tienda Móviles

Aplicación web para compra de dispositivos móviles, desarrollada con React y TypeScript.

🚀 Tecnologías

• React 18
• TypeScript
• Vite - Herramienta de construcción
• React Router 6 - Enrutamiento
• Zustand - Gestión de estado
• React Query - Gestión de peticiones y caché
• Axios - Cliente HTTP
• Vitest - Framework de testing
• GitHub Actions - CI/CD

✨ Características

• Listado de productos con filtro en tiempo real
• Página de detalles del producto
• Añadir productos al carrito
• Caché de datos con caducidad de 1 hora
• Diseño responsive
• Navegación sin recargar página (SPA)
• Testing unitario y de integración
• Pipeline de CI/CD automatizado

🛠️ Instalación

Clona el repositorio:

git clone https://github.com/robertluiz/tienda-moviles.git
cd tienda-moviles

Instala las dependencias:

npm install

📋 Scripts

• Desarrollo

  npm start

  Inicia el servidor de desarrollo en http://localhost:3000

• Desarrollo (alternativo)

  npm run dev

  Alias para iniciar el servidor de desarrollo

• Compilación

  npm run build

  Genera una versión optimizada para producción

• Previsualización

  npm run preview

  Previsualiza la versión compilada

• Pruebas

  npm test

  Ejecuta las pruebas automatizadas

• Pruebas con cobertura

  npm run test:coverage

  Ejecuta las pruebas y genera informe de cobertura

• Pruebas en modo watch

  npm run test:watch

  Ejecuta las pruebas en modo observador

• Lint

  npm run lint

  Verifica problemas de código y estilo

📱 Estructura del Proyecto

src/
├── components/       # Componentes reutilizables
├── hooks/           # Hooks personalizados
├── pages/           # Páginas de la aplicación
├── services/        # Servicios de API
├── store/           # Gestión de estado (Zustand)
├── styles/          # Estilos globales
├── types/           # Definiciones de tipos TypeScript
├── utils/           # Funciones de utilidad
└── __tests__/       # Tests de la aplicación

🔍 API

La aplicación consume datos de la API:

• Listado de productos: GET /api/product
• Detalles del producto: GET /api/product/:id
• Añadir al carrito: POST /api/cart

URL base: https://itx-frontend-test.onrender.com/

📝 Implementación

Gestión de Estado

• Utilizamos Zustand para gestionar el estado global de la aplicación de forma sencilla y eficiente
• React Query para gestionar peticiones a la API, incluyendo caché e invalidación

Caché

• Hemos implementado un sistema de caché con caducidad de 1 hora para mejorar el rendimiento
• Los datos se almacenan localmente para reducir las peticiones a la API

Testing

• Pruebas unitarias y de integración con Vitest y Testing Library
• Mocking de peticiones HTTP con MSW (Mock Service Worker)
• Generación de informes de cobertura de código

Principios de Desarrollo

• Aplicación de principios SOLID y Clean Code
• Componentes con responsabilidad única
• Separación clara de lógica de negocio y presentación
• Estructura de proyecto organizada y escalable

🛡️ Requisitos del Sistema

• Node.js 16+
• npm 7+

👥 Colaboración

Para contribuir al proyecto:

1. Haz un fork del repositorio
2. Crea una rama para tu funcionalidad (git checkout -b feature/nueva-funcionalidad)
3. Haz commit de tus cambios (git commit -m 'Añadir nueva funcionalidad')
4. Sube los cambios a tu fork (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

🔄 CI/CD

El proyecto utiliza GitHub Actions para la integración y despliegue continuos:

• Integración Continua: Cada push y pull request ejecuta los tests y el linting
• Despliegue Continuo: Los cambios en la rama principal (main/master) se despliegan automáticamente a GitHub Pages
• Entorno de Previsualización: La aplicación desplegada está disponible en https://[username].github.io/tienda-moviles/
• Gestión de Dependencias: El workflow usa npm install para asegurar la sincronización entre package.json y package-lock.json

Para más detalles, consulta el archivo de configuración en .github/workflows/test-and-deploy.yml.