Zap Store

Aplicação front-end moderna desenvolvida com React, TypeScript, Zustand, TailwindCSS e shadcn/ui.

Tecnologias

• React
• TypeScript
• TailwindCSS
• Zustand
• shadcn/ui
• React Hook Form
• Zod

---

Funcionalidades

• Listagem de produtos por categorias
• Carrinho de compras com gerenciamento global de estado
• Controle de quantidade de itens
• Fluxo de checkout em múltiplas etapas
• Validação de formulários com Zod
• Integração com WhatsApp para envio do pedido
• Tema dark/light
• Interface responsiva
• Componentização reutilizável

---

Melhorias realizadas além da implementação base

• Refatoração de formulários para evitar duplicação de código
• Criação de componente reutilizável FormInput
• Utilização de TypeScript Generics para escalabilidade dos formulários
• Adaptação da implementação para versões atuais do shadcn/ui
• Ajustes de integração entre React Hook Form e componentes customizados

---

Preview

---

Como executar o projeto

Clone o repositório:

git clone https://github.com/Filipuci/zap-store.git

Acesse a pasta:

cd zap-store

Instale as dependências:

npm install

Crie um arquivo .env baseado no .env.example

VITE_PUBLIC_ZAP=

Execute o projeto:

npm run dev

Aprendizados

Este projeto foi utilizado como aprofundamento prático em:

Gerenciamento global de estado com Zustand Integração e customização de componentes com shadcn/ui Organização e escalabilidade de aplicações React

Autor

Rafael Filipuci LinkedIn: https://linkedin.com/in/rafael-filipuci-4159aa235/