EcoJoinville 🌱

EcoJoinville é uma plataforma web voltada para a gestão de coleta seletiva em Joinville, promovendo sustentabilidade e alinhamento com os Objetivos de Desenvolvimento Sustentável (ODS) 11 e 12 da ONU. A plataforma permite que usuários cadastrem-se como parceiros (Ecopontos, Cooperativas ou Pontos de Entrega Voluntária), pesquisem parceiros de coleta seletiva, visualizem detalhes de cada parceiro e façam login para gerenciar preferências.

Nota: Este projeto foi desenvolvido por Douglas Graça como parte das atividades do curso do SENAI, com foco em aprendizado prático de desenvolvimento web e sustentabilidade.

🎯 Objetivo do Projeto

Facilitar a gestão de resíduos recicláveis em Joinville, incentivando a participação de cidadãos, empresas e cooperativas na construção de uma cidade mais verde. A plataforma promove a economia circular, engajamento comunitário e redução do impacto ambiental.

📂 Estrutura do Projeto

O projeto está organizado com uma estrutura clara de arquivos HTML, CSS e JavaScript para garantir a manutenibilidade.

ecojoinville/
├── src/
│   ├── img/
│   │   ├── logo.jpg
│   │   ├── pmj.png
│   │   ├── lab.png
│   │   └── senai.png
│   ├── scripts/
│   │   ├── home.js
│   │   ├── login.js
│   │   ├── parceiros.js
│   │   └── parceiroDtls.js
│   └── styles/
│       ├── global.css
│       ├── home.css
│       ├── login.css
│       ├── parceiros.css
│       └── detalhe-parceiro.css
├── index.html
├── login.html
├── parceiros.html
├── parceiroDtls.html
└── README.md

Prévia Online

• Página Inicial
• Página de Login
• Página de Listagem de Parceiros

Descrição dos Arquivos

• HTML:

  • index.html: Página inicial com seções sobre objetivos, impacto, ações e formulário de cadastro de parceiros.
  • login.html: Página de login com formulário para autenticação.
  • parceiros.html: Lista de parceiros com funcionalidade de busca por nome ou bairro.
  • parceiroDtls.html: Detalhes de um parceiro específico, incluindo materiais aceitos e informações de contato.

• CSS:

  • global.css: Estilos comuns a todas as páginas (variáveis CSS, reset, header, footer e responsividade).
  • home.css: Estilos específicos para a página inicial (hero, seções de conteúdo e formulário).
  • login.css: Estilos para a página de login, com layout de grade para hero e formulário.
  • parceiros.css: Estilos para a página de parceiros, incluindo barra de busca e lista de cards.
  • detalhe-parceiro.css: Estilos para a página de detalhes do parceiro.

• JavaScript:

  • menuHamburger.js: Lógica para o funcionamento do menu responsivo (hamburguer).
  • home.js: Validação e envio do formulário de cadastro, com integração à API MockAPI.
  • login.js: Validação do formulário de login e salvamento do email no localStorage.
  • parceiros.js: Lógica para carregar e filtrar parceiros via API, com renderização dinâmica de cards.
  • parceiroDtls.js: Lógica para carregar e exibir detalhes de um parceiro específico.

🚀 Como Configurar e Executar

Pré-requisitos

• Navegador web moderno (Chrome, Firefox, Safari, etc.).
• Conexão com a internet para carregar dependências externas (Google Fonts, Font Awesome) e a API.
• Um servidor local (opcional, mas recomendado) como o Live Server do VS Code.

Passos para Configuração

1. Clone o Repositório:

   git clone [https://github.com/DougBrando/EcoJoinville.git](https://github.com/DougBrando/EcoJoinville.git)
   cd EcoJoinville

2. Abra no Navegador:

   • Abra o arquivo index.html diretamente no seu navegador.
   • Ou, para uma melhor experiência (evitando problemas de CORS), use uma extensão como o Live Server no VS Code e clique em Go Live.

3. Endpoint da API:

   • O projeto utiliza a MockAPI para simular um backend. O endpoint configurado é: https://6860899b8e74864084437167.mockapi.io/jmt-futurodev/api/parceiros. Certifique-se de que ele esteja acessível para que as funcionalidades de cadastro e listagem funcionem.

🎨 Design e Estilização

Separação do CSS

Para manter o código organizado, os estilos foram divididos em um arquivo global.css para elementos comuns (header, footer, variáveis) e arquivos específicos para cada página, garantindo que cada contexto tenha apenas o estilo necessário.

Responsividade

O design é totalmente responsivo e se adapta a diferentes tamanhos de tela:

• Desktop: Layouts em grade com espaçamentos amplos.
• Tablet (≤768px): O menu de navegação se transforma em um menu hambúrguer.
• Mobile (≤480px): Layouts de coluna única para facilitar a leitura e o toque.

Acessibilidade

Foram aplicadas boas práticas de acessibilidade, como o uso de atributos ARIA para navegação, contraste de cores adequado e navegação via teclado.

🛠️ Funcionalidades

• Cadastro de Parceiros: Formulário validado em index.html para enviar novos pontos de coleta para a API.
• Login de Usuário: Simulação de autenticação em login.html, salvando o usuário no localStorage.
• Listagem e Filtro de Parceiros: Em parceiros.html, é possível buscar dinamicamente por nome ou bairro.
• Detalhes do Parceiro: Ao clicar em um card, a página parceiroDtls.html exibe todas as informações do parceiro, incluindo os materiais que ele aceita.

Capturas de Tela

Página Inicial	Formulário de Cadastro	Lista de Parceiros	Detalhes do Parceiro	Login

🌍 Parceiros Institucionais

• Prefeitura de Joinville
• Lab365
• SENAI

👨‍💻 Autor

Douglas Graça

• GitHub: @DougBrando
• LinkedIn: Douglas Graça