<h1 align="center">
  Be the hero
</h1>

# Sumary
1. [About the project](#about).
2. [Road map of what have been done during the week](#Road-map).
3. [Extra funcitons added](#extra).
4. [Install the project](#install).
5. [How to start the project](#Start).
    1. [Back-end](#backend).
    2. [Front-end](#frontend).
    3. [Mobile](#mobile).
    4. [If expo was not initialized](#expo).
6. [License](#license).

# 📁 About the project.<a name="about"></a>
This project was developed for help people to solve their problem and help their communities, creating an NGO (non-governamental organization) on the website and posting their cases there, so how will it work?
<br>
<br> 
First a person registers his NGO on the site and posts his case with a reward for the Hero who will complete it (web).
<br>
<br> 
Then a Hero will be able to see a list of cases available on the mobile app, then he can choose a case to participate and after he chooses one, he will contact the NGO by e-mail or by their WhatsApp number that was available(mobile).
<br>
<br> 
After that the hero and the NGO will discuss how they can help each other to solve the case :)

# 📜 List of function developed <a name="Road-map"></a>

### Day One.

- [x] Aplication Apresentation ✔️. 
- [x] Setting up development environment ✔️. 
  - [x] Node.js && npm ✔️. 
  - [x] Visual studio code ✔️. 
- [x] Understanding the Fron-end and Back-end ✔️. 
- [x] Create project with Node.js ✔️. 
- [x] Understanding the React and SPA ✔️. 
- [x] Create project with React.js ✔️. 
- [x] Understanding the React Native and Expo ✔️. 

### Day Two.

- [x] Node.js and Express ✔️. 
  - [x] Routes and Resources ✔️. 
  - [x] HTTP methods ✔️. 
  - [x] Types of params ✔️. 
- [x] Nodemon configuration ✔️. 
- [x] Using the Imnsominia ✔️. 
- [x] diffs between databases ✔️. 
- [x] database configuration ✔️. 
- [x] Wondering about entities and functionalities ✔️. 
- [x] Building the Back-End ✔️. 
- [x] Adding cors module ✔️. 
- [x] Sending Back-end to github ✔️. 

### Day Three.

- [x] cleaning the reaction structure ✔️. 
- [x] React Concepts ✔️. 
    - [x] Components ✔️. 
    - [x] JSX ✔️. 
    - [x] State ✔️. 
    - [x] Immutability ✔️. 
- [x] Login Page ✔️. 
- [x] setting up the routes ✔️. 
- [x] NGO register page ✔️. 
- [x] Case List ✔️. 
- [x] Conecting Back-End to the React application ✔️. 
- [x] Sending Front-End to github ✔️. 

### Day Four.

- [x] Installing Expo ✔️. 
- [x] Creating React Native Project ✔️. 
- [x] Emulating the project ✔️. 
    - [x] In the smartphone (used ✔️) . 
    - [ ] Emulators. 
    - [ ] Expo Stack.
- [x] Diffs between React.js and React Native ✔️. 
    - [x] HTML Elements ✔️. 
    - [x] Semantic ✔️. 
    - [x] Stilishing ✔️. 
        - [x] FlexBox ✔️. 
        - [x] Properties ✔️. 
        - [x] style inheritance ✔️. 
        - [x] Own Styling ✔️. 
- [x] Pastes Structure ✔️. 
- [x] Icon and Splash screen ✔️. 
- [x] Setting Up navigation ✔️. 
- [x] Case Page ✔️. 
- [x] Case Details Page ✔️. 
- [x] Opening Whatsapp and E-mail ✔️. 
- [x] Connecting Back-End to the Mobile Application ✔️. 
- [x] Sending the mobile to the github ✔️. 

### Day Five.

- [x] Adding Validations ✔️. 
- [x] Adding Tests ✔️. 
    - [x] Why doing Tests? ✔️. 
    - [x] TDD concept ✔️. 
    - [x] Configuring Jest ✔️. 
    - [x] Configuring the test database ✔️. 
    - [x] Installing SuperTest ✔️. 
    - [x] Testing the Authentication Route ✔️. 
- [x] Deploy ✔️. 
    - [x] Alternatives ✔️. 
    - [x] which to choose? ✔️.   
- [x] Things to study down the road.
    - [ ] code standardization (ESlint, Prettier).
    - [ ] JWT Authentication. 
    - [ ] Styled Components. 
- [x] Tips To use better.
    - [x] Github ✔️. 
    - [x] Linkedin ✔️.

# 📑 Extra functions Added. <a name="extra"></a>

- [x] Page 404 (web) ✔️. 
- [x] Create a loading Effect with Skeleton effect (web) ✔️. 
- [x] Responsivity (web) ✔️.
- [ ] Validate Login and Incidents (back-end) ❌.
- [ ] Create a input mask with react-input-mask (web) ❌.
- [ ] do the remaining tests ❌ (Back-End).
- [ ] Do the Tests (Front-End and Mobile) ❌.
- [x] loading effect with ReactContentLoader (mobile) ✔️.

# 📂 Install the Project. <a name="install"></a>

First of all, you will need to install [NPM](https://www.npmjs.com/) or [Yarn](https://classic.yarnpkg.com/en/) on your computer to download the packages.
<br>
<br>
**We recommed you to use npm because the project was created with it**
<br>
<br>
To install the Back-end you will need to execute these commands.

```
cd backend

and

npm install or yarn ( if you are using Yarn).
```

To install the Front-end you will need to execute these commands.

```
cd frontend

and

npm install or yarn ( if you are using Yarn).
```

To install the mobile you will need to execute these commands.

```
cd mobile

and

npm install or yarn ( if you are using Yarn).
```

# 📂 How to start the project. <a name="Start"></a>

## 🖥️ Back-End <a name="backend"></a>

To start the Back-End you will need to execute these commands

```
//To enter the backend folder use:
cd backend

//To initialize the backend use:
npm start
```

## 💻 Front-End <a name="frontend"></a>

To start the Front-End you will need to execute these commands

```
//To enter the frontend folder use:
cd frontend

//To initialize the frontend use:
npm start
```

## 📱 Mobile <a name="mobile"></a>

To start the Mobile you will need to execute these commands

```
//To enter the mobile folder use:
cd mobile

//To initialize the mobile use:
Expo start
```

## ☠️ If expo was not initialized <a name="expo"></a>

If the expo was not initialized you may not have the ```expo-cli``` on your computer so to install it you need to run this command.

```
npm install -g expo-cli
```
After it install you need to restart your CMD and run again the command ```expo start```.
<br>
<br>
if the problem persist access the [expo common issues repository](https://github.com/Rocketseat/expo-common-issues) to solve it.

# 🎫 License <a name="license"></a>

This is an open-source Project, you can use it and test it as many times as you want to. If you like the project Mark it with a star and contribute to it for more people see the project.
