URL Shortener

Overview

The URL Shortener is a robust full-stack application designed to streamline link sharing. It transforms long, cumbersome URLs into concise, manageable links, enhancing shareability across platforms. Beyond simple shortening, the service automatically generates QR codes for every link, bridging the gap between digital and physical sharing.

Built with performance and scalability in mind, it leverages Next.js for a seamless frontend and backend experience, backed by MongoDB for efficient data storage. The application also features a comprehensive dashboard where users can track the performance of their links with real-time analytics.

Key Features

Core Functionality

• Instant Shortening: Generate short links instantly with a single click.
• Custom Aliases: Users can define their own custom back-half for links (e.g., mysite.com/summer-sale).
• QR Code Generation: Downloadable QR codes for every shortened URL.
• User Authentication: Secure login and signup powered by Clerk.

Analytics & Management

• Real-time Clicks: Track how many times a link has been clicked.
• Device & Location Data: (Planned) Insights into where clicks are coming from.
• Link Management Dashboard: Edit, delete, or archive links easily.

Technical Implementation

Database Schema

The application uses a flexible MongoDB schema to store link data. Here's a glimpse of the structure:

// Link Schema
model Link {
  id          String   @id @default(auto()) @map("_id") @db.ObjectId
  originalUrl String
  shortCode   String   @unique
  clicks      Int      @default(0)
  userId      String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

API Architecture

The backend is built using Next.js API routes, ensuring low latency and high availability.

// API Route for redirecting
export async function GET(req: Request, { params }: { params: { code: string } }) {
  const code = params.code;
  const link = await db.link.findUnique({
    where: { shortCode: code },
  });

  if (!link) {
    return new Response("Link not found", { status: 404 });
  }

  // Async click increment
  await db.link.update({
    where: { id: link.id },
    data: { clicks: { increment: 1 } },
  });

  return Response.redirect(link.originalUrl);
}

Challenges & Solutions

• Unique Alias Generation: Ensuring every short code is unique was critical. I implemented a collision check system that retries with a new code if a duplicate is found during generation.
• Performance: To handle potential high traffic, database queries are optimized with proper indexing on the shortCode field.