♻️ Aplicação para ajudar pessoas a encontrarem pontos de coleta para reciclagem de forma eficiente.
O projeto foi desenvolvido na semana NextLevelWeek#1 da RocketSeat, com o Diego Fernandes ministrando as aulas, esse evento sempre é bem intenso e traz muitos conhecimentos e dessa vez não foi diferente, o maior diferencial dessa edição foi trabalhar com TypeScript, foi meu primeiro contato com TS, de inicio é um pouco estranho, você esta acostumado com a flexibilidade do JS e ter uma certa cobrança por parte do TS é meio chato, mas ajuda muito, o código fica mais estruturado, definido e mais claro, gostei da experiencia e com certeza vou criar algo com TS, foi desenvolvido o back-end, front-end e mobile nesse projeto, vou descrever cada um separadamente.
Back-end
A estrutura do back-end foi feito usando o express, e o banco de dados utilizado foi o Sqlite3, assim como na ultima semana omniStack usamos a lib Knex para lidar com o banco de dados através do TS sem a necessidade de escrever queries SQL o maior diferencial nesse projeto foi trabalhar com o TypeScript como já foi citado a cima, e no último dia fizemos o upload de imagem usando o multer, que é bem prática e simples de trabalhar.
Front-end
O front-end foi criado usando um templete de TS npx create-react-app web --typescript , o projeto ficou com uma boa identidade visual e bonito seguindo os padrões de projetos da RocketSeat, além do TS no front uma das coisas mais legais de trabalhar nesse projeto foi uma lib de mapa que foi usada que é openSource leaflet, usamos a API de geolocalição do navegador para poder buscar a zona do usuário e também a API do IBGE para buscar Estados e cidades, o que foi bem legal pois nem sabia que o IBGE tinha API, estou destacando mais o que foi novidade para mim, mas o projeto conta com mais coisas, no último dia trabalhamos também com uma biblioteca react-dropzone, para conseguir selecionar a imagem do ponto de coleta ou arrastar ela pra dentro da tela da aplicação.
Mobile
Assim como na última semana omniStack, usamos o Expo para poder construir o app mobile, o Expo é uma abstração para trabalhar com React Native, ele permite você iniciar com o desenvolvimento em poucos minutos, fizemos integrações com o e-mail e com o whatsapp dentro do app, mas o que mais se destacou nessa edição foi trabalhar com o mapa, selecionamos os itens a serem coletados e buscamos os pontos de coleta na api, depois inserimos os pontos no mapa para o usuário poderá visualizar e entrar em contato com o estabelecimento, isso foi bem bacana de construir.
- TypeScript
- Node.js
- Banco de dados: Sqlite3
- Cliente REST: Insomnia
Dependências
Dependências de desenvolvimento
Dependências
API´S
Dependências
- Primeiro passo, clone ou baixe o projeto em sua maquina
- Este repositório possui 3 projetos, server, web e mobile, você precisa iniciar os 3 individualmente.
server
- Primeiro abra a pasta server no terminal
- Instale as dependências com o comando
npm i - Inicie o servidor com o comando
npm dev - O servidor estará disponível na porta 3333, http://localhost:3333/
web
- Agora abra a pasta web no terminal
- Instale as dependências com o comando
npm i - Inicie o servidor com o comando
npm start - Uma aba vai se abrir no navegador, caso não ocorra, navegue para http://localhost:3000/
mobile
- Abra a pasta mobile no terminal
- Instale as dependências com o comando
npm i - Inicie o servidor com o comando
npm start - Este projeto foi desenvolvido usando o Expo, então vc precisa instalar o App do expo no seu celular, e em seguida ler o QRCode que vai aparecer no seu navegador após iniciar o servidor usando o app do expo, após isso o app vai ser carregado no seu celular
🔖 Layout do projeto no Figma: Click Aqui