Sistema fullstack de gerenciamento de produtos com controle de estoque em tempo real, desenvolvido com arquitetura em camadas e containerização via Docker.
Projeto focado em boas práticas de desenvolvimento, organização de código e experiência do usuário.
- Frontend: React + Vite
- Backend: .NET (C#)
- Banco de dados: MongoDB
- Autenticação: Keycloak (OpenID Connect)
- Containerização: Docker + Docker Compose
Antes de começar, você precisa ter instalado:
- Docker
- Docker Compose
- Node.js (caso queira rodar o frontend fora do container)
git clone <URL_DO_REPOSITORIO>
cd hypesoft-product-managercd frontend
npm install
cd ..docker-compose up --buildEsse comando irá subir automaticamente:
- API
- Banco de dados (MongoDB)
- Keycloak (autenticação)
- Frontend
Após subir o projeto, acesse:
- Frontend: http://localhost:3000
- API (Swagger): http://localhost:5000/swagger
- Mongo Express: http://localhost:8081
- Keycloak: http://localhost:8080
O sistema utiliza o Keycloak para autenticação e autorização via OpenID Connect.
- Usuário: admin
- Senha: admin
Usado para acessar o painel administrativo do Keycloak e gerenciar usuários, roles e clients.
- Usuário: admin
- Senha: admin123
- Usuário: user
- Senha: user123
⚠️ Esses usuários são criados automaticamente via import do realm no container do Keycloak.
- Admin: acesso completo ao sistema (CRUD e dashboard)
- User: acesso restrito (visualização)
Após a gravação do vídeo de demonstração, o projeto recebeu melhorias importantes:
- Implementação de autenticação com Keycloak
- Separação de perfis (admin e usuário)
- Melhorias na arquitetura e organização do código
- Ajustes na experiência do usuário
- Criação da tela de categorias
⚠️ O vídeo demonstra uma versão anterior do sistema, sem essas melhorias mais recentes.
HYPERSOFT-PRODUCT-MANAGER/
├── backend/
│ └── src/
│ ├── Hypesoft.API/
│ ├── Hypesoft.Application/
│ ├── Hypesoft.Domain/
│ └── Hypesoft.Infrastructure/
│
├── frontend/
│ └── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── routes/
│ ├── services/
│ ├── hooks/
│ └── utils/
│
├── keycloak/
│ └── realm-export.json
│
├── docs/
│ └── images/
│
├── docker-compose.yml
└── README.mdO backend foi estruturado seguindo princípios de Clean Architecture:
- API: Camada de entrada (controllers e endpoints)
- Application: Regras de negócio e casos de uso
- Domain: Entidades e contratos
- Infrastructure: Acesso a dados e integrações externas
O frontend segue uma arquitetura baseada em:
- Componentização
- Separação por responsabilidade
- Consumo de API via services
- Gerenciamento de estado com hooks
- MongDB pela flexibilidade de schema e facilidade de evolução
- Docker para padronização de ambiente e facilidade de execução
- Keycloak para autenticação robusta e escalável
- Clean Architecture para organização e manutenção do backend
- Vite pela velocidade no desenvolvimento frontend
Principais funcionalidades da API:
- CRUD completo de produtos
- Controle de estoque
- Atualização em tempo real
- Dashboard com métricas
- GET /produtos
- POST /produtos
- PUT /produtos/{id}
- DELETE /produtos/{id}
- GET /categorias
- POST /categorias
- PUT /categorias/{id}
- DELETE /categorias/{id}
- GET /dashboard
A validação da aplicação foi feita através de:
- Testes manuais via Postman
- Testes de fluxo (CRUD + estoque)
- Testes de usabilidade
🔧 Testes automatizados podem ser adicionados como melhoria futura.
- Verifique se você está no realm correto (não no master)
- Reinicie os containers:
docker-compose down -v
docker-compose up --buildcd frontend
npm installCaso alguma porta esteja ocupada, altere no docker-compose.yml.
- Testes automatizados (unitários e integração)
- Sistema de permissões por roles
- Paginação e filtros avançados
- Deploy em cloud (Azure / AWS)
- CI/CD pipeline
Desenvolvido por João Victor Projeto criado como desafio técnico com foco em boas práticas e arquitetura escalável.
Este projeto está sob a licença MIT.