NutriLens 🥗📊

Rastreador nutricional completo com análise de macros, visualização de dados e alta cobertura de testes.

• Ver Demo •

---

📸 Dashboard Principal

---

🎯 Sobre o Projeto

NutriLens é um tracker nutricional moderno focado em precisão, análise de dados e experiência do usuário. Desenvolvido com arquitetura escalável, type-safety completo e testes abrangentes.

O Problema

Dificuldade em manter controle consistente de metas nutricionais com ferramentas que sejam rápidas, confiáveis e forneçam insights acionáveis.

A Solução

Dashboard interativo com tracking em tempo real, múltiplas visualizações de dados, sistema de insights automáticos e gamificação através de streaks e conquistas.

---

✨ Features Principais

📊 Dashboard Inteligente

• Visão geral diária com progresso circular de macros
• Streak tracking com gamificação (badges e conquistas)
• Cards de métricas com indicadores visuais de progresso

🍽️ Gestão de Refeições

• CRUD completo com categorização (café, almoço, jantar, snacks)
• Templates reutilizáveis para refeições frequentes
• Histórico navegável por calendário

📈 Visualização de Dados

• 4 tipos de gráficos interativos (linha, pizza, barras, área)
• Análise estatística (médias, tendências, melhor/pior dia)
• Sistema de insights automáticos baseado em padrões

💾 Portabilidade

• Export/Import em CSV e JSON
• Relatórios semanais personalizados
• Backup completo de dados e metas

🎨 Experiência do Usuário

• Dark mode com persistência
• Animações fluidas (Framer Motion)
• Interface responsiva e acessível

Sistema de templates reutilizáveis para refeições frequentes

---

🛠️ Stack Técnica

Core

• React 19 + TypeScript 5
• Vite (build tool)
• Zustand (state management)
• Tailwind CSS + shadcn/ui

Qualidade & Testes

• Vitest + React Testing Library
• Zod (validação runtime)
• 96% de cobertura de testes

Visualização

• Recharts (gráficos)
• Framer Motion (animações)
• date-fns (manipulação de datas)

---

🏗️ Arquitetura

src/
├── components/      # Componentes organizados por feature
│   ├── dashboard/   # Métricas, progresso, insights
│   ├── meals/       # CRUD de refeições e templates
│   ├── charts/      # Visualizações de dados
│   └── common/      # Componentes compartilhados
│
├── store/           # Zustand stores (nutrition, settings)
├── services/        # Lógica de negócio isolada
├── hooks/           # Custom hooks reutilizáveis
├── utils/           # Funções utilitárias puras
├── types/           # TypeScript definitions
└── __tests__/       # Suite completa de testes

Padrões Implementados

• Arquitetura em camadas (UI → Logic → State)
• Type-safety em runtime com Zod
• Funções puras e testáveis
• Memoization estratégica

4 tipos de gráficos interativos: evolução de calorias, distribuição de macros, comparação semanal e evolução quinzenal

---

📊 Cobertura de Testes

Utils       ████████████████████ 100%
Services    ████████████████████  99%
Hooks       ████████████████████ 100%
Store       ████████████████████  92%
Components  ████████████████████ 100%
───────────────────────────────────────
Total       ████████████████████  96%

Estratégia de Testes

• Unit tests para utils e services
• Integration tests para hooks e stores
• Component tests com React Testing Library
• Validação de edge cases e error handling

Insights automáticos baseados em padrões e sistema de gamificação com badges desbloqueáveis

---

🚀 Instalação e Uso

# Clone o repositório
git clone https://github.com/WagnerRodrigues181/nutri-lens.git

# Instale dependências
cd nutri-lens
npm install

# Inicie o servidor de desenvolvimento
npm run dev

Scripts Disponíveis

npm run dev           # Servidor de desenvolvimento
npm run build         # Build de produção
npm run preview       # Preview do build
npm run test          # Executar testes
npm run test:ui       # Interface de testes
npm run test:coverage # Relatório de cobertura

---

🎓 Destaques Técnicos

Type-Safety Completo

• TypeScript em 100% do código
• Validação runtime com Zod
• Type inference automática

Performance

• React.memo em componentes pesados
• Lazy loading de rotas
• Debouncing em inputs

Qualidade de Código

• ESLint + Prettier
• Conventional commits
• 96% test coverage

Acessibilidade

• Semantic HTML
• Keyboard navigation
• ARIA labels

---

💡 Decisões de Design

Zustand vs Redux

• Escolhido pela simplicidade e menor boilerplate
• Performance superior em apps de média escala
• API mais intuitiva

Recharts vs Chart.js

• Melhor integração com React
• Componentes declarativos
• Customização mais simples

Vitest vs Jest

• Compatibilidade nativa com Vite
• Velocidade de execução superior
• API similar ao Jest

Portabilidade completa: import/export em CSV e JSON, relatórios semanais personalizados

---

📬 Contato

Gostou do projeto? Vamos conversar!

Wagner Rodrigues

• 💼 LinkedIn
• 📧 Email
• 🐙 GitHub

---

Desenvolvido com 💚 e disciplina

Se este projeto foi útil, considere dar uma ⭐