DEV Community

dhamolahedonist
dhamolahedonist

Posted on

Short URL generator built with Express, Nodejs and TypeScript.

The shortUrl application was developed using Node.js, and it was designed to produce a short url from a given url as well as a barcode. Before using this feature, a user must first register and then log in.

Prerequisites
Before starting, please ensure that you have Node.js and npm installed as prerequisites. If you don't have them already, you can download and install them from the official Node.js website: https://nodejs.org.

In addition to Node.js and npm, this project also utilizes MongoDB as the database and Render for deployment. If you need detailed instructions on how to use these tools, please refer to their respective documentation.

Please note that this project was developed using TypeScript, so familiarity with TypeScript would be beneficial for understanding and working with the codebase.

Image description

Package and Tools

This documentation provides an overview of the packages and tools used in the project, along with their functionalities and installation instructions.

MongoDB:
Description: MongoDB is a popular NoSQL database used for storing and retrieving data.
Installation: Visit the official MongoDB website (https://www.mongodb.com) to download and install MongoDB according to your operating system. Follow the installation instructions provided.

EJS (Embedded JavaScript):

Description: EJS is a simple templating language that allows dynamic rendering of HTML templates.
Installation: EJS is a Node.js package and can be installed via npm. Open your terminal and run the following command:

Image description

Passport:

Description: Passport is a middleware for Node.js that provides authentication functionality.
Installation: Passport can be installed via npm. Open your terminal and run the following command:

Image description

QRCode:

Description: QRCode is a package that allows generating QR codes from text or URLs.
Installation: QRCode can be installed via npm. Open your terminal and run the following command:

Image description

Selenium WebDriver (for testing):

Description: Selenium WebDriver is a popular tool for automating web browsers and performing automated testing.
Installation: Selenium WebDriver requires additional setup. Visit the Selenium WebDriver documentation (https://www.selenium.dev/documentation/en/webdriver/) to download and install the WebDriver suitable for your preferred browser.

shortId generator:

Description: shortId is a package that generates short, unique, and URL-friendly IDs.
Installation: shortId can be installed via npm. Open your terminal and run the following command:

Image description

Express:

Description: Express is a fast and minimalist web application framework for Node.js.
Installation: Express can be installed via npm. Open your terminal and run the following command:

Image description

bcrypt:

Description: bcrypt is a password hashing library used to securely store user passwords.
Installation: bcrypt can be installed via npm. Open your terminal and run the following command:

Image description

Rate-limit:

Description: Rate-limit is a middleware that limits the number of requests a user can make within a certain time frame.
Installation: Rate-limit can be installed via npm. Open your terminal and run the following command:

Image description
Please note that the above installation commands assume you have npm and Node.js already installed. Make sure to run the commands from the root directory of your project.

It's important to consult the official documentation for each package and tool for detailed usage instructions, configuration options, and API references.

Refer to the readme file to set up the development environment
https://github.com/dhamolahedonist/short_url-generator/blob/main/README.md

Folder Structure

Folder: config

Files:
ensureAuthenticated.ts: This file defines the ensureAuthenticated middleware function that checks if a user is authenticated before allowing access to a protected resource. If the user is not authenticated, it flashes an error message and redirects to the login page.
Dependencies: The middleware uses the express library.

Files:
connectDB.ts: This file establishes a connection to the MongoDB database using the Mongoose library. It reads the MongoDB URI from the environment variables using the dotenv package.
Dependencies: The configuration file uses the mongoose and dotenv libraries.

Files:
configurePassport.ts: This file configures the passport authentication strategy using the passport-local strategy. It defines the local strategy for username-password authentication and sets up serialization and deserialization of user objects. It uses the bcrypt library for password hashing and the User model for user-related operations.
Dependencies: The service file uses the passport, mongoose, bcrypt, and User model.

Folder: controllers

File: shortUrlController.ts

This file contains controller functions related to URL shortening, QR code generation, and link management. It includes functions for rendering short URLs, generating short URLs, retrieving short URLs, generating QR codes, validating URLs, and deleting links. The file imports the express, ShortUrl, and QRCode libraries.

Image description

File: dashboardController.ts

Description: This file contains controller functions related to the dashboard functionality. It includes functions for rendering the welcome page, rendering the dashboard page, rendering the index page with the user's short URLs, generating short URLs, retrieving short URLs, generating QR codes, validating URLs, and deleting short URLs.

Image description

File: userController.ts

Description: This file contains controller functions related to user management and authentication using Passport. It includes functions for rendering the login and registration pages, handling user registration, user login, and user logout.

Image description

folder: model
The ShortUrl model file defines the Mongoose schema for storing shortened URLs. It includes fields for the full URL, generated short URL, number of clicks, and a reference to the associated user.

Image description

The User model file defines the Mongoose schema for storing user information. It includes fields for the user's name, email, and password.

Image description

Both models are used to create MongoDB documents and are exported for use in other parts of the application.

folder: routes

file:
shortUrlRoutes.ts: This is a route file that defines the routes for URL shortening and management. It imports controller functions from "shortUrlControllers" and "dashboardController". The routes include rendering the welcome page, rendering the dashboard page with authentication, rendering the URL page, generating a short URL, retrieving a short URL, generating a QR code, deleting a link, and logging out.

file:
userRoutes.ts:This is another route file that defines routes related to user authentication and URL management. It imports controller functions from "userController" and "shortUrlControllers". The routes include rendering the login and registration pages, registering a new user, logging in a user, and retrieving a short URL.

Both files use the express Router and export the defined routes as the default export.

folder: Views

dashboard.ejs: This file represents a dashboard page with a heading, a welcome message with the user's name, and a button to go back to the home page.

error.ejs: This file displays an error message with a back button if an invalid link is submited to generate barcode.

home.ejs: This file represents the home page with a form to enter a URL and generate a shortened URL. It also displays a table with existing short URLs, including their full URL, short URL, and click count. It has a section to generate a QR code for a given URL and a logout button.

layout.ejs: This file provides the basic structure for other pages, including a container div and necessary CSS and JS links.

login.ejs: This file displays a login form with input fields for email and password.

register.ejs: This file displays a registration form with input fields for name, email, password, and password confirmation.

qrCode.ejs: This file displays a generated QR code for a given URL and provides options to download the barcode image or go back to the home page.

welcome.ejs: This file represents a welcome page with a Node.js logo and options to register or login.

db.js
All users and shortUrls data is kept in the mongdb database, which is connected to using db.js.

.env.example
environment variable offers all the configuration-related data needed.

server.ts
All of the application's files are combined into one file called server.ts.

Image description

Deployement on Render.
Refer to the documentation on how to deploy on ##Render
https://render.com/docs

Top comments (0)