🌱 HuertoHogar — Tienda Online (React + TypeScript)

Última actualización: 1 de diciembre de 2025 — Plataforma completa de eCommerce con integración API real y sistema de ofertas dinámicas.

🚀 Demo en Vivo

🌐 Accede a la aplicación desplegada:

👉 https://nachovn12.github.io/huertohogar-react/

La aplicación está desplegada automáticamente en GitHub Pages con integración continua. Cada push a la rama main actualiza el sitio en producción.

🎯 Resumen del Proyecto

HuertoHogar es una plataforma completa de eCommerce desarrollada con React 18 + TypeScript que conecta productores locales con consumidores. El proyecto integra una API real con sistema de fallback, gestión completa de productos, categorías, carrito de compras y panel de administración.

✨ Características Principales

✅ Integración API Completa: Conectado a Railway con productos, categorías y usuarios reales
✅ Sistema de Ofertas Dinámicas: Gestión de descuentos con localStorage y cálculo automático de precios
✅ Búsqueda Inteligente: Filtrado en tiempo real con autocompletado y vista previa de productos
✅ Filtrado por Categorías: Navegación dinámica con conteo de productos por categoría
✅ Panel de Administración: CRUD completo de productos con gestión de ofertas y descuentos
✅ Carrito de Compras: Sincronizado con API y persistencia local
✅ Sistema Híbrido de Autenticación: API real con fallback automático a datos mock
✅ Roles de Usuario: Admin, Vendedor y Cliente con permisos diferenciados
✅ UI Responsive: Diseño moderno con Material UI + React Bootstrap
✅ TypeScript: Tipado fuerte en toda la aplicación para mayor seguridad

🖼️ Capturas de Pantalla

Inicio	Productos	Admin Panel

🔐 Credenciales de Acceso

👨‍💼 Administrador

📧 Email: admin@admin.com
🔑 Password: admin
🎯 Panel: /admin/dashboard
✨ Permisos: Gestión completa de productos, usuarios, categorías y ofertas

🛒 Vendedor

📧 Email: vendedor@vendedor.com
🔑 Password: admin
🎯 Panel: /vendedor/dashboard
✨ Permisos: Gestión de productos y visualización de órdenes

👤 Cliente

📧 Email: cliente@cliente.com
🔑 Password: admin
🎯 Inicio: /productos
✨ Permisos: Navegación, compras y gestión de carrito

🛠️ Tecnologías Utilizadas

Frontend	UI/UX	Backend Integration	Dev Tools
React 18	Material UI 5	Axios	TypeScript 4.9
React Router 6	React Bootstrap	Railway API	Create React App
Context API	Custom Hooks	LocalStorage	ESLint + Prettier
React Hooks	Responsive Design	CORS Proxy	Git & GitHub

📦 Estructura del Proyecto

huertohogar-react/
├── public/
│   ├── img/                    # Imágenes estáticas
│   └── index.html              # HTML principal
├── src/
│   ├── components/             # Componentes React
│   │   ├── Admin/             # Panel de administración
│   │   ├── Blog.tsx           # Blog de consejos
│   │   ├── Cart.tsx           # Carrito lateral
│   │   ├── Categories.tsx     # Categorías destacadas
│   │   ├── Navbar.tsx         # Barra de navegación
│   │   ├── ProductCard.tsx    # Tarjeta de producto
│   │   ├── ProductList.tsx    # Lista de productos
│   │   └── ...
│   ├── context/               # Context API
│   │   ├── AuthContext.tsx    # Autenticación
│   │   └── CartContext.tsx    # Carrito de compras
│   ├── hooks/                 # Custom Hooks
│   │   └── useApi.ts          # Hooks para API
│   ├── service/               # Servicios
│   │   └── api.ts             # Cliente API
│   ├── styles/                # Estilos CSS
│   │   └── App.css            # Estilos principales
│   ├── types/                 # Tipos TypeScript
│   │   └── index.ts           # Definiciones de tipos
│   ├── data/                  # Datos de fallback
│   │   ├── products.json      # Productos mock
│   │   └── categories.json    # Categorías mock
│   ├── App.tsx                # Componente principal
│   └── index.tsx              # Punto de entrada
├── package.json               # Dependencias
├── tsconfig.json              # Configuración TypeScript
└── README.md                  # Este archivo

🌐 API Integrada

Base URL: https://api-dfs2-dm-production.up.railway.app

Endpoints usados por HuertoHogar

✅ /api/huerto - Productos principales: listado, búsqueda y detalles (recurso principal del catálogo).
✅ /api/productos - Endpoint complementario para operaciones puntuales sobre productos (usado por algunos adaptadores internos).
✅ /api/categorias - Categorías de productos (navegación y filtros).
✅ /api/usuarios - Gestión y autenticación de usuarios (login, registro, perfiles).
✅ /api/carritos - Carrito de compras (persistencia y sincronización con backend cuando aplica).
✅ /api/productos/:id/stock - Consulta/actualización de stock por producto.
ℹ️ /api/ordenes - Órdenes: en la versión actual se utiliza como mock/temporal desde el cliente; puede no estar disponible en todas las instancias de la API.

Versión de la API: 2.0.0 (Proveedor: "API para Alumnos - Huerto, Gaming, Pastelería")

Autor / Fuente: Profesor Sting Parra Silva (implementación desplegada en Railway)

🚀 Inicio Rápido

1. Instalar dependencias:

npm install

2. Iniciar servidor de desarrollo:

npm start

3. Abrir en el navegador:

http://localhost:3000

4. Hacer login:

Email: admin@admin.com
Password: admin

5. Verificar en consola:

Deberías ver peticiones a la API
Login exitoso con token generado

📋 Estado Actual

Código base: React 18 + Create React App (react-scripts@5)
TypeScript: Fijado a la serie 4.9.x para compatibilidad con react-scripts
Migración: Muchos componentes y contextos convertidos a .tsx/.ts

Quick Links

Entrada de la app: src/index.tsx
Componentes: src/components/
Contexts: src/context/
Tipos: src/types/
Servicios: src/service/
Datos estáticos: src/data/

📦 Requisitos

Node.js >= 16 (recomendado)
npm >= 8

🛠️ Scripts Útiles

npm start        # Desarrollo
npm run build    # Build producción
npm test         # Ejecutar tests

🔄 Cambios Recientes (Nov 2025)

Sistema Híbrido de Autenticación

✅ Integración con /api/usuarios
✅ Fallback automático a datos mock
✅ Manejo robusto de errores
✅ Tipos TypeScript correctos

Integración API Real

✅ Productos desde /api/huerto
✅ Categorías desde /api/categorias
✅ Carrito desde /api/carritos
✅ Gestión de usuarios

Mejoras UI/UX

✅ Navbar responsive con overlay móvil
✅ Fix de recursión en Login
✅ Navegación programática mejorada

📝 Archivos Destacados

Componentes Principales

src/App.tsx
src/components/Navbar.tsx
src/components/Login.tsx
src/components/ProductList.tsx
src/components/ProductCard.tsx
src/components/ProductDetails.tsx

Contextos

src/context/CartContext.tsx
src/context/AuthContext.tsx

Servicios

src/service/api.ts ⭐ Sistema híbrido

Tipos

src/types/index.ts

🔧 Notas Técnicas

TypeScript: Versión 4.9.5 fijada para compatibilidad con react-scripts@5
Imports: Evita usar rutas con extensión .tsx explícita
Shims: Hay shims .js temporales para compatibilidad con CRA

🧪 Pruebas y CI

Tests: Disponibles en src/__tests__/ (Jest/RTL y Karma/Jasmine)
CI Recomendado: GitHub Actions con npm ci, npm run build y npm test

🎯 Próximos Pasos Sugeridos

Profesionalizar flujo: ESLint + Prettier, Husky + lint-staged
Migrar tests a TypeScript (.test.tsx)
Migrar src/components/Admin/* a TypeScript
(Opcional) Evaluar migración de CRA a Vite

🤝 Contribuir

¡Las contribuciones son bienvenidas! Si deseas contribuir a HuertoHogar:

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add: nueva funcionalidad')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

📝 Normas de Contribución

Ejecuta npm test antes de hacer commit
Sigue las convenciones de código existentes
Documenta nuevas funcionalidades
Actualiza el README si es necesario

👥 Equipo de Desarrollo

_{Ignacio Valeria}
💻 GitHub

_{Benjamín Flores}
💻 GitHub

📄 Licencia

MIT

🌱 HuertoHogar - Del Campo al Hogar 🏡

_{⭐ Si te gustó este proyecto, regálanos una estrella en GitHub ⭐}

Name		Name	Last commit message	Last commit date
Latest commit History 53 Commits
.github/workflows		.github/workflows
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
karma.conf.js		karma.conf.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🌱 HuertoHogar — Tienda Online (React + TypeScript)

🚀 Demo en Vivo

🌐 Accede a la aplicación desplegada:

🎯 Resumen del Proyecto

✨ Características Principales

🖼️ Capturas de Pantalla

🔐 Credenciales de Acceso

👨‍💼 Administrador

🛒 Vendedor

👤 Cliente

🛠️ Tecnologías Utilizadas

📦 Estructura del Proyecto

🌐 API Integrada

Endpoints usados por HuertoHogar

🚀 Inicio Rápido

1. Instalar dependencias:

2. Iniciar servidor de desarrollo:

3. Abrir en el navegador:

4. Hacer login:

5. Verificar en consola:

📋 Estado Actual

Quick Links

📦 Requisitos

🛠️ Scripts Útiles

🔄 Cambios Recientes (Nov 2025)

Sistema Híbrido de Autenticación

Integración API Real

Mejoras UI/UX

📝 Archivos Destacados

Componentes Principales

Contextos

Servicios

Tipos

🔧 Notas Técnicas

🧪 Pruebas y CI

🎯 Próximos Pasos Sugeridos

🤝 Contribuir

📝 Normas de Contribución

👥 Equipo de Desarrollo

📄 Licencia

🌱 HuertoHogar - Del Campo al Hogar 🏡

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages