A URL Shortener With Node.js, Express, and MongoDB inspired by Web Dev Simplified.
- Video link- https://youtu.be/SLpUKAGnm-g
- Github link- https://github.com/WebDevSimplified/url-shortener
In this project, we create a simple URL shortener using Node.js, Express, MongoDB, and EJS. We use the shortid module to generate unique identifiers for each URL and store them in a MongoDB database. We also keep track of the number of clicks for each shortened URL and display them in a table. We use EJS to render the HTML view and Bootstrap to style the user interface. We also implement a delete function to remove unwanted URLs from the database. Our URL shortener is a simple but functional web application that demonstrates the basic concepts of web development using Node.js and MongoDB.
Some features are as follows:
- URL shortening: The application allows users to enter long URLs and generate short, easy-to-remember URLs.
- URL redirection: The short URLs generated by the application can be used to redirect users to the original long URLs.
- Click tracking: The application tracks the number of clicks on each short URL and displays it to the user.
- URL deletion: The application allows users to delete short URLs that are no longer needed.
- Database storage: The application uses MongoDB to store the full URLs, short URLs, and click counts of each URL.
Like all projects, this project has its advantages and disadvantages. It’s important to get a good handle on the pros and cons so you can be informed when making your strategic decisions.
- Our application is simple and easy to use. It has a minimal and intuitive user interface that allows the user to enter, view, and delete URLs.
- Our application is fast and efficient. It can generate and store URLs in a matter of seconds, and redirect the user to the original URL without any delay.
- Our application is scalable and flexible. It can handle any number of URLs and clicks, and it can be easily modified or extended with new features or functionalities.
- Provides a simple and easy-to-use web interface to shorten URLs.
- Allows users to keep track of the number of clicks on their shortened URLs.
- Uses a reliable and widely used database system (MongoDB) for storing the URLs and their associated data.
- Uses a popular and well-supported web development framework (Express) for creating the application.
- The code is modular and organized, making it easy to maintain and scale.
- Our application is not secure or reliable. It does not validate or sanitize the user input, nor does it encrypt or hash the URLs in the database. It also does not handle any errors or exceptions that may occur during the execution.
- Our application is not user-friendly or accessible. It does not provide any feedback or confirmation to the user when they perform an action, nor does it support any accessibility features such as keyboard navigation or screen readers.
- Our application is not original or innovative. It does not offer any unique or distinctive features that differentiate it from other existing URL shortener services. It also does not have any branding or identity that attracts or retains the user’s attention.
- The code only supports shortening URLs and does not provide any other features or functionalities.
- The application runs on a single server, which can limit scalability and increase downtime if the server goes down.
- The code does not have any security features implemented, such as authentication or input validation, which can make it vulnerable to attacks such as SQL injection or cross-site scripting (XSS).
- The application relies on third-party libraries, which can introduce potential vulnerabilities or compatibility issues if not kept up-to-date.
- Existing URL shortener services may have limited storage capacity or bandwidth, which may affect their performance or availability. They may also impose restrictions on the number or length of URLs that can be shortened or stored.
- Existing URL shortener services may have privacy or security issues, as they may collect or share the user’s data or browsing history. They may also expose the user to malicious or harmful URLs that may contain viruses, malware, or phishing scams.
- Existing URL shortener services may have usability or compatibility issues, as they may not support all types of URLs or platforms. They may also have inconsistent or confusing user interfaces that may frustrate or confuse the user.
- Existing URL shortening techniques or methods often rely on a centralized service to store and redirect URLs, which can be a single point of failure and raise concerns about privacy and security.
- The generated short URLs can be easily guessed or brute-forced, leading to potential security vulnerabilities.
- Some existing techniques may not be scalable or efficient enough to handle a large volume of requests, especially in the case of high-traffic websites.
These are the architectural designs of our application which will give a basic understanding of workings by our application. Some of the designs are described in a summarized way by which you can understand the structure.
The application consists of three main components: the client, the server, and the database.
- The client is the web browser that interacts with the user and displays the web page. It sends requests to the server and receives responses from it. It also handles the user input and output, such as entering, viewing, and deleting URLs.
- The server is the Node.js application that runs on a local host and listens to a specific port. It handles the requests from the client and performs the logic and operations of the application. It also communicates with the database and sends responses to the client. It uses Express as the web framework and EJS as the templating engine.
- The database is the MongoDB database that runs on a local host and stores the data of the application. It contains a collection of documents that represent the URLs, with their full, short, and clicks fields. It uses mongoose as the object data modeling (ODM) library.
The application follows a request-response cycle, as shown in the following diagram:
The user inputs the full URL into the input field on the index page. When the form is submitted, the full URL is sent to the server via a POST request to the "/shorturls" endpoint. The server then creates a new "urls" entity with the full URL and a generated shortened URL. The shortened URL is then displayed on the index page along with the full URL and the number of clicks.
When a user clicks on the shortened URL, a GET request is sent to the server with the shortened URL as a parameter. The server then looks up the "urls" entity with the matching shortened URL and redirects the user to the full URL.
When a user clicks the "Delete" button next to a URL on the index page, a DELETE request is sent to the server with the URL's ID as a parameter. The server then looks up the "urls" entity with the matching ID and deletes it from the database.
For this application we have used MongoDB Database which is basically a NO-SQL based database. And it is very easy to use for a beginner start-up and also very easy to manage. The database contains one collection called urls, which stores the documents that represent the URLs. Each document has the following fields:
- full: a string that contains the full URL entered by the user. It is required and unique.
- short: a string that contains the short URL generated by the application. It is required and unique. It has a default value of shortId.generate(), which calls the shortid module to create a random and non-sequential identifier.
- clicks: a number that contains the number of clicks for the URL. It is required and has a default value of 0. We have one entity, "urls," which has three attributes, "full," "short," and "clicks." The "full" attribute represents the full URL, while the "short" attribute represents the shortened URL, and the "clicks" attribute represents the number of clicks the shortened URL has received.
We have 1 table (collection) for our application are as follows:
- urls [shown below]
- Download and Install NodeJS for development purpose. Download Link: https://nodejs.org/en/download/
- Download and Install VSCode for production/coding (you can use any text-editor). Download Link: https://code.visualstudio.com/download
- Download and Install MongoDB Compass for database purpose. Download Link: https://www.mongodb.com/try/download/compass
Once you have installed MongoDB Compass, you can connect to your MongoDB host by either providing your connection string or specifying advanced connection options. Create a connection string. For that, you’ll need to enter the same URI as the URI entered in code in order to connect to the database. For our use case the URI would be mongodb://localhost:27017 and after that click the connect button.
- Download and Configure Git-Bash in your system.
- Now we have to open VSCode and select file -> open folder -> URL-SHORTENER.
- And then we have to select that newly created directory.
- Now we have to open a new terminal in VSCode. After opening that new terminal, we have to run some simple commands in it!
- Command to run the web application by running this command. npm start.
This is a section where the working and the final result for the application is written below. The exact details on how to use this application from the perspective of the user is given. Client Server Architecture is a computing model in which the server hosts, delivers and manages most of the resources and services to be consumed by the client. This type of architecture has one or more client computers connected to a central server over a network or internet connection. This system shares computing resources. Client/server architecture is also known as a networking computing model or client/server network because all the requests and services are delivered over a network.
User inputs the full URL into the input field URL on the index page http://localhost:5000/. When the form is submitted by clicking the Shrink button, the full URL is sent to the server via a POST request to the "/shorturls" endpoint. The server then creates a new "urls" entity with the full URL and a generated shortened URL. The shortened URL is then displayed on the index page along with the full URL and the number of clicks in table format.
Index Page
Entering a URL to be Shortened
Short URL gets created
When a user clicks on the shortened URL, a GET request is sent to the server with the shortened URL as a parameter. The server then looks up the "urls" entity in the database with the matching shortened URL and redirects the user to the full URL and increases the number of clicks.
Clicking on the Short URL
Redirecting clients from Short URL to Full URL
Number of Clicks gets updated in the Index Page
When a user clicks the "Delete" button next to a URL on the index page, a DELETE request is sent to the server with the URL's ID as a parameter. The server then looks up the "urls" entity with the matching ID and deletes it from the database.
Clicking on the Delete button to delete the short URL
After deletion the Index Page
In this project, we have created a simple URL shortener using Node.js, Express, MongoDB and Mongoose. We have used shortid to generate unique short URLs and EJS to render the front-end. We have also implemented basic CRUD operations for the URL model and handled redirection and error cases. This project demonstrates how to use web development technologies to create a useful and user-friendly application that can shorten long URLs and track their clicks.
Overall, the code provides a good starting point for building a URL shortener web application and can be easily extended and customized to meet specific requirements.