Este é um projeto de estudos focado no desenvolvimento frontend moderno e persistência de dados usando localStorage. A aplicação é uma lista de compras interativa que demonstra conceitos avançados de React, Next.js e gerenciamento de estado.
- ✅ Next.js 15 com App Router
- ✅ React 19 com hooks modernos
- ✅ TypeScript para type safety
- ✅ Tailwind CSS 4 para estilização
- ✅ localStorage para persistência de dados
- ✅ Componentes reutilizáveis com Radix UI
- ✅ PWA com service worker
- ✅ Testes com Jest e Testing Library
- Adicionar itens com categoria e quantidade
- Organização por categorias com ícones visuais
- Marcar como concluído com checkbox
- Excluir itens com confirmação
- Persistência automática no localStorage
- Design responsivo para mobile e desktop
- Ícones visuais para cada categoria
- Animações suaves e transições
- Tema claro/escuro com persistência
- PWA com manifest e service worker
- 🥤 Bebidas
- 🥩 Carnes
- 🥬 Frutas e Verduras
- 🌾 Grãos e Cereais
- 🧴 Higiene
- 🥛 Laticínios
- 🧽 Limpeza
- 📦 Outros
- Next.js 15 - Framework React com App Router
- React 19 - Biblioteca de interface
- TypeScript - Tipagem estática
- Tailwind CSS 4 - Framework CSS utility-first
- Radix UI - Componentes acessíveis
- Lucide React - Ícones modernos
- shadcn/ui - Componentes reutilizáveis
- ESLint - Linting de código
- Jest - Framework de testes
- Testing Library - Testes de componentes
- CI/CD:
- Dependabot: Atualizações automáticas de dependências
- Code Quality: ESLint configurado
- Testing: Jest e Testing Library configurados
- Performance: Otimizado com Next.js 15
- SEO: Meta tags e manifest configurados
- PWA: Service worker e manifest implementados
- Acessibilidade: Componentes Radix UI
- Tema: Sistema completo de tema claro/escuro
- Node.js 18+
- npm, yarn, pnpm ou bun
# Clone o repositório
git clone https://github.com/tetri/shopping-list.git
cd shopping-list
# Instale as dependências
npm install
# Execute em modo desenvolvimento
npm run devnpm run dev # Servidor de desenvolvimento com Turbopack
npm run build # Build de produção
npm run start # Servidor de produção
npm run lint # Verificação de código
npm test # Executar testesAbra http://localhost:3000 no seu navegador.
shopping-list/
├── app/ # App Router (Next.js 15)
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout principal
│ ├── page.tsx # Página inicial
│ └── manifest.ts # PWA manifest
├── components/ # Componentes React
│ ├── ui/ # Componentes base (shadcn/ui)
│ ├── add-item-form.tsx # Formulário de adicionar item
│ └── shopping-item.tsx # Item da lista
├── public/ # Assets estáticos
│ └── images/ # Imagens organizadas por categoria
├── lib/ # Utilitários
└── __tests__/ # Testes
O projeto inclui testes unitários e de integração:
# Executar todos os testes
npm test
# Executar testes em modo watch
npm test -- --watch
# Executar testes com coverage
npm test -- --coverage- ✅ Service Worker para cache offline
- ✅ Web App Manifest para instalação
- ✅ Ícones responsivos para diferentes dispositivos
- ✅ Meta tags otimizadas para SEO
Este é um projeto de estudos, mas contribuições são bem-vindas!
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- Next.js pela excelente documentação
- shadcn/ui pelos componentes incríveis
- Radix UI pela acessibilidade
- Tailwind CSS pela facilidade de estilização
⭐ Se este projeto te ajudou, considere dar uma estrela!
Feito com ❤️ para estudos de frontend moderno