Back to projects
NextJs URL Shortner

NextJs URL Shortner

Mahmudul Hasan Nayeem / September 11, 2024

This is a URL shortner built with NextJs and MongoDB. It allows you to shorten long URLs into short and easy-to-share links. Check out the live demo.

Features

  • Shorten URLs: Shorten long URLs into short links.
  • Analytics: Track the number of clicks on each short link.
  • One clieck copy: Copy the short link to the clipboard with one click.
  • QR Code: Generate a QR code for each short link.
  • Responsive Design: The website is responsive and works on all devices.

Technologies

  • NextJs: A React framework for building static and dynamic websites.
  • mongoose: A MongoDB object modeling tool designed to work in an asynchronous environment.
  • Tailwind CSS: A utility-first CSS framework for building custom designs.
  • Framer Motion: A production-ready motion library for React.
  • NanoID: A tiny, secure, URL-friendly unique string ID generator for JavaScript.

Getting Started with URL Shortener

To get started with this project, you can clone the repository and install the dependencies:

  • Clone the repository:

     git clone https://github.com/mahmudulnayeem/url-shortner.git

    cd url-shortner
pnpm install

  • Once the dependencies are installed, you can run the development server:

    pnpm dev

  • Add Env : Create a .env.local file in the root directory of the project and add the following environment variables:

    HOST_URL = http://localhost:3000
MONGO_DB_CONNECTION_STRING = your_mongo_db_connection_string

  • Run the development server : Run the project with the following command:

    pnpm dev

    The development server will start at http://localhost:3000.

Deployment

To deploy this project, you can use Vercel. You can link your GitHub repository to Vercel and deploy the project with a single click.

Conclusion

Building a URL shortener with NextJs and MongoDB showcases the versatility and power of modern web development tools. This project not only streamlines long URLs into manageable links but also integrates useful features like analytics, QR codes, and responsive design, making it both practical and user-friendly. With technologies like Tailwind CSS and Framer Motion, the application is sleek, fast, and visually engaging. Whether for personal use or as part of a larger application, this project demonstrates how to effectively create dynamic, scalable web solutions.