📱 Inventory App - Frontend

Este proyecto es una aplicación Ionic React que utiliza Redux para manejar el estado global, y consume una API backend desarrollada en .NET 9 para manejar un inventario de productos, usuarios, favoritos y compras.

---

⚙️ Características del Proyecto

• Login con autenticación JWT
• Manejo global del token con Redux
• Listado de productos
• Favoritos por usuario
• Página de favoritos
• Protección de rutas
• Estilos móviles gracias a Ionic
• Conexión con backend en .NET

---

🧑‍💻 Requisitos Previos

• Node.js (v18 o superior)
• Ionic CLI

npm install -g @ionic/cli

---

🚀 Cómo Levantar el Proyecto

1. Clona el repositorio

git clone https://github.com/tuusuario/inventory-app.git
cd inventory-app

2. Instala dependencias

npm install

3. Configura la URL del backend

Edita el archivo src/api/axios.ts y ajusta la base URL:

const API = axios.create({
  baseURL: "http://localhost:5128/api",
});

4. Ejecuta el proyecto

ionic serve

---

📱 Funcionalidades

🔐 Login

• El usuario se loguea con su nombre de usuario y contraseña.
• Al iniciar sesión, se guarda el token JWT en el estado global (Redux).
• El token se envía automáticamente en todas las peticiones.

📦 Productos

• Se listan todos los productos disponibles.
• Se pueden marcar como favoritos.

❤️ Favoritos

• Página que lista los productos favoritos del usuario actual.
• Se puede quitar un producto de la lista.

---

📁 Estructura del Proyecto

src/
├── api/                 # Peticiones Axios al backend
│   ├── authAPI.ts
│   ├── productAPI.ts
│   └── favoriteAPI.ts
├── components/          # Componentes reutilizables
├── pages/               # Pantallas (Login, Productos, Favoritos)
├── redux/               # Redux slices y store
│   ├── authSlice.ts
│   ├── productSlice.ts
│   ├── favoriteSlice.ts
│   └── store.ts
├── App.tsx              # Rutas y navegación
└── main.tsx

---

🌐 Conexión con el Backend

• Todos los endpoints de la API requieren un token JWT en el header.
• Se maneja con Axios interceptors desde axios.ts:

API.interceptors.request.use((config) => {
  const token = store.getState().auth.token;
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

---

🧪 Pruebas Manuales

Puedes usar ionic serve y Swagger en el backend para probar:

• Login: /api/auth/login
• Productos: /api/products
• Favoritos: /api/favorites
• Compras: /api/purchases

---

✅ Por hacer

• Manejo de errores más detallado
• Registro de usuario desde frontend
• Página de historial de compras

---

🧑 Autor

Desarrollado por Eduardo Thomas