Interface inteligente para gerenciamento do reuso, descarte e economia circular do lixo eletrônico.
Este é o repositório do Frontend do GreenTech, uma aplicação web moderna desenvolvida para ser a interface intuitiva do nosso sistema de gerenciamento de ciclo de vida de equipamentos tecnológicos.
Enquanto o Back-end processa as regras de negócio, o GreenTech-Front oferece uma experiência "Clean & Green", para que empresas gerenciem a logística reversa, reuso e descarte certificado de hardware em desuso.
🔗 Ecossistema do projeto
- Backend: GreenTech API
- Documentação da API (Swagger): Acessar Swagger
O GreenTech foi um projeto desenvolvido em equipe durante o bootcamp da Generation Brasil, com foco em soluções sustentáveis para gestão do ciclo de vida de equipamentos tecnológicos e economia circular.
Este repositório é uma versão mantida para fins de portfólio e documentação técnica, contendo exclusivamente a camada Frontend da aplicação, já integrada à API oficial do projeto.
Minha atuação envolveu diferentes etapas do desenvolvimento, incluindo:
- 🎨 UI/UX Design: Criação e prototipação das telas no Figma
- 💻 Frontend Development: Desenvolvimento da interface responsiva em React
- ⚙️ Backend Development: Implementação de funcionalidades e integração da API
- 🔌 Integração Fullstack: Consumo de endpoints e conexão entre Frontend e Backend
O repositório original, backend e demais projetos relacionados podem ser encontrados na organização oficial do time:
🔗 Organização: OneToMany
| Integrante | GitHub |
|---|---|
| Maria Eduarda Gomes | @memariaa |
| Álvaro César | @alvarocsr2 |
| Breno Nunes | @BrenoNunes96 |
| José Rodrigues | @jrs-neto |
| Márcia Telles | @MarciaFogaca |
| Mayara Monteiro | @Imayagmb |
Redefinindo a experiência de gestão ambiental. Convertendo complexidade logística em uma interface intuitiva e responsiva para o clima.
- 📱 Responsividade Global: Acesso perfeito via Desktop, Tablet ou Smartphone (Técnicos em campo ou Gestores).
- 🔐 Controle de Acesso (RBAC): Separação clara entre o que um Gestor Admin vê e o que um Cliente vê.
- ✨ UX Intuitiva: Design minimalista para agilizar o cadastro e triagem de equipamentos.
- 📊 Visualização de Impacto: Dashboards claros para relatórios de ESG e economia de CO₂.
- 📄 Gestão de Certificados: Facilidade para download de Certificados de Destruição Segura.
- 👤 Login e Autenticação Segura: Integração com JWT do Back-end.
- 🚧 Rotas Protegidas: Middlewares que garantem que apenas Admins acessem o gerenciamento.
- 📦 Formulários Dinâmicos: Cadastro e edição de equipamentos (usando React Hook Form).
- ♻️ Triagem de Hardware: Interface para atualizar o status do item (reuso/descarte).
- 🔔 Notificações em Tempo Real: Feedback visual de sucesso ou erro (react-hot-toast).
- 📋 Listagem Inteligente: Filtros para buscar equipamentos por tipo, status ou cliente.
| Biblioteca | Funcionalidade | Ícone |
|---|---|---|
| React Router | Navegação e Proteção de Rotas |  |
| Axios | Comunicação com a API (Back-end) |  |
| React Hook Form | Formulários de Alta Performance |  |
| Lucide React | Ícones Modernos e Leves |  |
| React Hot Toast | Notificações de Feedback |  |
O projeto segue uma estrutura modular focada em escalabilidade e manutenção (TypeScript):
src/components: Componentes reutilizáveis (Botões, Inputs, Sidebar).src/contexts: Gerenciamento de estado global (Autenticação).src/models: Interfaces TypeScript espelhadas das entidades do Back-end.src/pages: As telas completas da aplicação (Login, Dashboard).src/routes: Configuração do React Router e middlewares de proteção.src/services: Configuração do Axios para consumo da API (Service.ts).src/styles: Configurações globais do Tailwind CSS (index.css).
# 1. Clone o repositório
git clone https://github.com/memariaa/GreenTech-CRM.git
# 2. Entre na pasta
cd GreenTech-CRM
# 3. Instale as dependências
npm install
# 4. Configure a URL do Back-end no arquivo src/services/Service.ts
# 5. Rode o projeto em modo de desenvolvimento
npm run dev