How to Build a Full-Stack CRUD Application With React (+ Authentication) ~ Part 1

Andrea Undecimo
Jan 23 · 5 min read

Introduction

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 index.js file:

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 Topic and 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 index.js :

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!

The Startup

Get smarter at building your thing. Join The Startup’s +799K followers.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +799K followers.

Andrea Undecimo

Written by

I write on how to code in JavaScript. Follow me here for interesting guides!

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +799K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store