Introduction

This is an experimental URL shortener based on Dub.co idea and architecture.

IMPORTANT NOTICE: I do not intend to utilize this for monetary gain, nor do I plan to support the production instance. In fact, the deployed app solely serves as a staging server dedicated to my acceptance testing.

About

Weel (or 'wee link') serves as a link management tool designed for marketing teams, enabling them to generate, distribute, and monitor short links.

Project Features

• Dynamic 3D globe displaying top-clicked links within the last 24 hours
• Advanced analytics for precise click tracking
• QR Codes for easy sharing
• Enhanced security with password-protected links
• Targeted link delivery with device and geo-targeting capabilities
• Time-sensitive links with customizable expiration dates

Application features

• Dark theme for enhanced visual comfort
• Streamlined links view with intuitive infinite scroll
• Link management capabilities: create, edit, duplicate, archive, and delete
• Rate limiter for protection against potential DoS attacks
• Analytics page offering a time-series data view for in-depth analysis
• Click insights encompassing geo-location, device, browser, and referrer information

Tech Stack

• Next.js – framework
• TypeScript – language
• Tailwind – CSS
• Upstash – Redis
• Tinybird – real-time analytics
• PlanetScale – MySQL database
• Vercel – deployments to Node.js and Edge runtimes
• Prisma – ORM
• Prisma Accelerate - global database cache with scalable connection pooling. Used for connecting to the database from the Edge Runtime

Architecture

We believe that the key principal of any URL shortener is a fast redirection mechanism. End users should feel minimal latency when addressing their short links.

Weel prioritizes swift redirection to minimize user latency. Deployed on Vercel as a serverless application, it leverages Vercel Edge computing for geographical proximity to end users, ensuring faster communication and responses.

In this architecture, Redis serves as a crucial data store for short links, delivering fast access, persistence, and high availability. Tinybird enhances the system with real-time data analytics, offering rapid writes and reads with millisecond latency.

Development

First, copy .env.example content to .env.local and provide the corresponding values.

Optional: create .env.studio containing a single variable, DATABASE_URL, serving as the direct path to the MySQL database. This file is utilized for reading environment variables when running yarn db:studio, enabling the opening of Prisma Studio — a local database IDE.

Install the dependencies:

npm install
# or
yarn install
# or
pnpm i

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.