Muhammad Subhan

Link.ly · A URL Shortener

Link.ly is designed as a lightweight URL shortening service with features to manage links, analyze traffic, generate QR code & customize them with brand logos.

Role

Full Stack Developer

Category

Web Dev

Context

Ultra Codes

Stack size

8 tech

link.ly.a.url.shortener.app
Link.ly: A URL Shortener preview
01

TL;DR

Link.ly is a fast and customizable URL shortening service built with modern tech like PostgreSQL, Prisma, NestJS, and Next.js. It allows users to shorten URLs, generate QR codes, track traffic analytics, and manage branded links with custom tags and logos. Features include bulk URL pre-generation, link expiration control, API integration, and cloud-based image management via Cloudinary. Its real-time analytics dashboard provides detailed insights on user engagement, device stats, locations, and more, making it ideal for both small and large-scale link management.

02

Problem & Approach

The story of why this project existed and the shape of the solution.

Link.ly is a versatile and lightweight URL shortening service designed to streamline link management while offering a rich set of features. Built using a modern tech stack including PostgreSQL, Prisma, NestJS, Next.js, and Redux Toolkit, Link.ly allows users to shorten URLs, generate custom QR codes, and track real-time analytics. The platform provides detailed traffic insights, breaking down clicks by device, operating system, referrer, and geographic location. Users can manage branded URLs, incorporating custom tags and logos for enhanced customization.

Link.ly also supports bulk URL pre-generation, making it ideal for handling large-scale link distribution efficiently. With robust expiration control, users can define the lifespan of their links, adding an extra layer of flexibility. The service integrates seamlessly with external applications using API keys, making it easy to incorporate into different workflows and user interfaces. Additionally, its cloud-based image management, powered by Cloudinary, ensures efficient handling of brand logos.

The real-time analytics dashboard presents visually engaging reports, complete with graphs and charts for top cities, countries, and user engagement trends, offering actionable insights to businesses. Whether you need to manage a few links or thousands, Link.ly provides the tools to do it efficiently, securely, and with comprehensive data analysis.

03

Stack

Database

  • PostgreSQL
  • Prisma

Backend

  • NestJS

Frontend

  • Next.js
  • Redux Toolkit
  • Tailwind CSS

Tooling

  • Zod
  • Cloudinary
04

Features

  • 01Generate and customize QR codes with brand logos.
  • 02Bulk URL pre-generation for large-scale campaigns and events.
  • 03Expiration control to set specific lifespan for URLs.
  • 04Detailed traffic insights including top cities, countries, and user behavior analysis (new vs. returning users).
  • 05Tag management to categorize and organize shortened URLs.
  • 06Seamless integration with external apps and services through API keys.
06

Challenges & Refactors

01
Challenge

The analytics dashboard was experiencing slow load times due to the large volume of data being processed.

Solution

Implemented batch processing and caching techniques to streamline data aggregation, significantly improving load times for users.

02
Challenge

The logo image optimization page was causing delays during user interaction.

Solution

Integrated infinite scrolling to dynamically load logo images as users scroll, enhancing performance and providing a smoother user experience.

07

Gallery

Link.ly: A URL Shortener screenshot 1
Link.ly: A URL Shortener screenshot 2
Link.ly: A URL Shortener screenshot 1
Link.ly: A URL Shortener screenshot 2
Link.ly: A URL Shortener screenshot 1
Link.ly: A URL Shortener screenshot 2
Link.ly: A URL Shortener screenshot 1
Link.ly: A URL Shortener screenshot 2
Link.ly: A URL Shortener screenshot 1
Link.ly: A URL Shortener screenshot 2