How I Built My First MERN Stack App in a Week
By: Martin Beck
Tags: Development, Nodejs, Mern Stack, Programming, Mongo

Overview

I’m no stranger to learning and creating on the fly, in fact, I think it’s when I learn best. I decided it was time I ventured out and used a tech stack I haven’t used before. I decided to create my first web app with the MongoDB, Express, React, Node.js (MERN) stack.

I really wanted to work with a NoSQL database like MongoDB and learn how to create RESTful APIs with Node.js, so it was the perfect fit. Bouncing between a couple of ideas to implement, I recalled a conversation I had with a friend and settled on creating a simple inventory management system. What I ended up with over the past week was a simple web application, an understanding of creating REST APIs, and an understanding of what goes into creating a full-stack application.

This article details my journey to create my first MERN stack web app. If you want to play around with my app or check it out before reading on it’s available here, it’s deployed on free tier so it may or may not be available at the time you use it. If you want to check out my Github repo containing my code it’s available here.

Table of Contents:

The Start

I was not sure what to build. Should I just do a simple order management system, tiger selling marketplace, game? It wasn’t until I recalled a conversation I had with a friend. She works in the dental industry and mentioned how in private practices they sometimes don’t have a system to track inventory doing everything by hand. An inventory management system, that’s simple enough. I figured why not take a crack at it.

I’ve made web applications with Python before so I made sure to stay away from that. I was hoping to learn something new from this side project so I started looking into developing with other tech stacks. I was also in part, inspired by my current recruiting status where I’ve seen a lot of job descriptions asking for experience with a variety of things like Angular, Node, React, and setting up REST APIs. The next thing I knew I was reading about tech stacks such as MERN, MEAN, LAMP. I decided to go with ones that used MongoDB since I’ve never worked with a NoSQL database before. The difference between MERN and MEAN was minor so it was up to a coin toss, I ended up using React for my frontend. With the idea and tech stack settled there was nothing else to do but dive in.

The Learning

To provide context I had no experience using any part of the MERN stack. I’ve only worked with Python and SQL for web apps. A quick reminder, the MERN tech stack consists of the following:

M ongoDB: Database

ongoDB: Database E xpress: Middleware

xpress: Middleware R eact.js: Frontend

eact.js: Frontend Node.js: Backend

With my lack of experience using these tools, there was only one place to start, Google. After searching for a while I ended up using these resources to help build my foundation.

These tutorials were great, allowing me to build a strong enough foundation with the MERN stack and build a web app in under a week. They also gave me a pretty solid code basis to build on as I started building my application. Looking back I wish I had found Esterling Accime’s tutorial series first before CodingTheSmartWay’s because it covers building the app and deploying. It would’ve made my deployment process easier but it really wasn’t that big of a deal.

The Building/Deploying

Building

The great thing about finishing the tutorials above was that I did have a functioning web app. While I could have simply deployed the application we built, I figured it was still worth creating my own implementation of an inventory management system. A lesson I’ve learned a long time ago was that there’s only so much learning you get from following coding tutorials. The real learning comes when you attempt to implement your own ideas and troubleshoot them, that’s when you deal with having to navigate your code, code from other people online, and learning the intricacies of the tools.

One of the first decisions I made early on was using MongoDB’s Atlas cloud platform to manage the database instead of managing my own database. It took under 5 minutes to set up and really simplified deploying my application later. The icing on the cake was that they offer a free tier version.

After reworking the code from the tutorials to set up my basic web pages. I was focused on creating an application that could at the bare minimum create, read, update, and delete items from a database. Which wasn’t hard, at least until I got into the more specific implementations of my ideas. That’s when I ran into a lot of problems. One of my ideas that sounded simple at first was my Restock/Use page. I wanted a table that allowed users to easily increase or decrease their item quantity as the company restocks or uses them. The part that gave me the most trouble was adding an input field and buttons to a table. To top it off, those buttons would use the information provided in the input field and send requests to REST APIs to modify the item quantity in the database.

Screenshot of my final Restock/Use page

It was a couple of hours of searching and asking my first question on Stack Overflow before I finally was able to figure out how to have my data represented in the table and include inputs/buttons that were able to pass information and send API requests. What was great about solving this problem was that once I figured it out, developing my Create Item and Remove Item pages were a lot simpler.

The next problem that came up was adding pagination to my tables. I knew potentially there could be more than 5–10 items in the inventory list. However, it wasn’t until I saw my tables slowly getting larger while testing out the functions of each page that I knew they could become unwieldy pretty quickly. That’s when I knew I had to include pagination for all my tables.

Screenshot of the table on Inventory List page

So began my search for how to paginate tables in React. That way only a couple of items were shown at a time instead of the whole list. The first couple of solutions I saw for pagination were node modules that I could install that allowed me to easily create tables with pagination. It worked perfectly for my inventory list page that only displayed the item name and quantity. However, I quickly found out that configuring these tables to include input fields and buttons for my other pages was not easy. I ended up finding a solution online allowing me to create a table with pagination without having to install a node module. It was a pretty simple solution where you created functions for when the previous/next buttons were clicked and indexed the data to show small snippets of the inventory list. Those two major hurdles took the majority of my time in development, otherwise, it was a simple process setting up the REST APIs, and building out the rest of the website.

Deployment

Screenshot of Heroku’s platform page

I originally was deciding between a couple of different platforms such as AWS, GCP, and Azure, but seeing as I’ve already deployed apps on those platforms. I decided to use Heroku because I’ve seen it come up a couple of times before and it was something I haven’t used yet. It’s similar to Google App Engine, a platform as a service so you only have to worry about deploying your app and not managing computing instances or load balancing. To further simplify the process Heroku even allows someone to connect to their Github so all you have to do is push your code to Github and you can deploy to Heroku from there.

Normally I’d have to deal with deploying my database online. However, due to my decision earlier to use already have my database managed online with MongoDB Atlas, it actually circumvented that whole process. All in all, using Heroku with MongoDB Atlas, simplified the deployment process so much all I had to do was change my file structure and environment variables.

Retrospective

Could this project be made better? Definitely, looking back on the project my critiques are based around designing the whole application and other things that realistically I wouldn’t have known beforehand without learning a lot more about the MERN stack. There are two major things that I would have done differently.

My first critique is regarding web application architecture. I’ve run into a problem where sometimes when I refresh on one of the pages it comes back with a server request instead of the web page. After digging around I found this question on Stack Overflow that beautifully breaks down this problem. Discussing server-side vs client-side routing. Seeing as I’m using React.js and Node.js a way to solve this problem is to create an isomorphic app. So whenever the user refreshes the page or types in a direct URL it doesn’t send a request to the server but instead is able to render the page they want.

My second critique regarding the creation of my REST APIs. As is, the APIs are pretty unsafe. Anyone is able to send a request to any of the API endpoints if they know the paths regardless of whether or not they should be. Looking back I probably would have focused more on designing my REST APIs to only respond to authorized requests such as from the web page itself.

Thank you for reading this development journal. That is all for my article showcasing my learning and creating a MERN web app. If you want to reach out to me. I’m available on LinkedIn.

🔗 References