Minimalistic URL Shortener with JavaScript
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 them 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.
To set up this project:
• HTML and CSS for styling the page. The website will be Shortly, or Short-ly, whatever is available. The design is super minimal, very barren feature-centric.
• Backend with NodeJS, and MongoDB. Why would I need a database? I need to store the original URL, and also create a reference to that so when my server receives a request to a particular route it can look up the reference in the DB and make a 301 request, which is known as redirection. This is the key to URL Shortener. Of course, the API will take care of all the logic, create the route, the slug, and redirect the user
• Last, it’s time for deployment. This is a crucial step in the life of a full-stack application. It is all nice and good and working fine, but production is really tough. There are a bunch of things you need to pay attention to, now your application is open to the world, and who knows how users will do with it, are they going to use it as it was meant to, or just crash the entire thing? This added complexity is what I love most about Software development, and I hope you will too.
Disclaimer: I am going to release a JavaScript Crash Course next week where I’ll go over the fundamentals and some key aspects to get started with this wonderful language. Make sure to check it out!
In addition, next week, there is going to be part 2 of this project where I will focus on the server-side, building the routes and logic for the API, the DB Schema, and also link the frontend and backend using JavaScript. Make sure not to miss a single episode.
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
1:31 Folder Structure for Full Stack Project
2:24 Markup with HTML for URL Shortener
8:02 How to style the page with CSS
34:45 Make your own design
35:33 Like & Share
