How to Build a Full-Stack CRUD Application With React (+ Authentication) ~ Part 1
Until four months ago, I had never written a line of code. A few days ago, I built my first application using React. Here is a little demo showing what I have done (sorry for the bad video…)
During my process of learning, I found a lot of material that helped me building my app, but none of it was comprehensive enough. In this series of articles I want to teach you how YOU can also build a CRUD (Create-Read-Update-Delete) application from back-end to front-end, how to connect both parts and how to add some basic authentication. I will use the app I have created as the example.
Building an app it’s a great learning experience (and a lot of fun), but it can be daunting too. I hope this will be useful for you. Let’s dive in!
Starting off 🚀
First of all, make sure you have NodeJS installed on your machine. If you’re on Mac, you can install by running:
brew install node
Otherwise, just download it from their website (at https://nodejs.org/en/download/) .
I also suggest to also install nodemon globally, by running:
npm install -g nodemon
This will help you run your server and make it update every time you refresh your page or you save your files.
Now that you made sure to have the global dependencies, we are ready to go. In your project folder, create a folder and name it server. We will soon start to build our back-end in there. Inside of the folder, run
npm init -y .
This will initialize the project. I prefer making an npm folder for the server and one for the front-end, as it allows me to keep things tidy and clean 🧹.
After that, we only have to install the needed dependencies by running:
npm i koa koa-bodyparser @koa/cors koa-router mongoose
Enough for the housekeeping for now, let’s dive into the code!!
Building your server ⚒️
Every application needs a back-end. This is where all the data that flows through your app will be managed. We will start by building a simple server, which we will use to serve our app with all the necessary data. I have used KoaJs to build my server. I prefer starting to build my app from the back-end as it allows me to debug things much easier (through the help of Postman, an amazing friend that we will learn to know very soon!). Let’s create an
Here is where our server will be. Think of a server as a post office. You enter in, and you need to get your parcel (i.e. the data in your server). But, who do you go to? To the reception, of course! In our back-end, this will be the router. Here is where we will define the endpoints and the HTTP methods that will allow us to serve our application later. The job of the router is to direct you towards the place where your parcel could be (if you give him the right path!). For now, let’s define a simple router with a GET, POST, DELETE and PUT method:
But wait a second, the receptionist cannot be serving orders and picking up parcels at the same time. He needs muscles, people that work for him! These are our controllers, these strange files that we are importing from
controllers/topics.controllers ?! Controllers will make sure to deliver the content that are linked to the route that you are asking for. For example, if you ask for the route
/forum/allTopics , the controller
getAllTopics will be called and it will be prompted to fetch your parcel!
Now that we understand a little bit more how controllers work, let’s’ write some:
First of all, not how all the functions are asynchronous. This is because they will make requests to the database (which we will get to very soon). These operations might take a while, so it’s better to wait until they are done before we can carry on doing other tasks. I also suggest to always wrap these functions in a
try-catch block, which will catch any potential bugs that might happen.
Second, you might have noticed that I have imported
Comment at the top. They are what is called a model. As I said before, controllers will interact with your database, the place where data is actually stored. To do so, they need a “roadmap”, a guide on how to search for the correct parcel in the database. Models are there for this. All they do is model the way I want my data to look in my database. In this specific case, I am using a MongoDB database, and Mongoose to query the data in the database.
Let’s see how to write a simple model. Let’s start with modelling Topic. We want all our topics (in their simple form), to have a title, some content and the date in which they were published. Using Mongoose, this will look something like this:
Finally, let’s build our database connection. Make sure you have installed the Community Edition of MongoDB on your computer (to do so, read here https://docs.mongodb.com/manual/installation/), and to create your first database. After that,n the same folder in which you have created the
topic.model.js, create a new file
That is it! If you now run
npx nodemon on your terminal, you’ll see that your server is up and running. Yaaay! 🥳
To test that our implementation is working fine, let’s use Postman (https://www.postman.com/). Postman let’s you simulate API calls so that you can test your back-end easily, without the need to have a front-end first. Let’s try to post a topic. I made a short video showing how to do that:
Great, we just created our first post! To see that it has actually been uploaded to the database, you can simply make a request to
/forum/allTopics , which will return all the topics in your database.
That was it! You have crated from scratch a fully functioning server, with different routes, controllers to serve you the data and a database where to store all the data coming from a future user! Super exciting! 😎
In the next part, I will show yo how to build the front-end, using React! 👀
You can find me on Twitter at https://twitter.com/andrea_undecimo!