Aplicação desenvolvida na NextLevelWeek com o tema Ecoleta. O propósito do deste projeto é conectar um ponto de reciclagem com uma pessoa que queira descartar algum tipo de lixo, seja pilhas, baterias, entre outros insumos recicláveis.
| Tela inicial | Tela de pontos de coleta | Detalhes do ponto de coleta |
|---|---|---|
 |
 |
 |
No primeiro dia foram introduzidos os conceitos e ferramentas por trás do desenvolvimento utilizando o Typescript, um conjunto de funcionalidades adicionais ao Javascript que adiciona até a possibilidade de tipagem, facilitando o desenvolvimento com o uso em conjunto com o IntelliSense. As dependências utilizadas no início do projeto são: ts-node, ts-node-dev, typescript e express. Por fim, um projeto ReactJS foi criado utilizando o Typescript, e foi realizado uma aplicação "Hello World" simples com o ReactJS.
No segundo dia, foram reforçados os conceitos introduzidos anteriormente, bem como foram introduzidos novos conceitos como a configuração do banco de dados com a dependência knex, conexões Transactions, Migrations e Seeds. Também foi utilizada a dependência Cors para filtrar a origem dos dados da API. Nesta etapa, foi criada uma forma de servir arquivos estáticos como imagens através da API, utilizando o ExpressJS. Ao todo foram criadas quatro rotas, as quais servem para criar um ponto de coleta, listar todos os pontos de coleta, filtrar novos pontos de coleta e listar itens de coletas, respectivamente.
No terceiro dia,o backend foi criado e foram introduzidas as ideias de imutabilidade e estados do ReactJS. Nesta etapa foram utilizadas as dependências react-router-dom e react-icons para a criação dos estilos e navegação da página. A integração com o backend e a comunicação com a API do IBGE foi feita através da dependência axios. E para a interação com o mapa foi utilizada as dependências leaflet e react-leaflet que possibilitam a marcação do mapa, em conjunto com a integração do mapa com a API.
No quarto dia, o app mobile foi criado utilizando os componentes do React Native e do Expo para executar a aplicação em um dispositivo móvel. Para realizar a navegação entre telas no app foi utilizada a dependência react-navigation, e para mostrar um mapa em conjunto com um marcador foi utilizada a dependência react-map-view. Para mostrar imagens do tipo SVG de forma nativa, foi utilizada a dependência react-native-svg. E a comunicação com o cliente de E-Mail, a foi utilizada a dependência Mail-Composer. Para obter os estilos de fonte do Google Fonts, foi implementada os pacotes de fontes da dependência expo-google-fonts. Por fim, a comunicação com o Backend da aplicação foi realizada através da dependência Axios.
No quinto dia, foi configurado o upload de imagens no backend através da dependência Multer, e foi configurado o upload de imagens no frontend com a dependência react-dropzone. Por fim, a validação do projeto foi feita com a dependência Celebrate que também utiliza a dependência Joi em seu núcleo.