🥗 Nutrition Tracker

Una aplicación web moderna para el registro y seguimiento de alimentos consumidos diariamente. Diseñada con una arquitectura limpia y escalable, permite a los usuarios llevar un control detallado de su alimentación.

✨ Características

• 📝 Registro de Alimentos: Registra tus comidas con información detallada (cantidad, unidad, tipo de comida, fecha y hora)
• 📊 Dashboard Interactivo: Visualiza estadísticas y resúmenes de tu alimentación
• 👥 Gestión de Usuarios: Sistema de usuarios con preferencias personalizadas
• 🎨 Tema Oscuro/Claro: Interfaz adaptable con sistema de colores neutros
• 📱 Diseño Responsivo: Funciona perfectamente en dispositivos móviles y de escritorio
• ♿ Accesibilidad: Desarrollado siguiendo buenas prácticas de accesibilidad web
• ✅ Validación Robusta: Validación de datos con Zod y React Hook Form

🛠️ Stack Tecnológico

Tecnología	Versión	Descripción
Next.js	16.0.3	Framework React con App Router
React	19.2.0	Biblioteca UI
TypeScript	^5	Tipado estático
Tailwind CSS	^4.1.17	Framework de estilos
Zod	-	Validación de schemas
React Hook Form	^7.66.1	Manejo de formularios
Vitest	^4.0.10	Framework de testing
Storybook	^10.0.8	Documentación de componentes

🚀 Inicio Rápido

Prerrequisitos

• Node.js 18.x o superior
• npm, yarn, pnpm o bun

Instalación

1. Clona el repositorio

   git clone https://github.com/RadikeCosa/nutrition-tracker.git
   cd nutrition-tracker

2. Instala las dependencias

   npm install
   # o
   yarn install
   # o
   pnpm install

3. Inicia el servidor de desarrollo

   npm run dev

4. Abre http://localhost:3000 en tu navegador

📜 Scripts Disponibles

Script	Descripción
npm run dev	Inicia el servidor de desarrollo
npm run build	Genera la build de producción
npm run start	Inicia el servidor de producción
npm run lint	Ejecuta el linter (ESLint)
npm run test	Ejecuta los tests
npm run test:ui	Ejecuta tests con interfaz visual de Vitest
npm run test:coverage	Genera reporte de cobertura de tests
npm run test:axe	Ejecuta tests de accesibilidad
npm run storybook	Inicia Storybook en el puerto 6006
npm run build-storybook	Genera build estática de Storybook

📁 Estructura del Proyecto

nutrition-tracker/
├── app/
│   ├── components/           # Componentes React
│   │   ├── RegistrationForm/ # Formulario de registro de alimentos
│   │   ├── dashboard/        # Componentes del dashboard
│   │   └── ui/               # Componentes UI reutilizables
│   ├── constants/            # Constantes y configuraciones
│   ├── lib/
│   │   ├── hooks/            # Custom hooks
│   │   ├── migrations/       # Sistema de migraciones de datos
│   │   ├── repositories/     # Patrón Repository para storage
│   │   ├── schemas/          # Schemas Zod para validación
│   │   ├── storage/          # Capa de persistencia (localStorage)
│   │   └── utils/            # Utilidades compartidas
│   ├── tests/                # Tests unitarios y de integración
│   ├── dashboard/            # Página del dashboard
│   ├── form/                 # Página del formulario
│   └── users/                # Página de gestión de usuarios
├── docs/                     # Documentación del proyecto
├── stories/                  # Historias de Storybook
└── public/                   # Archivos estáticos

🧪 Testing

El proyecto utiliza Vitest junto con Testing Library para las pruebas:

# Ejecutar todos los tests
npm run test

# Ejecutar tests en modo watch
npm run test:ui

# Generar reporte de cobertura
npm run test:coverage

# Tests de accesibilidad
npm run test:axe

Tipos de Tests

• Unit Tests: Validación de schemas, helpers y utilidades
• Component Tests: Tests de componentes con Testing Library
• Accessibility Tests: Validación de accesibilidad con axe-core

📖 Documentación

La documentación completa del proyecto se encuentra en la carpeta docs/:

Documento	Descripción
GUIA_COMPLETA_DEL_PROYECTO.md	📘 Guía completa del proyecto: qué hace, cómo funciona cada archivo y carpeta, y cómo se refleja en el uso
ARCHITECTURE_REPORT.md	Análisis de arquitectura y estructura de datos
IMPROVEMENT_PROPOSALS.md	Propuestas de mejora y roadmap
PROYECTO.md	Registro de cambios y decisiones de diseño
COLOR_GUIDE.md	Guía de colores y estilos Tailwind
TESTING_REPORT.md	Informe de estructura de testing

🎨 Storybook

Visualiza y documenta los componentes de forma interactiva:

npm run storybook

Abre http://localhost:6006 para explorar los componentes.

🗄️ Persistencia de Datos

Actualmente, la aplicación utiliza localStorage para la persistencia de datos. Esto incluye:

• Registros de alimentos
• Información de usuarios
• Catálogo de alimentos personalizado

Nota: Los datos se almacenan localmente en el navegador. Consulta IMPROVEMENT_PROPOSALS.md para ver planes de sincronización multi-dispositivo.

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor:

1. Haz fork del repositorio
2. Crea una rama para tu feature (git checkout -b feature/nueva-funcionalidad)
3. Realiza tus cambios y añade tests si es necesario
4. Asegúrate de que los tests pasen (npm run test)
5. Ejecuta el linter (npm run lint)
6. Haz commit de tus cambios (git commit -m 'feat: nueva funcionalidad')
7. Push a la rama (git push origin feature/nueva-funcionalidad)
8. Abre un Pull Request

📄 Licencia

Este proyecto es privado. Todos los derechos reservados.

🔗 Enlaces Útiles

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• Vitest Documentation
• Storybook Documentation

---

Desarrollado con ❤️ usando Next.js y React