Build a URL Shortener with JavaScript - Server Side
In this video I will build a simple URL shortener using HTML, CSS and JavaScript. As well as, NodeJS, MongoDB and Express for the entire server-side. URL Shorteners are quite interesting because the logic behind it is not particularly difficult and yet they can teach a great deal in terms of HTTP requests, redirection and dynamic URLs. Many companies now use URL Shortener, either proprietary app like Twitter or YouTube or even well-known websites like bit.ly.com
The project is going to be super fun and in the end, I am going to deploy the final result using a couple of technologies that are super modern and also free: Heroku and Netlify.
It is always nice being a developer and being able to build your own application: Why should I use website X to do that when I can code it myself? URL Shorteners are beginner-friendly projects although they can represent a bigger challenge than you think.
In this episode, I will focus exclusively on the server-side building the routes, the API and setting the database.
The fundamental logic for URL Shortener has 2 key points:
• Redirection: The Shorten URL is composed by the root path of a website, it could be bit-ly.com, and then a code or set of characters which is called a slug. That slug is used to retrieve the original URL in the database and redirect the client.
• Dynamic URLs: This is a fundamental concept in web development. For instance, if you wanted to build an e-commerce website with 100 products and show detailed views about them, virtually you must create 100 web pages, and 100 routes. This is not scalable and it’s way too much work. Instead, you can introduce certain parameters in the URL itself that you can use in your API, or on the server taking the request, as variables. These variables will be used to control the logic flow of the app, and the content on the webpage will depend on the result of this logic. A simple example could be providing the UUID of a product as a parameter in the URL, and when the endpoint receives a request, it will do a search based on that UUID and return the data specific about that product. This approach is super-scalable because I could potentially have as many products as I want in my e-store, the logic would save me a lot of code.
Disclaimer: I am going to release a JavaScript Crash Course this week where I’ll go over the fundamentals and some key elements to get started with this wonderful language. Make sure to check it out!
In addition, next week, there is going to be part 3 of this project where I will focus on the frontend JavaScript and finally deploying the website. Make sure not to miss it.
One last thing. There is a small bug in the code in this video and I’d really like you to find and let me know in the comments below. It’s nothing super-obvious nor serious, but it’s there and it’s risky. Potentially, if not controlled it could break the web app, and since I want to deploy it, this must be fixed. Debugging is a core skill for any developer. Find a problem and solve the issue, it doesn’t get any more tech than that.
Thank you very much for watching I hope to see you at the next one,
BeGeos
Social:
Twitter: / begeosdev
GitHub: https://github.com/BeGeos
Timestamps:
00:00 URL Shortener with JS
00:55 How do URL Shorteners work?
2:12 Find the Bug
2:50 Develop the app in NodeJS
11:39 Handling errors and Not Found in Express
17:05 Create a MongoDB Model with Mongoose
23:56 Develop URL Shortener logic
30:03 Test APIs with Postman
32:18 Save Record to MongoDB
35:08 Best practices when dealing with URLs with Axios
42:47 Short the first URL
43:21 Dynamic URLs and Redirect route with Express
48:24 CORS Headers
49:31 Like & Share
