Aplicações web
Softness
E-commerce de streetwear com vitrine, painel administrativo, carrinho, checkout com Stripe e gerenciamento de conta.
Explore o projeto
A demonstração permite explorar a vitrine e a experiência da loja. No GitHub estão a estrutura da aplicação, os scripts de desenvolvimento e as instruções para conectá-la à API dedicada.
Tecnologias
Next.js e React formam a base da aplicação, com TypeScript para os contratos do front-end e Tailwind CSS para as interfaces. Zustand organiza o estado do cliente, enquanto Stripe participa dos fluxos de pagamento e dos métodos de pagamento da conta. React Hook Form, Zod e Axios completam a integração entre os formulários, a interface e a API.
- Next.js
- TypeScript
- Stripe
- Zustand
Sobre o projeto
Softness reúne a experiência de compra e a operação de uma loja de streetwear em uma aplicação full-stack. Na vitrine, o visitante pode explorar produtos e coleções, buscar peças, consultar avaliações e montar o carrinho. A navegação segue até o checkout e a área de conta, conectando a descoberta do produto às etapas que acontecem depois da compra.
O outro lado do projeto é o painel administrativo, que concentra produtos, coleções, banners, cupons, pedidos e configurações da loja. Essas áreas compartilham uma API Fastify dedicada, enquanto o front-end organiza os fluxos de catálogo, autenticação, checkout e administração em rotas do Next.js. O resultado é um projeto que apresenta tanto a interface voltada ao cliente quanto as ferramentas necessárias para gerenciar a operação.
O que ele faz
- 01
Descoberta de produtos por catálogo, coleções e busca. As páginas de produto também incluem avaliações, reunindo informações que ajudam o visitante a escolher uma peça antes de adicioná-la ao carrinho.
- 02
Carrinho e checkout com regras de frete fixo ou gratuito. A integração com Stripe faz parte da experiência de pagamento, conectando a seleção dos produtos à conclusão da compra.
- 03
Área de conta com perfil, endereços, pedidos e métodos de pagamento. Os fluxos de autenticação incluem cadastro e login, além de verificação de e-mail opcional e Google OAuth conforme a configuração da API.
- 04
Painel administrativo com gerenciamento de produtos, coleções, banners, cupons, pedidos e configurações. Ele complementa a vitrine com as tarefas de manutenção do catálogo e acompanhamento da loja.
Como foi construído
O front-end usa o App Router do Next.js e componentes React para estruturar a vitrine, as páginas de conta e o painel administrativo. Componentes, serviços HTTP, tipos e estado ficam em áreas próprias do código. O Axios faz a comunicação com a API, e o Zustand organiza o estado compartilhado da interface, incluindo o carrinho.
Os formulários usam React Hook Form e Zod, combinando gerenciamento dos campos com validação de dados. A API concentra os fluxos de autenticação e os recursos da loja; o front-end consome esses contratos e apresenta as ações ao usuário. Essa separação também aparece no deploy: a aplicação recebe o endereço público da API por configuração de ambiente.