My First MERN Stack Application

I created this application back in 2020 as my first real Full-Stack application without following a tutorial.

While not the most stylish, I’m surprised at how well this app has held up in the past two years. It just goes to show that sometimes the basics really do work.

Let’s go through each letter of the MERN Stack and see how I was able to use each one:

MongoDB

I have a database still set up through MongoDB so the login information you use to register is still stored and used. Everything is encrypted with bcrypt and JWT so the website is very secure even still. The Schema used is very simple to keep track of the data:

Entry Schema

const EntrySchema = mongoose.Schema({
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "users",
  },
  date: {
    type: Date,
    default: Date.now,
  },
  log: {
    type: String,
    required: true,
  },
  effective: {
    type: String,
    required: true,
  },
  question: {
    type: String,
  },
});

User Schema

const UserSchema = mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
  date: {
    type: Date,
    default: Date.now,
  },
});

Like I said, very very simple. Nothing nested, just a bunch of typing.

Express.js

This was my first time really setting out to use Express.js on my own, and while it did take some getting used to, eventually I was able to really see why this framework is so powerful. The routing is so simple and easy that it has become a go-to for my other attempts at Full-Stack, and one of the most important lines of code that has still helped me even when revisiting it today is this:

// Serve static assets in production
if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));

  app.get("*", (req, res) =>
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
  );
}

As you may know, Heroku recently dropped support for their free-tier dyno which meant I had to drop my projects and go straight to my old projects to salvage them. Unfortunately a few of them were not able to make the cut because an asset I used was forked from an existing Heroku-hosted web service, however with this one I was able to quite easily hook it up with Render.com.

This line of code actually helped make this process much easier, as it essentially helps run the build commands necessary while connecting with the client during deployment. As someone with more of a front-end focus, this kind of ease is exactly what I need. That and adding:

"render-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

was genuinely all I needed to do to get this old app to see another day.

React.js (and Redux)

While this project came after taking a course on React and messing with Single Page Apps, this was my first real opportunity to utilize and customize state management with Redux. Honestly this project has been a reference point for future endeavors when it comes to Redux. I remember getting extremely frustrated at first attempting to add all the possible features to the Entries, yet eventually I was able to understand a lot more about (specifically):

Node.js

Node was pivotal in the authorization setup. Especially with encryption and deciphering JWT it was important for me to understand that JavaScript as a programming language could provide logic for something other than presenting data or solving LeetCode problems.

Being able to also test endpoints using Postman was great to actually get physical results from an API that was created all through my own code. Having other visual feedback outside of the console always helps me understand better what exactly is going on, and what the data I’m displaying actually represents.

Final Thoughts

Having to redeploy this app made me awfully nostalgic for the time I knew next to nothing about coding, but also it’s wild to see how far I’ve actually come. I would like to give this project another go someday, perhaps using a mix of Next.js, tRPC, and Prisma. I’d like to actually spruce up the CSS a bit so it’s more modern and less… well beginner-level. But all-in-all I’m still quite impressed with my past self. 🌿