O objetivo é conectar ONG's a pessoas que queiram ajudar com um valor monetário, a ONG cria um cadastro, posta os casos em que precisa de colaboração, e uma pessoa pode visualizar os casos e escolher qual ela pode ajudar.
O projeto foi desenvolvido na semana omniStack11 da RocketSeat, com o Diego Fernandes ministrando as aulas, esse evento sempre é bem intenso e traz muitos conhecimentos, foi desenvolvido o back-end, front-end e mobile nesse projeto, vou descrever cada um separadamente.
Back-end
O back-end foi feito usando o express, e o banco de dados utilizado foi o Sqlite3, o maior diferencial nesse projeto para mim foi trabalhar com a lib knex, que é um construtor de consultas SQL, ele permite trabalhar com as consultas usando funções no javaScript sem a necessidade de criar consultas SQL, e também as migrations, que é uma maneira de criar as tabelas e manter um histórico de quando elas foram criadas, alteradas, é como um controle de versões para as tabelas, no último vídeo da semana omniStack, o Diego abordou mais alguns assuntos que não foram aplicados a fundo, mas que são muito interessantes, são eles: as validações dos dados para garantir que os dados estão chegando da maneira correta no backend, e a criação de testes, foi criado apenas alguns testes não para a aplicação toda, mas foi uma imersão incrível, e te faz colocar o pé na água em relação aquele assunto que antes você nem mesmo conhecia.
Front-end
No frontend dessa aplicação não houve grandes desafios, o que mais gostei foi que o layout ficou muito bonito, a prototipagem desse projeto está disponível para ser visualizada aqui em Resultado, foi bem interessante o uso da biblioteca react-icons, que reúne os ícones de vários sites, inclusive do material-design, e tem uma configuração que foi feita nas settings do vs-code que foi algo que ajuda bastante a trabalhar com o react, quando vc cria uma tag no html, o vs-code completa pra vc, ja no jsx isso não acontece, mas tem como ativar isso, assim se vc escrever h1 no jsx ele vai sugerir uma tag, isso agiliza muito no dia a dia, vou deixar as instruções para a configuração.
- primeiro passo, apertar Ctrl + Alt + P abrirá um modal
- segundo passo, buscar por settings (Open settings JSON)
- terceiro passo, adicionar essas duas linhas dentro do arquivo
"emmet.syntaxProfiles": { "javascript": "jsx" },
"emmet.includeLanguages": { "javascript": "javascriptreact" },
Mobile
A parte mobile foi desenvolvida usando o Expo que é uma ferramenta utilizada no desenvolvimento mobile com React Native, ele facilita muito as coisas e te permite começar a desenvolver para mobile em poucos minutos, é realmente bem impressionante, a parte mobile foi mais simples, ela apenas lista os casos da ong, e visualiza um caso em específico, uma funcionalidade interessante que foi desenvolvida foi a integração do app com o e-mail, e o whatsApp, podendo disparar eles de dentro da aplicação, algo bem simples mas que é interessante é o carregamento de mais dados do banco ao rolar até o final da lista.
- JavaScript
- Node.js
- Banco de dados: Sqlite3
- Cliente REST: Insomnia
Dependências
Dependências
Dependências
- Primeiro passo, clone ou baixe o projeto em sua maquina
- Este repositório possui 3 projetos, hero-backend, hero-frontend e hero-mobile, você precisa iniciar os 3 individualmente.
hero-backend
- Primeiro abra a pasta hero-backend no terminal
- Instale as dependências com o comando
npm i - Inicie o servidor com o comando
npm start - O servidor estará disponível na porta 3003, http://localhost:3003/
hero-frontend
- Agora abra a pasta hero-frontend 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/
hero-mobile
- Abra a pasta hero-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
