cat > README.md << 'EOF'

🛍️ CRUD Products FrontEnd

Aplicación web moderna para la gestión de productos con sistema de autenticación, desarrollada con React y Tailwind CSS.

📋 Descripción

Este proyecto es una aplicación frontend completa que permite realizar operaciones CRUD (Create, Read, Update, Delete) sobre productos. Incluye un sistema de login para autenticación de usuarios y una interfaz moderna y responsive construida con React y Tailwind CSS.

✨ Características

• 🔐 Sistema de Autenticación: Login seguro para usuarios
• 📦 Gestión de Productos: Operaciones completas CRUD
  • Crear nuevos productos
  • Visualizar lista de productos
  • Editar productos existentes
  • Eliminar productos
• 🎨 Interfaz Moderna: Diseño responsive con Tailwind CSS
• ⚡ Rendimiento Optimizado: Construido con Vite para desarrollo rápido
• 🔄 Estado Global: Gestión de estado con React Context API
• 🌐 Navegación: Routing con React Router DOM
• 📡 Comunicación API: Integración con backend mediante Axios

🛠️ Tecnologías Utilizadas

• React - Biblioteca de JavaScript para construir interfaces de usuario
• Vite - Herramienta de construcción y desarrollo
• Tailwind CSS - Framework de CSS utility-first
• React Router DOM - Enrutamiento para aplicaciones React
• Axios - Cliente HTTP para realizar peticiones a APIs
• React Hooks:
  • useState - Gestión de estado local
  • useEffect - Efectos secundarios y ciclo de vida
  • useContext - Estado global compartido

📦 Requisitos Previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (versión 16 o superior)
• npm o yarn como gestor de paquetes
• Un editor de código (recomendado: VS Code)

🚀 Instalación

1. Clona el repositorio

   git clone https://github.com/BryanGallo/CRUD_Products_FrontEnd.git

2. Navega al directorio del proyecto

   cd CRUD_Products_FrontEnd

3. Instala las dependencias

   npm install

   o si usas yarn:

   yarn install

4. Configura las variables de entorno

   Crea un archivo .env en la raíz del proyecto con las siguientes variables:

   VITE_API_URL=http://localhost:tu-puerto-backend

   Ajusta la URL según la configuración de tu backend.

🎯 Uso

Desarrollo

Para ejecutar la aplicación en modo desarrollo:

npm run dev

La aplicación estará disponible en http://localhost:5173 (o el puerto que Vite asigne).

Producción

Para construir la aplicación para producción:

npm run build

Los archivos optimizados se generarán en la carpeta dist/.

Para previsualizar la build de producción:

npm run preview

📁 Estructura del Proyecto

CRUD_Products_FrontEnd/
├── public/                 # Archivos estáticos
├── src/
│   ├── components/         # Componentes reutilizables
│   ├── pages/              # Páginas de la aplicación
│   ├── context/            # Context API para estado global
│   ├── services/           # Servicios API (Axios)
│   ├── utils/              # Utilidades y helpers
│   ├── App.jsx             # Componente principal
│   └── main.jsx            # Punto de entrada
├── .env                    # Variables de entorno
├── .gitignore              # Archivos ignorados por Git
├── index.html              # HTML principal
├── package.json            # Dependencias y scripts
├── postcss.config.js       # Configuración de PostCSS
├── tailwind.config.js      # Configuración de Tailwind
└── vite.config.js          # Configuración de Vite

🔧 Scripts Disponibles

• npm run dev - Inicia el servidor de desarrollo
• npm run build - Construye la aplicación para producción
• npm run preview - Previsualiza la build de producción
• npm run lint - Ejecuta el linter (si está configurado)

🌐 API Backend

Esta aplicación frontend requiere un backend API para funcionar correctamente. Asegúrate de tener:

• Un servidor backend corriendo
• Endpoints configurados para:
  • Autenticación (login)
  • CRUD de productos (GET, POST, PUT, DELETE)

👤 Autor

Bryan Gallo