Aplicación de Manejo de Inventario con React y TypeScript

📝 Instrucciones

Este proyecto consiste en desarrollar el frontend de una Aplicación de Manejo de Inventario con React y TypeScript, integrándolo con el backend desarrollado en FastAPI.

Antes de comenzar, te recomendamos tener listo el backend siguiendo este proyecto:
🔗 API de Manejo de Inventario con FastAPI

De no tenerlo todavía podrías iniciar uasndo datos de prueba

📂 Estructura del Proyecto

Organiza los archivos del proyecto creando las siguientes carpetas en src/:

/src
  /components
    ├── InventoryForm.tsx
    ├── InventoryList.tsx
  /pages
    ├── Home.tsx
    ├── AddItem.tsx
  /services
    ├── api.ts
  App.tsx
  index.tsx

• InventoryForm.tsx: Formulario para agregar nuevos productos.
• InventoryList.tsx: Lista de productos obtenidos del backend.
• api.ts: Archivo para manejar las solicitudes HTTP al backend.

1. 🔧 Configuración de Dependencias

Ejecuta el siguiente comando para instalar las librerías necesarias:

1npm install axios react-router-dom

2. 🔌 Conéctate al Backend

En api.ts, configura Axios para interactuar con la API de FastAPI:

1import axios from "axios";
2
3const API_URL = "http://localhost:8000/api"; // Reemplázalo con la URL de tu backend
4
5export interface InventoryItem {
6  id?: number;
7  name: string;
8  quantity: number;
9  price: number;
10}
11
12export const getInventory = async (): Promise<InventoryItem[]> => {
13  const response = await axios.get(`${API_URL}/items`);
14  return response.data;
15};
16
17export const addInventoryItem = async (item: InventoryItem) => {
18  await axios.post(`${API_URL}/items`, item);
19};

3. 🗂️ Muestra la Lista de Productos

En InventoryList.tsx, obtén y muestra los productos desde el backend

4. 📝 Agrega Nuevos Productos

En InventoryForm.tsx, crea un formulario para añadir productos al inventario

5. 🚏 Configura el Router y las Páginas

En App.tsx, configura las rutas, puede verse algo como esto:

1import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
2import InventoryList from "./components/InventoryList";
3import InventoryForm from "./components/InventoryForm";
4
5function App() {
6  return (
7    <Router>
8      <Routes>
9        <Route path="/" element={<InventoryList />} />
10        <Route path="/add" element={<InventoryForm />} />
11      </Routes>
12    </Router>
13  );
14}
15
16export default App;

🎨 Mejora la Experiencia del Usuario

• Usa CSS Modules, TailwindCSS o Styled Components para mejorar el diseño.
• Agrega una barra de navegación para facilitar la navegación entre páginas.
• Implementa validaciones en el formulario para evitar datos incorrectos.
• Agrega una opción para editar y eliminar productos desde la lista.

🚀 Bonus: Despliega tu Aplicación

• Publica tu frontend en Vercel o Netlify.
• Asegúrate de configurar correctamente la URL del backend en api.ts si despliegas la API en otro servicio.

🎉 ¡Felicidades! Ahora tienes una Aplicación de Manejo de Inventario completamente funcional con React, TypeScript y FastAPI. 🚀