blog.md

How to make a URL-shortener with Node

A simple 4 part tutorial on how to make a nice, resume friendly URL shortener.

Technologies Used (Helpful to know, not required):

• Node.js
  • Express.js
  • TailwindCSS
• MongoDB
• Alpine.js

Hello everybody! My name is Peter, and in this article, we'll be making a URL-Shortener in Node.js. Our web-app will use modern web-technologies, and it's fine if you've never heard of them. I'll walk you through everything. This is good for anyone from a beginner to an intermediate developer. Without further ado, let's start coding.

This tutorial will be split up into 4 sections.

Part 1 - Business Logic

In this section, we'll discuss the web technologies and the actual theory behind our URL-Shortener. I highly reccomend you read Part 1, but it is completely optional. If you want to dive right into the code, I reccomend you start at Part 2.

Part 2 - Building our Back-End with Express.js

Here, we will get straight to the back-end, and start implementing our business logic. We'll set up a simple Express server, and start up our MonogoDB server. Then, we'll start sending out raw HTML.

Part 3 - Sending out our HTML Front-End with TailwindCSS

In this part, we'll start creating our views in EJS. We'll also stylize them using TailwindCSS, a dynamic & simple CSS framework.

Part 4 - JavaScript with Alpine.js & Setting Up Our Click-Tracker

In the final section, we'll finish off and polish our service, by adding responsive JavaScript to our secondary views (see part 3).

As you can see, it is very simple to make a URL-Shortener. But before we do any of that, we must know how the business-logic will work. Our goal is to store all of our URLS and their respective ID's in the server, as well as which type of view they picked. We'll allow custom images and branding as well.

As we can see, we will use our server as an API to access our database, and then feed that into our EJS templates. At first, the task may seem daunting, but with further consideration, it will be easy.

Thank you for reading, and stay tuned for Part 2 - Setting Up The Server!

Thanks for reading this gist! Oh, and if you're from Medium, thanks for reading my post! A heart or anything to show appreciation would be appreciated, but it is not necessary. I hope you're having a wonderful day, and I will see you in the next post.