Ryandgs / nlw

Next Level Week by Rocketseat

🚀 NextLevelWeek 1.0

"O NLW é uma experiência online com muito conteúdo prático, desafios e hacks que vão te ajudar avançar para o próximo nível."

Oferecido por: Rocketseat

Gostaria de agradecer o(a) clowjs que fez algumas correções nos arquivos, mas por alguma razão todos commits foram perdidos (supostamente problema de bios talvez kk)

💻 Tecnologias

API

• Node.JS
• Express
• TypeScript
• SQLite
• Knex
• Multer
• Cors

Web

• ReactJS
• TypeScript
• Leaflet
• ReactDropzone
• Axios

Mobile

• React Native
• Expo
• Axios
• Mail Composer
• Map View

📗 O repositório

"Faaaaaala dev!" Bom... O objetivo deste arquivo é anotar informações importantes destacadas durante o andamento das aulas. O arquivo será distribuído nos canais de aprendizado com o intuito de auxiliar devs após o fechamento das aulas, para que você possa continuar codando e desenvolvendo projetos Node.JS (pensando na experiência própria de esquecer diversas configurações, comandos ou conceitos semanas depois de uma semana omnistack), até o momento em que esteja tudo na memória. Algo totalmente pensado de dev para dev, um pouco trabalhoso (uma aula de 2 horas acaba durando umas 5/6 horas, alias, também estou aprendendo e por isso suas contribuições e correções são extremamente valiosas), mas uma iniciativa para realmente ajudar e motivar a comunidade, feito com muito carinho.

Para rodar a aplicação:

Instalando dependencias

$ npm install

Api

$ npm run dev
# ou
$ yarn dev

Web

$ npm start

Mobile

$ npm start
# ou 
$ expo start

SQLite

$ npm run nkex:migrate
$ npm run knex:seed

Índice

• Day 1: Ambiente
• Day 2: API
• Day 3: Web
• Day 4: Mobile
• Day 5: Extras

‼️ Chega de enrolação!

Não esqueça de configurar devidamente seu ambiente e vamos lá ;)

Este conteúdo esta sendo desenvolvido com base nas aulas do modulo Booster

Sinta-se livre para colaborar, toda ajuda é bem vinda ;)

Day 1

📷 A aplicação

A aplicação desenvolvida na NLW será um Marketplace de coleta de resíduos com o objetivo de ajudar pessoas a encontrarem pontos de coleta de forma eficiente

Para visualizar a prototipação completa do projeto clique aqui

Iniciando o Node.JS

Para iniciar um projeto node utilizar:

$ npm init -y
$ npm install express

Configurando e Utilizando TypeScript

Tipagem para o express

$ npm install @types/express -D

Obs: "-D" para dependência de desenvolvimento!

Instalando o TS

$ npm install ts-node -D
$ npm install typescript -D

Criando arquivo de configuração TS

$ npx tsc --init

Gerando JS

$ npx ts-node <dir>

Pacote para reiniciar o server automaticamente

$ npm install ts-node-dev -D
$ npx ts-node-dev <dir>

Configurando ts-node-dev no package.json

Para reiniciar automaticamente o servidor ao salvar arquivos.

Em package.json:

"scripts": {
  "dev": "ts-node-dev <dir>"
}

$ npm run dev
# ou
$ yarn dev

Iniciando projeto React

$ npx create-react-app web --template=typescript

Recomendações:

• Whimsical: Aplicação web para criação de Fluxogramas

• Figma: Aplicação web para Prototipação / Wireframe

• Notion: To-do List

Obs: Para iniciantes, recomendo também criar seu próprio repositorio no github, iniciando assim seu portfólio além de ser uma ótima maneira de começar a aprender sobre essa ferramenta!

Ir para: Day 2