Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Application developed during the second edition of the Next Level Week, promoted by RocketSeat. The objective is to build a multi-platform application to connect people that want to study and share knowledge - teachers and students. 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 as the REST API server.

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;
• Building a scalable backend application with Express and SQLite;
• React Native and Expo framework;
• Yarn package manager
• Upgrading from a Create-React-App to Next.js;

🚀 Technologies & Resources

Frontend (Web):

• React.js
• Axios (HTTP client)

Mobile:

• React Native
• Expo
• Axios (HTTP client)

Backend:

• Node.js
• SQLite 3
• Knex.js (SQL Query Builder)

Development:

• TypeScript
• Visual Studio Code
• Node.js routines (with Yarn and NPM)

🔨 Setting up the Environment

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

  # 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 incrementing 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 to lead to other routes;
  • Define routes and navigation to other pages;
  • Create form to have teachers signing up;
  • Create form to search classes of interesting;
  • Create list of available classes based on search;

• Mobile

  • Start up project using Expo Framework and TypeScript;
  • Create landing page screen;
  • Define navigation mechanisms;
  • Create screen for interested teachers, redirecting them to the web app;
  • Create screen to search for classes;
  • Create functionality to mark class as favorite (save to device local storage);
  • Create screen to list classes marked as favorite by the user;

• Server

  • Create project with Express, SQLite3 and Knex;
  • COnfigure Knex and setup migrations;
  • Create REST API to retrieving and storing data;

Version 2.0

• Web Layout

• Mobile Layout

• Web

  • Set up linting tools;
  • Upgrade to React 17;
  • Switch from Create-React-App to Next;
  • Create form for logging into the service;
  • Create form for signing up to the service;
  • Create form for retrieving account access;
  • Create page to display user profile;
  • Create form to update user profile;
  • Create functionality to mark other users as favorite (save to device local storage);
  • Create functionality to mark class as favorite (save to device local storage);
  • Create screen to list favorite classes and teachers;
  • Forms validation and notification;
  • Automated tests (unit and E2E);
  • Deploy app to Vercel cloud service;

• Mobile

  • Set up linting tools;
  • Add splash screen;
  • Add onboarding screens;
  • Create form for logging into the service;
  • Create form for signing up to the service;
  • Create page to display user profile;
  • Create form to update user profile;
  • Forms validation and notification;
  • Automated tests (unit and E2E);

• Server

  • Set up linting tools;
  • Forms data validation;
  • ~~ Switch from SQLite to PostgreSQL~~;
  • Switch from SQLite to MySQL, due to Heroku restrictions;
  • Create authentication system;
  • Implement file upload system;
  • Automated tests;
  • Deploy API to Heroku cloud service;

---

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