InsanyShop é um e-commerce simples de produtos diversos, onde o usuário pode visualizar a lista completa de produtos com paginação, filtros por categoria e busca por termos, além de um sistema de carrinho funcional.
O design segue os layouts disponíveis no Figma, proporcionando uma interface intuitiva e responsiva.
- Next.js com TypeScript
- Styled Components para estilização
- React Toastify para notificações
- Lucide e React Icons para ícones
- Consumo de API REST para listar produtos, categorias e detalhes específicos
- LocalStorage para persistência do carrinho
- Catálogo de Produtos
- Listagem de todos os produtos com paginação
- Filtro por categoria
- Páginas Dinâmicas
- Produtos de uma categoria específica
- Exibição de produto específico com detalhes e opção de adicionar ao carrinho
- Resultados de pesquisa por termo
- Carrinho de Compras
- Adicionar e remover produtos
- Alterar quantidade de itens respeitando o estoque
- Resumo do pedido (subtotal, frete, total)
- Persistência de itens via localStorage
- Loading
- Indicadores de carregamento enquanto o conteúdo das páginas é carregado
O layout foi inspirado nos protótipos disponibilizados no Figma.
- Clonar o repositório
git clone https://github.com/rickreisdev/insanyshop.git
cd insanyshop- Criar arquivo
.envna raiz do projeto
- Adicionando a variável de ambiente com a url da API
NEXT_PUBLIC_API_URL=https://api.example.com- Instalar dependências
npm install- Rodar o projeto
npm run dev- Acessar a aplicação
- Abrindo http://localhost:3000 no navegador
- O carrinho de compras persiste os itens mesmo após recarregar a página, utilizando
localStorage. - Todas as páginas são responsivas, adaptando-se a diferentes tamanhos de tela.
- A interface possui feedback visual via
react-toastifypara ações como adicionar ao carrinho e atingir o limite de estoque.
