Building a URL shortener

I used Nextjs to build a simple URL Shortener and it looks really great. Here’s the stack I used to build this project:

The Tech Stack

  • Frontend: Next.js with TypeScript and Tailwind CSS
  • Backend: Next.js API routes
  • Database: MongoDB with Mongoose for modeling
  • Deployment: Vercel

Key Features

  1. Instant URL shortening: Enter a long URL and get a short one immediately
  2. Custom slugs: Create custom short URLs if you want something memorable
  3. Analytics: Basic click tracking to see how many times your link has been used
  4. QR Code generation: For each shortened URL

The Development Process

The most challenging part was ensuring the uniqueness of generated slugs while keeping them short. I implemented a base62 encoding function that converts a counter to a short alphanumeric string.

Another interesting aspect was implementing rate limiting to prevent abuse of the API. I used a simple Redis-based solution that tracks API calls per IP address.

If you’re interested in the full code, you can check out the repository at github.com/boihendo/url-shortener.