"Happy" - Orphanage finder

A platform to find orphanages to visit built with HTML, CSS, JavaScript, TypeScript, React, Node.js, Express.js, SQLite, React Native, and Expo.

                 

🎓 bootcamp:

Rocketseat

Next Level Week #3

OmniStack with Diego Fernandes

📷 screenshots:

💻

📱

soon...

🔥 source code editor

Visual Studio Code

🔧 front-end tools:

Figma

React Icons

React Router

Leaflet

React Leaflet

OpenStreetMap

mapbox

Google Maps Platform

🔨 back-end tools:

Node.js

npm

yarn

Expo CLI

Express

Chrome Extension "JSON Viewer"

Insomnia

TypeORM

SQLite

Beekeeper Studio

multer

ExpressJS Async Errors

Yup

cors

axios

📚 important topics:

front-end

Representational state transfer (REST)

JSON

Observer pattern

Single-page application (SPA)

Hot Reloading

Fast Refresh

React Hooks

back-end

HTTP request methods

Query string

Object–relational mapping (ORM)

Schema migration (also database migration)

Decorator pattern

Repository pattern

Model–view–controller (MVC)

Gerenciando variáveis ambiente no NodeJS

mobile

Traditional

iOS

• Objective-C

• Swift

Android

• Java

• Kotlin

Multiplataform

React Native

Flutter

NativeScript

JavaScript transcompiler

Babel

JavaScript module bundler

webpack

Build projects to run natively on all devices

Expo

▶️ start:

🌕 front-end ("web" folder)

◾ creat react project adding typescript from terminal:

yarn create react-app web --template typescript

or

npx create-react-app web --template typescript

◾ open the project from terminal:

cd web

code .

◾ run the project from terminal:

yarn start

or

npm start

◾ install react icons:

yarn add react-icons

or

npm install react-icons

◾ install react router:

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

or

npm install react-router-dom
npm install @types/react-router-dom -D

◾ install leaflet and react-leaflet:

yarn add leaflet react-leaflet
yarn add @types/react-leaflet -D

🚨 *hiding your mapbox public token 🚨

*to avoid to push to GitHub or any other repository

1. create a .env file inside web folder;

2. create the variable "REACT_APP_MAPBOX_TOKEN" inside the .env file and your public token;

REACT_APP_MAPBOX_TOKEN=<public token>

3. add the .env file to the .gitignore file.

🌑 back-end ("backend" folder)

◾ create backend folder from terminal:

mkdir backend

cd backend

◾ create package.json file from terminal:

yarn init -y

◾ install Express:

yarn add express
yarn add @types/express -D

◾ add Typescript:

yarn add typescript -D

yarn tsc --init

◾ change tsconfig.json:

"target": "es2017",

◾ install ts-node-dev:

yarn add ts-node-dev -D

◾ add to package.json:

  "scripts": {
    "dev": "ts-node-dev --transpile-only --ignore-watch node_modules src/server.ts"
  },

◾ run the project from terminal:

yarn dev

to confirm if is running:

localhost:3333

◾ install Insomnia Core:

Insomnia Core

◾ install TypeORM and SQLite:

yarn add typeorm sqlite3

create a database folder inside src folder

create a database.sqlite file inside database folder

create an ormconfig.json file inside backend folder and copy the text below:

{
    "type": "sqlite",
    "database": "./src/database/database.sqlite"
}

create a connection.ts file inside database folder

create a migrations folder inside database folder

◾ configure TypeORM to work with TypeScript:

add to package.json file on "scripts" the text below:

{
    "typeorm": "ts-node-dev ./node_modules/typeorm/cli.js"
}

and run TypeORM:

yarn typeorm

now the commands will be like that:

cli.js schema:sync
cls.js schema:log
etc.

◾ configuration to enable database migration:

add to ormconfig.json the text below:

    "migrations": [
        "./src/database/migrations/*.ts"
    ],
    "cli": {
        "migrationsDir": "./src/database/migrations"
    }

create the migration create_orphanages:

yarn typeorm migration:create -n create_orphanages

create tables using the database migration method and TypeORM:

yarn typeorm migration:run

view the database created:

Beekeeper Studio

create a models folder (is a representation of each database table as a class)

create a model Orphanage.ts file inside models folder

🚨 reverting the process in migration to add "opening_hours" field:

yarn typeorm migration:revert

add to the file <timestamp>-create_orphanages.ts inside migrations folder the text below between the fileds "instructions" and "open_on_weekends":

                {
                    name: 'opening_hours',
                    type: 'varchar'
                },

create the table again using the database migration method and TypeORM:

yarn typeorm migration:run

◾ enable and configure the tsconfig.json file property below:

"strictPropertyInitialization": false,

◾ enable the tsconfig.json file properties below:

"experimentalDecorators": true,
"emitDecoratorMetadata": true,

◾ how to populate the orphanages' database:

start the app (backend folder)

(on Windows: C:\...\backend>)

 yarn dev

result:

open Insominia

use the method POST with the URL below:

http://localhost:3333/orphanages

configure the body with the information like the example below and press "Send"

{	
	"name": "Jewish Orphanage Berlin-Pankow",
	"latitude": 52.5685795,
	"longitude": 13.4101369,
	"about": "Sobre o orfanato",
	"instructions": "Venha visitar",
	"opening_hours": "Das 8h até as 18h",
	"open_on_weekends": true
}

result:

◾ add to ormconfig.json:

    "entities": [
        "./src/models/*.ts"
    ],

open Insominia again

use the method POST with the URL below:

http://localhost:3333/orphanages

configure the body with the information like the example below and press "Send"

{	
	"name": "Jewish Orphanage Berlin-Pankow",
	"latitude": 52.5685795,
	"longitude": 13.4101369,
	"about": "Sobre o orfanato",
	"instructions": "Venha visitar",
	"opening_hours": "Das 8h até as 18h",
	"open_on_weekends": true
}

result:

◾ how to list the orphanages' database:

open Insominia again

use the method GET with the URL below and press "Send":

http://localhost:3333/orphanages

result:

◾ how to list on orphanate from orphanages' database:

open Insominia again

use the method GET with the URL below and press "Send":

http://localhost:3333/orphanages/id

e.g.

http://localhost:3333/orphanages/1

result:

◾ create a new table using the database migration method and TypeORM:

! a table to store the name of the orphanages photos' files

yarn typeorm migration:create -n create_images

result:

configure the new migration file (xxxxxxxxxxxxx-create_images.ts) and run

yarn typeorm migration:run

result:

◾ install a library to work with file upload:

yarn add multer
yarn add @types/multer -D

inside the path ...\backend\src, create config folder with upload.ts file inside

inside the path ...\backend, create uploads folder

🚨 When you are using Insomnia and want to make tests uploading images, select the "Multipart" option in the "Body" like the example below.

inside the path ...\backend\src, create views folder with orphanages_view.ts file inside

🚨 With the views you can, for example, return a user registered on DB without showing the password.

create images_view.ts file inside the views folder

◾ handling exceptions:

yarn add express-async-errors  

inside the path ...\backend\src, create errors folder with handler.ts file inside

◾ install yup:

yarn add yup
yarn add @types/yup -D

before import "ValidationError" from yup:

after import "ValidationError" from yup:

◾ install cors:

yarn add cors
yarn add @types/cors -D

◾ delete all database using Beekeeper Studio:

◾ create one Orphanage using Insomnia:

🌕 front-end ("web" folder)

◾ connecting the front-end to the back-end using axios:

note: alternatively you can use the fetch() method

install axios from web folder:

yarn add axios
yarn add @types/axios -D

inside the path ...\web\src, create services folder with api.ts file inside

📱 mobile ("mobile" folder)

◾ install Expo CLI:

yarn global add expo-cli

◾ create "mobile" project with Expo CLI:

expo init mobile

choose a template "blank (TypeScript)" and press "enter"

◾ install Expo on your Android mobile

◾ run the project:

cd mobile

yarn start