1.1.1. How to setup React

We’ll use Vite to setup React. It’s a new build tool that is much faster, easier to user, and flexible than Create React App.

1. Open your terminal and run the following command:

npm init vite@latest my-app -- --template react

2. Open your terminal and run the following commands:

cd my-app
npm install
npm run dev

3. Open your browser and go to http://localhost:3000/. This should show a basic react webpage.

1.2.3. Yarn

Yarn is a package manager for JavaScript. It is used to install, update, and remove JavaScript packages. It is similar to NPM.

1.2.4. NPM

NPM is a package manager for JavaScript. It is used to install, update, and remove JavaScript packages. It is similar to Yarn.

Both Yarn and NPM are package managers for JavaScript. They both retrieve packages from the same registry. Yarn is a little faster than NPM. Yarn has a few extra features that NPM doesn’t have. NPM is a little more popular than Yarn.

Choose NPM for now, use Yarn when NPM gives you problems.

1.1.1. Windows

1. Download the Windows installer from the Nodes.js® web site.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).

1.1.2. Mac

1. Download the Macintosh installer from the Nodes.js® web site.
2. Run the installer (the .pkg file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the CONTINUE button a bunch of times and accept the default installation settings).

1.1.3. Linux

1. Open your terminal and run the following command:

sudo apt-get install nodejs

If that doesn’t work, install a better Distro or Google it.

1.2.1. Browser JavaScript

Browser JavaScript is very limited. It can only run in the browser and can only access the browser’s APIs. It can’t access the file system, it can’t access the network, it can’t access the operating system, etc.

1.2.2. Node JS

Node JS is a JavaScript runtime with a lot more capabilities. It can access the file system, it can access the network, it can access the operating system, etc. It can also run outside of the browser. This means that you can run JavaScript on your computer without opening a browser.

Browser JavaScript and Node JS are both JavaScript, but they are not the same thing. They are two different environments (runtimes) with different capabilities. Browser JavaScript is used to make websites. Node JS is used to make servers, games, tools, etc that run on your computer directly.

2.1.1. What is a web framework?

A web framework is a collection of libraries and tools that make it easier to build web applications and APIs. It provides a lot of functionality out of the box so that you don’t have to write it yourself. This includes things like routing, templating, authentication, etc.

2.1.2. Why use a web framework?

Node JS has raw HTTP APIs that you can use to build web applications and APIs. However, these APIs are very low level. They are not very easy to use and they don’t provide a lot of functionality out of the box. This means that you have to write a lot of code yourself. This is why we use a web framework. It provides a lot of functionality out of the box so that you don’t have to write it yourself.

2.1.3. What is an API?

An API is an Application Programming Interface. It is a set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other service.

Ex: The DOM API is a set of functions and procedures that allow the creation of applications which access the features or data of the DOM.

2.1.4. What is a web API?

A web API is an API that is accessed over the web. It is a set of functions and procedures that allow the creation of web applications which access the features or data of an operating system, application, or other service.

Ex: A web API that allows you to access the features or data of a database.

2.1.5. What is colocating?

Colocating is when your Frontend and Backend code are in the same directory. This is convenient because related code is in the same place. It also makes it easier to deploy your app because you only have to deploy one directory.

2.1.6. What is a route?

A route is a section of Express JS code that handles a specific HTTP request. It is a section of Express JS code that handles a specific HTTP request.

Ex: The / route handles the GET request to /.

2.1.5. Can I use my terminal to make HTTP requests?

Yes. You can use the curl command to make HTTP requests from your terminal.

curl http://localhost:3000/

Response:

Hello world

3.1.1. What is a database?

Bad data causes businesses to fail, lose customers, and lose money. A database is a collection of data that is organized so that it can be easily accessed, managed, and updated.

3.1.2. What is a relational database?

A relational database is a database that stores data in tables. A table is a collection of related data entries and it consists of columns and rows.

Relations are established between tables by matching data in columns. This is done by creating a column in one table that contains data that exists in another table. This column is called a foreign key.

3.1.3. Why not use a NoSQL database?

First, always bet on SQL. It has been here since the 70s and will be here for much longer. As will the relational model. It is a proven technology that has been used by millions of developers for decades.

Look into CODASYL DBTG. It was a Network Database that was also around when the first Relational Model was proposed. It used XML instead of JSON. It was also very bad because to query data you had to handle a cursor yourself in code. It was replaced by Relational Databases because they were much easier to use. I belive the same thing will happen to NoSQL databases.

Second, NoSQL databases have no schema. This means that you can store any data in any format in any table. This makes it very hard to query the data. It also makes it very hard to maintain the data. This is why NoSQL databases are not used in production.

Yes, Mongoose does exist. But you must realise that breaks sharding, so your webscale app will not be webscale.

3.2.1. Windows

1. Download the Windows installer from the MySQL Community Downloads page.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).

3.2.2. Mac

1. Download the Macintosh installer from the MySQL Community Downloads page.
2. Run the installer (the .pkg file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the CONTINUE button a bunch of times and accept the default installation settings).

3.2.3. Linux

1. Open your terminal and run the following command:

sudo apt-get install mysql-server

If that doesn’t work, install a better Distro or Google it.

4.1.1. What is the difference between Authentication and Authorization?

Think of Authentication as a keycard to a building. It verifies who you are. Think of Authorization as the permissions that you have in the building. It’s the act of stopping you from going into rooms that you don’t have access to.

4.1.2. What is a middleware?

A middleware is a function that runs before your route handler. It can be used to modify the request and response objects. It can also be used to run code before your route handler.

4.1.3. What is a session?

Sessions are used to store data about the user. The session lives on the server and is identified by a session ID. The session ID is stored in a cookie on the client. This cookie is sent to the server on every request. This allows the server to identify the user.

Cookies are a way to store data on the client. Express-session uses cookies to store the session ID on the client. This allows the server to identify the user on every request. We look up the session ID in the database to get the user’s ID. We can then use this to get the user’s ID on every request.

Cookies and Sessions work together to store data about the user. Cookies are used to store data on the client. Sessions are used to store data on the server.

4.1.4. Why do we need to connect Express-session to MySQL?

Express-session stores the session data in memory by default. This means that the session data is lost when the server restarts, logging the user out. So every change you make to the server’s code will log all users out which is very annoying for development.

We can fix this by connecting Express-session to MySQL. This allows us to store the session data in MySQL. The data will be stored in a table called sessions. This means that the session data will not be lost when the server restarts.

4.1.5. What is a POST request?

A POST request is an HTTP request that is used to send data to the server. It’s distinct from a GET request which is used to get data from the server. GET doesn’t have a body, POST does which is why it’s used to send data to the server.

4.1.6. What is a 400 status code?

A 400 status code is an HTTP status code that means that the request was bad. It’s distinct from a 200 status code which means that the request was good.

See HTTP Status Codes for more information. Or see HTTP.cat for a list of HTTP status codes and a laugh.

4.1.7. What is a JSON response?

JSON: JavaScript Object Notation

JSON is a lightweight data-interchange format. It is used to send data to the client. It is also used to send data to the server and can be used to store data in files.

A JSON response is an HTTP response that is used to send arbitrary JSON data to the client. It’s distinct from a HTML response which is used to send Webpages to the client.

<html>
  <h1>Hello World</h1>
</html>

{
  "message": "Hello World"
}

4.1.8. Step-by-step notes on login and register

1. The user enters their email and password into the login form and clicks the login button.

email:
password:

2. The browser sends a POST request to /login with the email and password in the body.

POST /login HTTP/1.1
Host: localhost:3000
Content-Type: application/json

{
  "email": "john@doe.com",
  "password": "password"
}

3. The server receives the request and looks up the user in the database.

SELECT * FROM users WHERE email = "john@doe.com";

4. The server checks if the user exists.

if (!user) {
  return res.status(400).json({ message: "User not found" });
}

5. The server checks if the password is correct.

if (user.password !== password) {
  return res.status(400).json({ message: "Incorrect password" });
}

6. The server sets the user in the session.

req.session.user = user;

7. The server sends a JSON response to the client.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Logged in"
}

4.1.9. How to login using ReactJS

1. Open your App.js file and add the following code:

import React, { useState } from "react";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = async (event) =>
    await fetch("http://localhost:3000/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

  return (
    <>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleSubmit}>Login</button>
    </>
  );
}

4.2.1. What is a hash?

A hash is a one-way function that converts a password into a hash. One-way meaning that you can’t convert a hash back into a password.

You can check if a password matches a hash by hashing the password and comparing it to the hash. If they match, the password is correct. If they don’t match, the password is incorrect.

You should never log, or store a password. It should always be sent across the network in plain text then immediately converted to a hash.

4.2.2. What is a salt?

A salt is a random string that is added to a password before it is hashed. This makes it harder to crack the password. It also makes it harder to crack multiple passwords at once.

Without a salt, two users with the same password will have the same hash. This means that if you crack one password, you crack all of them. With a salt, two users with the same password will have different hashes. This means that if you crack one password, you don’t crack all of them.

4.3.1. Step-by-step notes on hashing and comparing passwords

1. The user enters their password into the login form and clicks the login button.

password:

2. The browser sends a POST request to /login with the password in the body.

POST /login HTTP/1.1
Host: localhost:3000
Content-Type: application/json

{
  "password": "password"
}

3. The server receives the request and looks up the user in the database.

SELECT * FROM users WHERE email = "john@doe.com";

4. The server checks if the user exists.

if (!user) {
  return res.status(400).json({ message: "User not found" });
}

5. The server compares the password to the hash.

const match = await bcrypt.compare(password, hash);

if (!match) {
  return res.status(400).json({ message: "Incorrect password" });
}

6. The server sets the user in the session.

req.session.user = user;

7. The server sends a JSON response to the client.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Logged in"
}

4.4.1. What is a foreign key?

A foreign key is a column in a table that references a column in another table. It stops us from adding data to the table that doesn’t exist in the other table. It also allows us to join the tables together to get data from both tables. You can also use it to delete data from both tables at once.

4.4.2. What is a join?

A join is a way to combine data from two tables. It is used to get data from both tables at once. It is also used to get data from one table that references data in another table.

4.4.3. What is a cascade?

A cascade is a way to delete data from multiple tables at once. It is used to delete data from a table that references data in another table.

When you delete data from users like so:

DELETE FROM users WHERE id = 1;

You also want to delete data from todos like so:

DELETE FROM todos WHERE user_id = 1;

But you don’t want to do this manually. You want to do this automatically. This is where a cascade comes in. It allows you to delete data from multiple tables at once.

You can do this with a cascade like so:

FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE

So when you delete data from users like so:

DELETE FROM users WHERE id = 1;

It will also delete data from todos without you having to do the second query.

4.4.4. What is a 401 status code?

A 401 status code is an HTTP status code that means that the user is not logged in. It’s distinct from a 200 status code which means that the user is logged in.

See HTTP Status Codes for more information. Or see HTTP.cat for a list of HTTP status codes and a laugh.

4.4.5. Step-by-step notes on creating a todo

1. The user enters their title and body into the create todo form and clicks the create todo button.

title:
body:

2. The browser sends a POST request to /todos with the title and body in the body.

POST /todo HTTP/1.1
Host: localhost:3000
Content-Type: application/json

{
  "title": "Hello world",
  "body": "This is my first todo"
}

3. The server receives the request and checks if the user is logged in.

if (!req.session.user) {
  return res.status(401).json({ message: "Unauthorized" });
}

4. The server creates the todo.

INSERT INTO todos (title, body, user_id) VALUES ("Hello world", "This is my first todo", 1);

5. The server sends a JSON response to the client.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Created todo"
}

5.1.1. What is a software design pattern?

A software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is a general, reusable solution to a commonly occurring problem within a given context in software design.

6.1.1. What is the cloud?

The cloud is a network of servers that are used to store data and run applications. It is a network of servers that are used to store data and run applications.

6.1.2. Installing Docker

Windows

1. Download the Windows installer from the Docker Desktop for Windows page.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).

Mac

1. Download the Macintosh installer from the Docker Desktop for Mac page.
2. Run the installer (the .dmg file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the CONTINUE button a bunch of times and accept the default installation settings).

6.1.3. Installing the Fly CLI

Download the installer from the Fly CLI page.