URL Shortner(Clone)

URL Shortner with an analysis

A URL shortener is a tool that can be used to shorten long, complex URLs into shorter, more manageable links. This project is a simple URL shortener service, where users can input a long URL and get a shorter one in return and will also generate QR code for link and UPI.

Tech Stacks Used:

• Frontend:

  HTML CSS JavaScript tailwind

• Backend:

  Node.js Express.js MongoDB Redis google-oAuth github-oAuth

Tools Used:

• IDE:

  Visual Studio Code

• External Package Manager:

  NPM

• Deployment tools:

  Netlify Cyclic Render

Frontend Deployed link:

• Client Side: https://lacking-berry-1088.netlify.app/

Backend Deployed Link

• Server Side: https://beige-swordfish-wear.cyclic.app/

User Flow Chart

Installation

To install this project, follow these steps:

• Clone this repository to your local machine.

• Install the required dependencies by running npm install.

• set up a MongoDB database either locally or using a cloud provider like MongoDB Atlas.

• Create a .env file in the root directory and add the following variables:

  PORT=<your_preferred_port>
  MONGODB_URI=<your_mongodb_uri>
  normalkey = <normalkey>
  refreshkey = <refreshkey>
  redis_password = < redispassword >
  GITHUB_CLIENT_ID = < github client id>
  GITHUB_CLIENT_SECRET = <github client secret>
  GOOGLE_CLIENT_ID = < google client id>
  GOOGLE_CLIENT_SECRET = <google client secret>
  

Start the server by running npm run server.

Usage

• To sign in or sign up with Google or GitHub, click the corresponding button on the login page and follow the prompts.

• Once the server is running, you can use the URL shortener by entering a long URL in the input field on the dashboard and clicking the "Shrink" button. The application will generate a short URL that you can use to redirect to the original long URL.

• To access the admin dashboard, navigate to /admin in your web browser and enter the admin username and password that you specified in the .env file. From the dashboard, you can view a list of all the users and links, delete users, and delete links.

API Documentation

POST /url/shorturl Shortens a long URL and returns the shortened URL.

Request Body

{
 "longUrl": "string"
 }

response

• longUrl (string, required): The long URL to shorten. Response

{
    "shortUrl": "string"
}

• shortUrl (string): The shortened URL.

Analysis

• One of the key challenges in building a URL shortener is generating unique, short URLs that are easy to remember and type. In this implementation, we are using a combination of Redis and MongoDB to generate short URLs.

• Another important consideration is security. By implementing authentication with Google OAuth and GitHub OAuth, we can ensure that only authorized users are able to access the application. Additionally, we have implemented input validation and sanitization to protect against malicious inputs.

• To improve performance and scalability, we are using Redis to cache frequently accessed data and MongoDB to store less frequently accessed data. We can also implement load balancing to handle a large number of requests.

Admin Dashboard

• The admin dashboard provides a way to manage the users and links. From the dashboard, you can:

• View a list of all the users and links.
• Delete users.
• Delete links. To access the admin dashboard, navigate to /admin in your web browser and enter the admin username and password that you specified in the .env file.

Screenshots:

• Homepage

• Login

• Register

• Client Dashboard

• Admin

• • Admin Login

  

• • Admin Dashboard

  

• • User Manager

  

• Authors

• Vaibhav Shevne : Linkedin - Github

• Vipul Kumar : Linkedin - Github

• Akash Manwar : Linkedin - Github

• Saloni Kumari : Linkedin - Github

• Rohit Kumar : Linkedin - Github