Be the hero

Sumary

1. About the project.
2. Road map of what have been done during the week.
3. Extra funcitons added.
4. Install the project.
5. How to start the project.
   1. Back-end.
   2. Front-end.
   3. Mobile.
   4. If expo was not initialized.
6. License.

📁 About the project.

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?

First a person registers his NGO on the site and posts his case with a reward for the Hero who will complete it (web).

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).

After that the hero and the NGO will discuss how they can help each other to solve the case :)

📜 List of function developed

Day One.

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

Day Two.

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

Day Three.

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

Day Four.

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

Day Five.

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

📑 Extra functions Added.

• Page 404 (web) ✔️.
• Create a loading Effect with Skeleton effect (web) ✔️.
• 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) ❌.
• loading effect with ReactContentLoader (mobile) ✔️.

📂 Install the Project.

First of all, you will need to install NPM or Yarn on your computer to download the packages.

We recommed you to use npm because the project was created with it

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.

🖥️ Back-End

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

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

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

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.

if the problem persist access the expo common issues repository to solve it.

🎫 License

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.