https://github.com/odevthomas/desafio-montink
Este projeto é uma simulação de uma página de produto de e-commerce, desenvolvida como parte do processo seletivo para a vaga do Desenvolvedor Frontend da Montink.
https://github.com/odevthomas/desafio-montink
Last synced: 6 months ago
JSON representation
Este projeto é uma simulação de uma página de produto de e-commerce, desenvolvida como parte do processo seletivo para a vaga do Desenvolvedor Frontend da Montink.
- Host: GitHub
- URL: https://github.com/odevthomas/desafio-montink
- Owner: odevthomas
- Created: 2025-05-23T00:39:25.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-06-09T17:34:35.000Z (9 months ago)
- Last Synced: 2025-06-09T18:32:07.250Z (9 months ago)
- Language: TypeScript
- Homepage: https://montink-desafio.vercel.app
- Size: 124 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Página de Produto - Desafio Montink
## Sobre o Projeto
Este projeto é uma simulação de uma página de produto de e-commerce, desenvolvido como parte do processo seletivo para a vaga de Desenvolvedor Frontend da Montink.
## Funcionalidades
- Galeria de imagens com miniaturas clicáveis
- Informações do produto com título, preço e descrição
- Seleção de tamanho, cor e quantidade
- Consulta de CEP com API ViaCEP
- Carrinho de compras funcional
- Dados salvos por 15 minutos no localStorage
- Design responsivo para todos dispositivos
## Tecnologias
- React
- TypeScript
- Tailwind CSS
- Shadcn UI
- API ViaCEP
- Context API para gerenciamento de estado
- LocalStorage para persistência de dados
## Como Executar
1. Clone o repositório
2. Instale as dependências: `npm install`
3. Execute o projeto: `npm run dev`
4. Acesse: `http://localhost:5173`
## Estrutura
- `/src/pages/ProductPage.tsx`: Página principal do produto
- `/src/components/product/ProductGallery.tsx`: Galeria de imagens interativa
- `/src/components/product/ProductInfo.tsx`: Informações e seleção de variantes
- `/src/components/product/CepAddressLookup.tsx`: Busca de CEP via API ViaCEP
- `/src/components/cart`: Componentes do carrinho de compras
- `/src/context/CartContext.tsx`: Gerenciamento de estado do carrinho
## Fluxo de Uso
1. Visualização da página do produto
2. Seleção de tamanho, cor e quantidade
3. Consulta de CEP para cálculo de frete
4. Adição ao carrinho de compras
5. Gerenciamento de itens no carrinho
Todas as seleções do usuário são salvas por 15 minutos para uso posterior, mesmo após atualização da página.