🚀 Next Level Week #01

Curso de Node.js, ReactJS e React Native na linguagem TypeScript, ministrado pela RocketSeat.

📁 Sumário

• Aplicação
• Tecnologias
• Como rodar

🎈 Aplicação

Durante o curso foi desenvolvida a aplicação "Ecoleta", direcionada para o cadastro e a consulta de pontos de coleta de materiais descartáveis diversos, como lâmpadas, baterias e óleo de cozinha. O Ecoleta oferece uma opção de busca por região, além de um filtro relacionado ao tipo de material que deseja descartar. Os pontos listados na aplicação contém a localização e o contato do órgão responsável pela coleta.

⚙️ Tecnologias

O sistema, escrito em TypeScript, é composto por 3 módulos:

• 🗄️ Server: construído com Node.js e responsável por gerenciar ações no banco de dados através de uma API RESTful.
• Express: usado no roteamento da aplicação e gerenciamento de seus middlewares.
• SQLite 3: usado na implementação do banco de dados.
• Knex: construtor de consultas SQL (query builder) usado para facilitar a manipulação do banco de dados.
• Multer: usado para manipular multipart/form-data, aqui possibilitando o upload de imagens.
• Celebrate: usado para validação de entradas do usuário.
• Cors: permite o acesso da aplicação Web ao servidor.


• 🖥️ Web: implementado com ReactJS, representa o frontend da aplicação e a interface na qual os pontos são cadastrados pelo usuário.
• Axios: usado na construção da API responsável por fazer requisições ao servidor.
• React-Router-DOM: usado no roteamento das páginas da aplicação.
• React-Leaftlet: usado para fornecer os recurso de mapa na aplicação.
• React-Icons: pacote de ícones.
• React-Dropzone: possibilita o recurso de drag'n'drop para upload de imagens.


• 📱 Mobile: implementado com React Native através da plataforma Expo, representa a versão móvel da aplicação, sendo a interface responsável pela consulta dos pontos cadastrados.
• Axios: usado na construção da API responsável por fazer requisições ao servidor.
• Expo-Mail-Composer: usado para envio de e-mails através de apps nativos ao OS.
• Expo-Google-Fonts: permite o uso de fontes do Google Fonts em aplicações do Expo.
• Expo-Location: permite o uso dos recursos de geolocalização do OS.
• Expo-Constants: possibilita o acesso ao tamanho da barra de status do OS durante a estilização da interface.
• React-Navigation: gerencia o roteamento e a navegação da aplicação.
• React-Native-Gesture-Handler: usado no gerenciamento dos toques em botões da interface.
• React-Native-Maps: fornece o componente de mapa à aplicação.
• React-Native-SVG: fornece suporte aos arquivos SVG's presentes na interface.

🎡 Como rodar

É necessário ter o Git, o Node.js e um gerenciador de pacotes (npm ou yarn) instalados. Esse passo-a-passo usará o npm.

1. Baixe o projeto



git clone https://github.com/allanbz/RocketSeat-Next-Level-Week-01.git



2. Edite a propriedade baseURL de acordo com seu IPv4 no arquivo abaixo, mantendo a porta 3333:



mobile/src/services/api.ts



3. Navegue até a pasta server, instale as dependências do projeto, configure o banco de dados e execute o servidor:



npm install
npm run knex:migrate
npm run knex:seed
npm run dev



4. Navegue até a pasta web, instale as dependências do projeto e execute a aplicação:



npm install
npm start



5. Para executar a aplicação mobile, primeiro é preciso instalar o pacote do Expo, bem como o aplicativo Expo disponível na loja de seu respectivo OS (Android ou iOS). A instalação do app não é necessária caso queira usar um emulador. Para instalar o pacote do Expo, suas dependências e executar a aplicação, navegue até a pasta mobile e execute os seguintes comandos:



npm install expo-cli --global
npm install
npm start

Feito isso, uma aba do Expo será aberta em seu navegador. Com a opção LAN selecionada, abra o aplicativo no seu celular e use o escaneamento por QRCode para abrir o app.