Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Application developed during the third edition of Next Level Week, promoted by RocketSeat. The objective was to build a multi-platform application to connect orphanages and people that want to find them, get in toudh and schedule a visit. The event chose the JavaScript stack to be used all over the implementation, using React in web version, React Native in mobile and Node.js at the server side.

Check out the application running!

🏆 Lessons Learned

• Building a full scalable React application;
• Using TypeScript in a React app and at the backend to help on development;
• React Hooks! The fun way to build React apps;
• Using Leaflet for React, an easy map component;
• Building an app with React Native and Expo framework;
• Building a scalable backend application with Express and SQLite;
• Uploading images to the server and previewing them instantly;
• Using TypeORM to help on migrations and database transactions;
• Using Yup to easily validate data from the client;
• Catching requests processing errors and displaying them;

🚀 Technologies & Resources

Frontend (Web):

• React.js
• Axios (HTTP client)
• React Leaflet (Map component)

Mobile:

• React Native
• Expo
• Axios (HTTP client)

Backend:

• Node.js
• SQLite 3
• TypeORM
• Yup (validation module)

Development:

• TypeScript
• Insomnia (REST client)
• BeeKeeper Studio (database manager)
• Visual Studio Code
• Node.js routines with NPM

🔨 Setting up the Environment

Make sure to have Node.js 10+ installed in your machine and its node and npm shortcuts available through the command line, then use the following routines to run each part of the project:

  # at project root (optional)
$ npm install       # install required dependencies
$ node config.js    # Creates ".env*" files and configure local network URL to be used

  # Server
$ cd server
$ npm install       # install required dependencies
$ npm run migrate   # setup database schema
$ npm run seed      # pre-populate database
$ npm run dev       # start development Server
$ npm run build     # transpile source files for deployment

  # Web App
$ cd web
$ npm install       # install required dependencies
$ npm run dev       # start development server
$ npm run build     # build files for production

  # Mobile App
$ cd mobile
$ npm install       # install required dependencies
$ npm run dev       # build and serve the application via Expo mobile app

⚡ Features Implementations

The main idea of the project was developed during the week of the event and the result is the one found in release v1.0. Afterwards, any incoming commits are intended to be incremental updates to improve the application, as proposed at the end of the event.

Besides, both v1.0 and v2.0 have their layouts available at Figma.

Version 1.0

• Web Layout

• Mobile Layout

• Web

  • Start up project using create-react-app and TypeScript;
  • Create landing page;
  • Define routes and navigation rules;
  • Create page with navigable map and pins;
  • Fetch orphanages from REST API and position on the map;
  • Create form to display selected orphanage details;
  • Create form to register new orphanages;

• Mobile

  • Start up project using Expo Framework and TypeScript;
  • Create landing page screen;
  • Define navigation mechanisms;
  • Create screen to display saved orphanages;
  • Create screen to register new orphanages;
  • Create photos carrousel;

• Server

  • Create project with Express, SQLite3 and TypeORM;
  • COnfigure TypeORM entities and migrations;
  • Create REST API to retrieve and store data;
  • Process uploaded photos and store them in a separate directory;
  • Validate submitted form;

Version 2.0

• Challenge

• Web Layout

• Mobile Layout

• Web

  • Set up linting tools;
  • Upgrade to React 17;
  • Allow append and delete of photos on orphanage form;
  • Add loading animations;
  • Track user geo-location;
  • Add other orphanage information: address and phone number;
  • Create search mechanism at the map page;
  • Do not allow real-time display new orphanage. Await service review;
  • Create form for logging into the service;
  • Create form for signing up to the service;
  • Create form for retrieving account access;
  • Implement 2-factor authentication;
  • Create page to display current user data;
  • Create form to update current user profile;
  • Create form to update existing orphanage;
  • Catch forms validation and display notification;
  • Handle other HTTP calls errors;
  • Automated tests (unit and E2E);

• Mobile

  • Set up linting tools;
  • Upgrade to React 17;
  • Make use of environment variables for development;
  • Add splash screen;
  • Add onboarding screens;
  • Add loading animations;
  • Track user geo-location;
  • Add other orphanage information: address and phone number;
  • Create search mechanism at the map page;
  • Create form for logging into the service;
  • Create form for signing up to the service;
  • Implement 2-factor authentication;
  • Create page to display current user profile;
  • Create form to update current user profile;
  • Create form to update existing orphanage;
  • Catch forms validation and display notification;
  • Handle other HTTP calls errors;
  • Automated tests (unit and E2E);

• Server

  • Set up linting tools;
  • Escape uploaded photos names;
  • Make use of environment variables;
  • Photos compression at upload;
  • Photos count upload validation;
  • Switch SQLite to PostgreSQL;
  • Create authentication system;
  • Automated tests;
  • Customized CORS configuration;
  • Deploy the application;
  • PostgreSQL plugin at Heroku app;
  • Bucket at AWS S3 for Storage;

---

Also checkout the project developed in NLW #2, NLW #4 and NLW #5.