Drip Store é uma plataforma de e-commerce completa e moderna, especializada em materiais esportivos. Desenvolvida com foco em performance, experiência do usuário e design responsivo, a aplicação oferece uma solução end-to-end para compras online.
O design foi baseado no layout Figma fornecido pelo curso de Desenvolvimento Full Stack da Digital College, com implementação completa de autenticação, gerenciamento de carrinho e sistema de pedidos.
🔗 Acesse a demonstração ao vivo
- Login/Cadastro via e-mail e senha
- Login social (Google e Facebook)
- Recuperação de senha
- Gerenciamento de sessão com Context API
- Adicionar/remover produtos
- Ajustar quantidades
- Cálculo automático de totais
- Persistência de dados
- Animações e feedback visual
- Busca por nome do produto
- Filtros por categoria (Tênis, Camisetas, Calças, Headphones)
- Filtros por faixa de preço
- Filtros por marca e condição (Novo/Usado)
- Resultados em tempo real
- Histórico completo de pedidos
- Visualização de status e detalhes
- Checkout simplificado com formulário validado
- Página de confirmação
- Design responsivo (Mobile First)
- Carrossel de produtos em destaque
- Cards interativos com hover effects
- Navegação intuitiva com React Router
- Notificações toast para feedback
- Loading states e skeleton screens
- React 18.3.1 - Biblioteca para construção de interfaces
- Vite 5.4.19 - Build tool e dev server ultra-rápido
- React Router DOM 6.26.1 - Roteamento e navegação
- TailwindCSS 3.4.10 - Framework CSS utilitário
- Firebase 10.13.1
- Authentication - Gerenciamento de usuários e login social
- Firestore - Banco de dados NoSQL em tempo real
- Hosting - Deploy e hospedagem do projeto
- React Hook Form 7.53.0 - Validação de formulários
- React Hot Toast 2.4.1 - Sistema de notificações
- Swiper 11.1.12 - Carrosséis e sliders
- ESLint 9.9.0 - Linting e qualidade de código
- PostCSS 8.4.45 - Processamento de CSS
- Autoprefixer 10.4.20 - Compatibilidade de CSS
drip-store/
├── src/
│ ├── assets/ # Imagens e recursos estáticos
│ ├── components/ # Componentes reutilizáveis
│ │ ├── Header/ # Navegação e busca
│ │ ├── Home/ # Componentes da página inicial
│ │ ├── Products/ # Filtros e cards de produtos
│ │ └── CartCheckout/ # Carrinho e checkout
│ ├── contexts/ # Context API (UserContext)
│ ├── firebase/ # Configuração e serviços Firebase
│ │ ├── config.js # Inicialização do Firebase
│ │ ├── auth.js # Funções de autenticação
│ │ ├── produto.js # CRUD de produtos
│ │ └── pedido.js # Gestão de pedidos
│ ├── pages/ # Páginas da aplicação
│ ├── App.jsx # Componente principal
│ └── main.jsx # Entry point
├── public/ # Arquivos públicos
├── firebase.json # Configuração do Firebase
├── tailwind.config.js # Configuração do Tailwind
└── vite.config.js # Configuração do Vite
- Node.js (versão 16 ou superior)
- npm ou yarn
- Conta no Firebase
- Clone o repositório
git clone https://github.com/flaviare1s/drip-store.git
cd drip-store- Instale as dependências
npm install- Configure o Firebase
Crie um arquivo .env na raiz do projeto com suas credenciais do Firebase:
VITE_FIREBASE_API_KEY=sua_api_key
VITE_FIREBASE_AUTH_DOMAIN=seu_auth_domain
VITE_FIREBASE_PROJECT_ID=seu_project_id
VITE_FIREBASE_STORAGE_BUCKET=seu_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=seu_sender_id
VITE_FIREBASE_APP_ID=seu_app_id- Execute o projeto
npm run devO projeto estará disponível em http://localhost:5173
npm run build
npm run previewnpm install -g firebase-tools
firebase login
firebase deployA implementação completa do Firebase Authentication com múltiplos provedores (e-mail, Google e Facebook) apresentou desafios interessantes:
- Configuração de OAuth no Facebook for Developers
- Gerenciamento de estados de autenticação
- Tratamento de erros e exceções específicas
O desenvolvimento de uma interface responsiva e fiel ao design original exigiu:
- Implementação de breakpoints estratégicos com Tailwind
- Otimização de imagens e assets
- Testes extensivos em diferentes dispositivos
- Animações e transições fluidas
Utilização de Context API para compartilhar o estado do carrinho e usuário entre componentes, garantindo sincronização e performance.
Criação de componentes reutilizáveis seguindo princípios de atomic design, facilitando manutenção e escalabilidade.
- Implementar sistema de avaliações de produtos
- Adicionar wishlist (lista de desejos)
- Integração com gateway de pagamento
- Sistema de cupons de desconto
- Painel administrativo para gestão de produtos
- Notificações por email
- Modo escuro
- PWA (Progressive Web App)
- Testes unitários e de integração
Contribuições são sempre bem-vindas! Sinta-se à vontade para abrir issues ou enviar pull requests.
- Fork o projeto
- Crie sua feature branch (
git checkout -b feature/NovaFuncionalidade) - Commit suas mudanças (
git commit -m 'Adiciona nova funcionalidade') - Push para a branch (
git push origin feature/NovaFuncionalidade) - Abra um Pull Request
Este projeto foi desenvolvido como parte do curso de Desenvolvimento Full Stack da Digital College.
- Digital College - Pela formação e suporte durante o desenvolvimento
- Professores e monitores que contribuíram com conhecimento e feedback
- Comunidade React e Firebase pela documentação e recursos
Flavia Reis
Desenvolvido por Flavia Reis