🚀 Visão Geral

Ecosrev é uma plataforma web desenvolvida com o objetivo de incentivar o descarte correto de resíduos eletroeletrônicos. A aplicação conecta cidadãos a empresas especializadas em coleta de lixo eletrônico, promovendo a sustentabilidade e a conscientização ambiental. O sistema oferece recompensas para os usuários que participam do descarte responsável de seus resíduos.

Este projeto foi desenvolvido no âmbito do curso de Laboratório de Desenvolvimento Web, utilizando tecnologias modernas para garantir uma experiência de usuário de alta qualidade, bem como um backend eficiente e escalável.

---

🔧 Tecnologias Utilizadas

Frontend

Backend

Deploy

---

💡 Funcionalidades

• Sistema de recompensas: Incentiva os usuários a descartarem seus resíduos corretamente em troca de benefícios.
• Autenticação segura: Implementação de JWT para garantir a segurança no processo de login e comunicação entre frontend e backend.
• Testes automatizados: O código foi testado utilizando Jest e React Testing Library, garantindo uma cobertura de testes acima de 80%.
• API bem documentada: A API do backend é documentada utilizando Swagger, oferecendo uma visão clara sobre as rotas e funcionalidades.

---

📦 Como Rodar o Projeto Localmente

Para rodar o projeto em seu ambiente local, siga as instruções abaixo:

---

Pré-requisitos

Antes de começar, certifique-se de ter o Node.js (versão 14 ou superior) e o npm (ou yarn) instalados em seu sistema.
Caso não tenha, instale o Node.js através do site oficial.

---

Passo 1: Clone o Repositório

Clone o repositório para sua máquina local:

git clone https://github.com/usuario/ecosrev.git
cd ecosrev

Passo 2: Instalar as Dependências

Navegue até o diretório do projeto e instale as dependências tanto do frontend quanto do backend:

Frontend: Entre na pasta do frontend e instale as dependências:

cd frontend
npm install

Backend: Entre na pasta do backend e instale as dependências:

cd backend
npm install

Passo 3: Configurar as Variáveis de Ambiente

O projeto exige algumas variáveis de ambiente para funcionar corretamente. Crie um arquivo .env no diretório raiz do projeto (se ainda não existir) e configure as seguintes variáveis:

.env

MONGODB_URI = [Conexão com o Banco de Dados]
MONGODB_DB = [Nome Banco de Dados]
EXPIRES_IN = 24h [Tempo para expiração Token]
SECRET_KEY = [Encriptação]
PORT = 4000

Passo 4: Rodar o Projeto

Agora, você pode rodar o frontend e o backend em seu ambiente local:

Frontend Execute o servidor de desenvolvimento do frontend:

cd frontend
npm run dev

O frontend estará disponível em http://localhost:4000.

Backend Execute o servidor de desenvolvimento do backend:

cd backend
npm run dev

O backend estará disponível em http://localhost:4000 (ou qualquer porta configurada no .env).

📄 Documentação da API A API do projeto está documentada e pode ser acessada pelo Swagger. Após rodar o backend, você pode acessar a documentação da API no seguinte endereço:

Documentação API

A documentação fornece detalhes sobre as rotas disponíveis, parâmetros necessários, exemplos de requisições e respostas.

🎨 Design e Interfaces

A plataforma foi projetada com uma interface limpa e intuitiva, priorizando a experiência do usuário. O design segue a filosofia de Atomic Design, garantindo que os componentes sejam reutilizáveis e facilmente escaláveis. A paleta de cores foi escolhida para ser suave e amigável, com destaque para tons de roxo e azul, transmitindo modernidade e confiança.

💡 Protótipo

Acesse o protótipo interativo no Figma:
Protótipo no Figma

---

🎬 Apresentação

Cadastro

Login (usuário)

Selecionar benefícios para resgate

Perfil

Logout

Login (administrador)

Cadastrar benefícios

Editar benefícios

Editar pontos

---

🐳 Docker: O que é e Como Usar

No desenvolvimento do EcosRev, utilizamos o Docker para garantir que tanto o frontend quanto o backend fossem executados de maneira consistente em diferentes ambientes. Com a utilização de contêineres Docker, conseguimos isolar os serviços, garantindo que as dependências necessárias para o funcionamento de cada parte da aplicação estivessem sempre presentes, independentemente do ambiente em que o projeto estivesse rodando.

Você pode baixar o material completo em um arquivo .doc com as instruções detalhadas no link abaixo:

Baixar Instruções do Docker

🐳 Docker: Frontend

Construir a Imagem do Frontend:

  docker build -t ecosrev-frontend-app .

Executar o Container:

  docker run -p 3000:3000 -e NEXT_PUBLIC_API_URL=http://localhost:4000/api

Link do Frontend no Docker Hub:
Imagem Frontend Docker

🐳 Docker: Backend

Construir a Imagem do Backend:

  docker build -t ecosrev-backend .

Executar o Container:

  docker run -p 4000:4000 --env-file .env ecosrev-backend 

Link do Backend no Docker Hub:

Imagem Backend Docker

🐳 Docker: Composição (Frontend + Backend)

Rodar Frontend e Backend no Mesmo Container:

  docker-compose up --build

🌐 Hospedagem do Site

Este site está hospedado na Vercel, uma plataforma de deploy e hospedagem de aplicações web, otimizada para projetos front-end e full-stack. A Vercel oferece recursos como deploys automáticos a partir de repositórios Git, integração contínua e um desempenho de alta qualidade com uma rede de entrega de conteúdo (CDN) global.

📍 Acesso

Você pode acessar o site através do seguinte link: EcosRev - PI

🧑‍💻 Desenvolvedores

Este projeto foi desenvolvido por uma equipe de estudantes do curso de Desenvolvimento de Software Multiplataforma. Abaixo estão os nomes dos colaboradores:

Nome	GitHub
Gabriel Yamaoka Bernardes	YamaokaK
João Lucas Melo	JoaoLucasMdO
Laura Jane Antunes	LauraJaneAntunes
Mariana Hirata	marianakakimoto
Mateus Ferreira	AEntropia