E-commerce full stack · Natan Commerce
DSCommerci
Da vitrine ao pedido: uma loja de tecnologia com front-end e API integrados.
SOBRE O PROJETO
Da ideia à experiência.
DSCommerci é um projeto de e-commerce full stack finalizado e publicado com a identidade Natan Commerce. A interface responsiva em Next.js, React e TypeScript conecta a experiência de compra à API Java com Spring Boot, reunindo navegação pelo catálogo, carrinho persistente, autenticação e gestão de produtos em uma aplicação completa para demonstração de portfólio.
Funcionalidades.
- Catálogo com busca por nome, coleções, ordenação, paginação e detalhes dos produtos.
- Carrinho persistente com ajuste de quantidades e resumo dos itens.
- Login, consulta da conta e logout com acesso por perfil de cliente ou administrador.
- Criação de pedidos e consulta por número, com total calculado pelo backend.
- Painel administrativo protegido para buscar, cadastrar, editar e excluir produtos.
- Interface responsiva com navegação por teclado e feedback de carregamento e erro.
Arquitetura & integração.
O navegador acessa as rotas de API do Next.js, que se comunicam com o Spring Boot e o PostgreSQL no Railway. A autenticação usa OAuth2 e JWT, com token em cookie HttpOnly e credenciais OAuth mantidas no servidor. O backend organiza regras de negócio, persistência com JPA/Hibernate, DTOs, validação e tratamento de exceções. O front-end está publicado na Netlify.
Arquitetura, dados & segurança.
- API REST em Java 21 e Spring Boot, organizada em controllers, services, repositories, entidades e DTOs.
- Spring Data JPA e Hibernate para modelar produtos, categorias, usuários, perfis, pedidos, itens e registros de pagamento.
- Busca de produtos com JPQL, paginação e ordenação; transações com @Transactional na criação e consulta de pedidos.
- Spring Security e OAuth2 Authorization Server com JWT, perfis de cliente e administrador e consulta de pedido restrita ao titular ou administrador.
- Validação de entrada e tratamento global de exceções, com respostas para erros de validação, acesso e recursos não encontrados.
- Next.js como intermediário entre navegador e API: credenciais OAuth no servidor e token em cookie HttpOnly, Secure em produção e SameSite=Lax.
Docker & ambientes.
- Dockerfile com build em duas etapas: compilação com Maven e Java 21, seguida de imagem de execução com Eclipse Temurin JRE 21.
- Container final com apenas o JAR, execução com usuário sem privilégios de root e porta configurável pela variável PORT do Railway.
- Docker Compose para PostgreSQL 14 e pgAdmin, com volumes persistentes e rede compartilhada no ambiente local.
- Perfis test, dev e prod: H2 em memória para testes e PostgreSQL para desenvolvimento e produção.
- Conexão de produção configurada por variáveis de ambiente, com URL, usuário e senha do banco separados do código.
CI/CD, testes & publicação.
- CI do backend com GitHub Actions: Maven Wrapper e Java 21 para compilar, executar testes e empacotar a aplicação com mvnw verify.
- Verificação automatizada do padrão dos títulos de pull requests, com testes do validador de mensagens.
- Workflow do backend acionado por pull requests, pushes em main/master, fila de merge e execução manual.
- Deploy contínuo do backend no Railway, com aplicação Java em container e persistência em PostgreSQL.
- CI do front-end com GitHub Actions: instalação das dependências, build do Next.js e testes de ponta a ponta com Playwright e Chrome.
- Cenários de interface para catálogo, carrinho, autenticação, pedidos e administração, usando backend de teste isolado.
- Front-end publicado na Netlify com suporte às rotas de servidor do Next.js e integração com a API no Railway.
Escopo da demonstração.
Projeto demonstrativo de portfólio: permite registrar pedidos, sem processamento de pagamentos ou entregas. O acesso utiliza contas de demonstração; cadastro público e recuperação de senha não fazem parte desta versão.