FullStack-CrudOrphanages-WithLocation-web-mobile-api: A TypeScript repository from pedrohenriquecardoso

Desafio do projeto rocktseat Next Level Week

Implementação de página web, app mobile e api

utilizando Nodejs, Typescript, React e ReactNative.

Primeiro dia

Código na pasta web

Cria um projeto React usando typescript.

yarn create react-app web --template typescript

Inicializa servidor com hot reload.

yarn start

Instala modulo de icones. Documentação aqui!

yarn add react-icons

Instala modulo de rotas. Documentação aqui!

yarn add react-router-dom

Instala modulo de definição de tipos como dependência de desenvolvimento.

yarn add @types/react-router-dom -D

Instala modulo javascript leaflet e wrapper dele como componente React. Documentação aqui!

yarn add leaflet react-leaflet

Instala modulo de definição de tipos como dependência de desenvolvimento.

yarn add @types/react-leaflet -D

Segundo dia

Código na pasta backend

Inicializa pasta como modulo js/node

yarn init -y

Instala framework Express (Documentação) e definição de tipos

yarn add express

yarn add @types/express -D

Instala modulo TypeScript como dependência de desenvolvimento

yarn add typescript -D

Cria arquivo de coniguração do TypeScript tsconfig.json

yarn tsc --init

Instala modulo que reinicializa servidor node se houver mudança de arquivo

yarn add ts-node-dev -D

Instala os modulos TypeORM (Documentação) e SQLite3

yarn add typeorm sqlite3

Comandos utilizados para gerar e executar migrations

yarn typeorm migration:create -n create_orphanages

yarn typeorm migration:run

yarn typeorm migration:revert

yarn typeorm migration:create -n create_images

yarn typeorm migration:run

Modulo para envio de arquivos

yarn add multer

yarn add @types/multer -D

Adiciona modulo de suporte a erros async/await no Express

yarn add express-async-errors

Instala modulo de validação do node

yarn add yup

yarn add @types/yup -D

Adiciona modulo para habilitar CORS no node

yarn add cors

yarn add @types/cors -D

Terceiro dia

Código na pasta web

Instala modulo para ajax

yarn add axios

Quarto dia

Instala o Expo usando yarn (Necessita adicionar yarn no PATH do sistema)

yarn global add expo-cli

Instala o Expo usando npm (Melhor alternativa no Lubuntu)

sudo npm install -g expo-cli

Cria um novo projeto mobile

expo init mobile

Código na pasta mobile

Inicializa servidor com fast refresh

yarn start

Instala modulo expo de mapas

expo install react-native-maps

Instala modulo expo fonts

expo install expo-font

Instala modulo de font Nunito

expo install @expo-google-fonts/nunito

Instala modulo de roteamento

yarn add @react-navigation/native

Instala dependencias do react-navigation

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Instala stack navigator

yarn add @react-navigation/stack

Quinto dia