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.
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.
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?
We need a database, but what kind? SQL? NoSQL? And what’s the difference between the two?
Sign up for a MongoDB Atlas account
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?
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?
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.
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.
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.
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.
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.
Private notes
A place for you to post notes about anything on this page. Only you can view your notes.