Prueba Técnica Frontend - Sistema de Catálogo y Carrito

Una Single Page Application (SPA) desarrollada con React, TypeScript y Vite que implementa un sistema completo de catálogo de productos con carrito de compras persistente.

🚀 Características Principales

• Autenticación simulada con manejo de tokens
• Catálogo de productos con filtros, búsqueda y paginación
• Detalle de producto con navegación dinámica
• Carrito de compras persistente con localStorage
• Manejo robusto de estados (carga, vacíos, errores)
• Rutas protegidas y navegación intuitiva
• Diseño responsive con Tailwind CSS
• Accesibilidad básica (a11y) implementada

🛠️ Stack Tecnológico

• Frontend: React 19 + TypeScript
• Bundler: Vite
• Estado Global: Redux Toolkit
• Routing: React Router v7
• Estilos: Tailwind CSS v4
• HTTP Client: Axios
• Iconografía: Lucide React
• Mock API: JSON Server
• Linting: ESLint

📋 Prerrequisitos

• Node.js (versión 16 o superior)
• Yarn (recomendado) o npm

⚡ Instalación y Ejecución

Instalación de dependencias

yarn install

Ejecución completa (aplicación + mock server)

yarn dev:full

Este comando ejecuta concurrentemente:

• Mock API Server en http://localhost:3001
• Aplicación React en http://localhost:5173

Comandos alternativos

# Solo desarrollo de la aplicación
yarn dev

# Solo mock server
yarn mock-server

# Build de producción
yarn build

# Preview del build
yarn preview

# Linting
yarn lint

🏗️ Arquitectura del Proyecto

src/
├── app/                    # Configuración principal de la aplicación
│   ├── layouts/           # Layouts principales (RootLayout)
│   ├── router/            # Configuración de rutas
│   └── store/             # Store principal de Redux
├── features/              # Características organizadas por dominio
│   ├── auth/              # Módulo de autenticación
│   │   ├── components/    # Componentes específicos de auth
│   │   ├── hooks/         # Custom hooks de auth
│   │   ├── services/      # Servicios de autenticación
│   │   ├── store/         # Slice de Redux para auth
│   │   └── types/         # Tipos TypeScript de auth
│   ├── cart/              # Módulo de carrito de compras
│   │   ├── components/    # Componentes del carrito
│   │   ├── hooks/         # Hooks del carrito
│   │   ├── services/      # Lógica de negocio del carrito
│   │   ├── store/         # Slice de Redux para carrito
│   │   └── types/         # Tipos del carrito
│   ├── layout/            # Componentes de layout compartidos
│   │   └── components/    # Header y otros elementos de layout
│   └── products/          # Módulo de productos
│       ├── components/    # Componentes de productos
│       ├── hooks/         # Hooks de productos
│       ├── services/      # Servicios de productos
│       ├── store/         # Slice de Redux para productos
│       └── types/         # Tipos de productos
├── pages/                 # Páginas/vistas principales
│   ├── CartPage/          # Página del carrito
│   ├── HomePage/          # Página de inicio
│   ├── LoginPage/         # Página de login
│   ├── ProductsPage/      # Catálogo de productos
│   └── [...]              # Otras páginas
├── shared/                # Recursos compartidos
│   ├── components/        # Componentes UI reutilizables
│   ├── services/          # Cliente HTTP y servicios base
│   ├── types/             # Tipos globales
│   └── utils/             # Utilidades compartidas
└── [archivos raíz]        # App.tsx, main.tsx, etc.

🔐 Autenticación

La aplicación implementa un sistema de autenticación simulado:

• Usuario demo: user@test.com
• Contraseña demo: 123456
• Token persistido en localStorage
• Rutas protegidas que requieren autenticación

🛒 Funcionalidades del Carrito

• Agregar/quitar productos
• Modificar cantidades
• Persistencia en localStorage
• Cálculo automático de totales
• Validación de stock disponible