tutorbook

Tutorbook is an online volunteer tutoring platform that connects students in need (who no longer have face-to-face support from teachers) with volunteer tutors (who want to make a difference from home).

The problem

• Students no longer have the individualized support teachers usually have given (when they met face-to-face)
• Teachers can no longer attend to each student individually; some students are falling behind

The solution

• Support those students by connecting them to university students and professionals also confined in their homes
• Enable teachers to request one-on-one help for students they know are struggling

Current work

Here's what we're working on at a super high-level:

• Building out a front-end where students and tutors can sign-up to be connected to one another.
• Building out a back-end to automatically match students with tutors and send them three links:
  • Link to video call
  • Link to virtual whiteboard (probably using DrawChat)
  • Link to shared Google Drive folder

Contributing

Do the following (preferably in order):

• Join our Slack workspace.
• Check the #development channel pins for more information on how you can help out.
• Read through the links included below to become familiar with our current tech stack.
• Contribute:
  • Choose an issue (from the top of the To Do column; the most pressing issues are at the top).
  • Fork this repository.
  • Address the issue.
  • Create a PR.

Also feel free to check out our recently added tutorials/ directory for additional information detailing different aspects of this project (e.g. tests, deployment workflows, CI/CD, etc).

This project uses (please ensure that you're familiar with our tech stack before trying to contribute; it'll save your reputation and a lot of time):

Languages

• Typescript - As our language of choice (mostly for static typing, stronger linting capabilities, and the potential for beautifully detailed--and completely automatically generated-- documentation). Typescript is also well supported by Next.js and React.
• Sass - For styling components (i.e. CSS on steroids). Sass, like Typescript, is also well supported by Next.js out-of-box.

Frameworks

• React - As our front-end framework.
• Next.js - To easily support SSR and other performance PWA features.

Tooling

• Lerna - To manage and re-use React components across repositories; mostly just to migrate code from this project back into Tutorbook when we get the chance.
• ESLint - For code linting to avoid common mistakes and to enforce styling. Follow these instructions to install it in the text editor of your choice (such that you won't have to wait until our pre-commit hooks fail to update your code).

Database

• Google's Firebase - For their NoSQL document-based database, Authentication, and other useful (relatively drop-in) solutions.

Development Environment

To setup a development environment for and to contribute to the COVID Tutoring Initiative website:

• Follow these instructions to install nvm (our suggested way to use Node.js) on your machine. Verify that nvm is installed by running:

$ command -v nvm

• (Optional) If you use Vim as your preferred text editor, follow these instructions on setting up Vim for editing JavaScript.
• Run the following command to install Node.js v12.16.1 (our current version):

$ nvm i 12.16.1

• (Optional) Run the following command to set Node.js v12.16.1 as your default Node.js version (useful if you have multiple Node.js versions installed and don't want to have to remember to switch to v12.16.1):

$ nvm alias default 12.16.1

• Ensure that you have recent versions of Node.js and it's package manager npm by running:

$ node -v
12.16.1
$ npm -v
6.13.4

• Clone and cd into this repository locally by running:

$ git clone https://github.com/tutorbookapp/covid-tutoring.git && cd covid-tutoring/

• Then, install of our project's dependencies with the following command:

$ npm i

• Follow the instructions included below (see "Available Scripts") to start a Next.js development server (to see your updates affect the app live):

$ npm run dev

• Message me (DM @nicholaschiang on Slack) once (not if) you get the following error (I have to give you some Firebase API keys to put in the .env file):

Error [FirebaseError]: projectId must be a string in FirebaseApp.options

• Finally, cd into your desired package (included in src/), make your changes, commit them to a branch off of develop, push it to a fork of our repository, and open a PR on GitHub.

Code Format

Tutorbook uses Prettier to enforce consistent code formatting throughout the codebase.

A pre-commit hook is used to format changed files found on commit, however it is still recommended to install the Prettier plugin in your code editor to ensure consistent code style.

Available Scripts

All of the below scripts come directly from Next.js. In the project directory, you can run:

npm run dev

Runs next dev using full-icu and with the Node.js --inspect flag on (useful for debugger; statements) which starts Next.js in development mode.

Open http://0.0.0.0:3000 to view the app in the browser (note that we use 0.0.0.0 instead of the default localhost for Intercom support. The page will hot-reload if you make edits. You will also see any lint errors in the console.

npm run build

Runs next build which builds the application for production usage.

npm run start

Runs next start which starts a Next.js production server.