SuperHi FM

Picking up where we left off at the end of Chapter 2A, in this Chapter we’ll finish our wallet-style notes app. We’ll build a backend that persists data, stores it in a cloud database and exposes that data via an API. To do that, we’ll be learning about MongoDB, Node.js and Express. Then we’ll connect our frontend and backend together using custom React hooks to create a fully-fledged notes app.

Assets

https://github.com/samnixon87/notes-starter

Videos

We start the backend section of this chapter with a blank page! But where do we begin? What do we need to decide upon at this point?

Lesson 01

Where do we begin with the backend?

We start the backend section of this chapter with a blank page! But where do we begin? What do we need to decide upon at this point?

Let’s get started with Node and Express - a ubiquitous combination that you’ll often find in full stack JavaScript applications.

Lesson 02

Setting up our server using Node and Express

Let’s get started with Node and Express - a ubiquitous combination that you’ll often find in full stack JavaScript applications.

Our server files aren’t really cleanly separated and may soon get fairly bloated. One common pattern may help us here.

Lesson 03

Separating application and index files

Our server files aren’t really cleanly separated and may soon get fairly bloated. One common pattern may help us here.

Node.js leans heavily upon middleware, but what is it and how can we utilise it to quickly create complex experiences?

Lesson 04

Using Middleware

Node.js leans heavily upon middleware, but what is it and how can we utilise it to quickly create complex experiences?

We need a database, but what kind? SQL? NoSQL? And what’s the difference between the two?

Lesson 05

Picking a database: aka SQL vs NoSQL

We need a database, but what kind? SQL? NoSQL? And what’s the difference between the two?

Lesson 06

Setting up MongoDB Atlas

Sign up for a MongoDB Atlas account

Lesson 07

Using a database client

One way to view data in our database is by using a database client. These can be fairly divisive tools (a lot of people will swear to you that they shouldn’t be used) but they can also be extremely helpful at visualising the structure and contents of a database.

We’ve connected to our database, but how do we pull that connection into our application to actually access the data?

Lesson 08

Using MongoDB in our application

We’ve connected to our database, but how do we pull that connection into our application to actually access the data?

## Create a .env file in your backend folder

Lesson 09

Safely storing environment variables in .env and .gitignore

Create a .env file in your backend folder

What is the Model-View-Controller pattern and why might it be useful for us to adopt for our application?

Lesson 10

The MVC Pattern

What is the Model-View-Controller pattern and why might it be useful for us to adopt for our application?

We know we need to articulate our data model in code, but how do we actually do it?

Lesson 11

Establishing our models

We know we need to articulate our data model in code, but how do we actually do it?

Time for controllers: the meat of our backend.

Lesson 12

Establishing our Folder controller

Time for controllers: the meat of our backend.

Now that we’ve seen an example of how to build a full controller, our next _Challenge_ is to build one solo. The Notes controller will be very similar to the Folders controller, but there will be some tweaks and wrinkles.

Lesson 13

Challenge: Establishing our Notes controller

Now that we’ve seen an example of how to build a full controller, our next Challenge is to build one solo. The Notes controller will be very similar to the Folders controller, but there will be some tweaks and wrinkles.

A Walkthrough of our previous Challenge so that we’re all on the same page.

Lesson 14

Walkthrough: Establishing our Notes controller

A Walkthrough of our previous Challenge so that we’re all on the same page.

Now that we have our controllers, lets expose access to them to the outside world via routes. These routes will form the backbone of our very own API.

Lesson 15

Creating our API using routes

Now that we have our controllers, lets expose access to them to the outside world via routes. These routes will form the backbone of our very own API.

Lesson 16

Testing our API with Postman in VSCode

Hooks save you a lot of time when writing and re-writing repetitive functions. In this lesson we’ll take a look at you can write our own custom hooks to augment the base ones that come built-in to React.js and allow us to fetch data neatly.

Lesson 17

Writing a custom hook to access our API

Hooks save you a lot of time when writing and re-writing repetitive functions. In this lesson we’ll take a look at you can write our own custom hooks to augment the base ones that come built-in to React.js and allow us to fetch data neatly.

Now that we’ve got our heads around custom hooks, it’s time for another _Challenge._ This time we’ll be extending our useApi hook to take into account Notes functions.

Lesson 18

Challenge: Writing the notes functions in the useApi hook

Now that we’ve got our heads around custom hooks, it’s time for another Challenge. This time we’ll be extending our useApi hook to take into account Notes functions.

Lesson 19

Walkthrough: Writing the notes functions in the useApi hook

A Walkthrough of our previous Challenge so that we’re all on the same page.

Time to use our custom hook. We’ll use useApi to connect our work from Chapter 2A and this chapter and finish our application.

Lesson 20

Connecting the backend and frontend using a custom hook

Time to use our custom hook. We’ll use useApi to connect our work from Chapter 2A and this chapter and finish our application.

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!