Frontend Brainstorming

Getting Started

You can play with the frontend by

  1. cloning the rootski repo, and cd-ing into it.
  2. running make start-backend
  3. cloning the large data files with Git LFS (install git-lfs, then run git lfs install in the rootski repo, the run git pull origin master . Git LFS makes permissions weird, so you may finding yourself needing to use sudo for basic git commands.
  4. Seeding the database that you started in step (2) with the data files you pulled in step (3) with make seed-dev-db
  5. and (in another terminal) cd rootski_frontend && npm install && npm run start. (You'll need NodeJS, docker, and docker-compose installed for this to work).

Frontend Stack

React (with TypeScript)

The project was created using npx create-react-app --template=typescript

People talk about "exporting" your React app out of the create-react-app framework so that you can have more control over how it is configured (changing Linting, TypeScript rules, the Webpack settings, and several other things).

I personally don't mind the opinionated set of defaults that come with create-react-app. Eventually, we could export it if the majority of frontend contributors had a strong opinion about it, but for now, I think the defaults make it easy for us.

For learning React, I highly recommend this course:

Modern React with Redux Training Course

I took this course as well as the same author's ReactNative course when I used to think Rootski would be a mobile app. I'd recommend any course this guy does.

To learn TypeScript, you really just need to write some. This video is a decent introduction to it:

TypeScript Tutorial - TypeScript for React - Learn TypeScript [2020]

I guarantee that you will love TypeScript if you haven't used it before (or some other static type tool for JavaScript). As a newcomer to the frontend portion of Rootski, TypeScript is going to give you a ton of autocompletion in your editor as well as good documentation for all the various types used throughout the codebase.

Redux