• Language: JS (Node.js) with Flow
• Framework: Express
• Client-server communication: Websockets (Socket.IO)

• Language: JSX with Flow
• Framework: React

The root folder simply houses all the config files we use for development, e.g. package.json, webpack.config.js, etc. We probably won't need to edit anything in here, unless we're installing packages or something.

Currently there isn't much in here but this will be where all our React components are stored. All the code in here will eventually be compiled and bundled into a single main.js file (see Compiled Client Code below).

Similarly, this is where all our server code will go. Our Express app (/src/server/app.js) is in this folder.

For stuff that we want to share between both the client and server. An example might be shared types/util functions.

This folder is for all the assets we want to be available on the client-side. The Express app serves everything inside the dist folder, so for example, if we had a file called file.jpg in this folder, we would be able to access it by going to http://localhost:3000/file.jpg. Currently there are two main files here: index.html (our landing page), and main.js (all our compiled React code that index.html uses).

• In the past, writing JS on the web mean either writing JS, or importing .js files, between <script> tags in HTML. This causes a lot of problems: for each third-party library we add, we need to add another <script> tag, import sizes are not optimized which can cause slow loading times, modular development is a bit harder since you might run into problems with scope collision, etc.
• Nowadays with npm, we're very used to writing client-side code in the modular manner that we write most other software projects. Webpack's job is to look at all the code we write in src/client, figure out the dependency graph, bundle our code all together into one main.js file, and optimize the bundle size.
• Every time you want to see your changes to client code, you'll need to run npm run build in terminal. Under the hood, this runs webpack and outputs a file in /dist. You can take a look at the scripts section in /package.json's for more details.

• The JS language is constantly evolving and adding new features, but browsers do not necessarily catch up as quickly. Babel is a compiler that converts new JS syntax (ES6+) into old JS syntax. It also handles non-JS syntax like React's JSX.
• We don't directly call Babel—we simply instruct Webpack to use it when bundling.

• This is a code formatting tool. Instead of manually following style guides, we can just run prettier before we commit the code, and everything will be formatted nicely.

• Flow is a static type-checker and a way to write type annotations in our code. JS (and the web in general) is notorious for everything being untyped and hard to figure out. With Flow, we can write stuff like:

type Props = {
  name: string,
};

function MainPage(props: Props): React.Node {
  const { name } = props;
  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
}

• Notice that we can declare our own custom types! This is great for React, because we no longer have to guess/remember what kind of props we're passing in.
• If you're using VSCode, there's an extension available that will tell you real-time if anything is typed incorrectly. If not, you can just run flow in the command line and it will give you any warnings/errors.
• Note: in order for the typechecker to work, we need to write // @flow at the top of all our files.

• When we're developing/iterating quickly, we don't want to be manually running all these commands every time we make a small change. Nodemon is a program that watches our project directories for changes and automatically runs the commands for us every time it detects a change.
• To use this in server development, run npm run start. Nodemon will automatically restart the webserver every time you make a change to it.
• To use this in client development, run npm run watch-client. Nodemon will run webpack and rebuild the main.js file whenever there's a change in our React code.