Ziptly

Zip your links, Share instantly

Overview

Ziptly is a modern URL shortener that transforms long, unwieldy links into clean, shareable URLs. It prioritizes simplicity, speed, and a seamless user experience with authentication built in from the ground up.

Users can:

• Shorten any URL instantly
• Copy and share links with a single click
• Redirect seamlessly to original destinations

Features

• Instant URL shortening: paste a long URL and get a short one right away
• Redis caching: frequently accessed links resolve without hitting the database
• Authentication: secured with Clerk; only authenticated users can create short links
• Auto-expiry: URLs are cached for up to 10 days and cleaned up automatically
• Collision-safe IDs: unique short IDs are generated and verified before saving

Future Improvements

• Link analytics: Track click counts, referrers, and geographic data per short link
• Custom slugs: Let users define their own short URL alias instead of a random ID
• Link expiry control: Allow users to set a custom expiration date per link
• Dashboard: A personal page to view, manage, and delete all created short links
• QR code generation: Auto-generate a QR code for every shortened URL
• Rate limiting: Prevent abuse by capping how many links a user can create per hour
• Password-protected links: Optionally require a password before redirecting

Tech stack

Frontend

• React + React Router: UI and client-side routing
• TailwindCSS: utility-first styling via the Vite plugin
• Clerk: authentication UI and session management
• Axios: HTTP requests to the backend
• clsx: conditional class name composition

Backend

• Express: HTTP server and API routing
• Mongoose: MongoDB ODM for storing short links
• Redis: caching resolved URLs for fast redirects
• Clerk: middleware for protecting authenticated routes
• nanoid: collision-safe short ID generation
• dotenv: environment variable loading
• zylog: structured logging

Environment Variables

Frontend

VITE_CLERK_PUBLISHABLE_KEY=... # your_key_here

Backend

CLERK_SECRET_KEY=... # your_secret_here
PORT=5000
DB_URL=... # MongoDB URL
BASE_URL=https://ziptly.vercel.app

How it works

1. A user pastes a long URL into the frontend and submits it.
2. The frontend sends a POST /url request with a valid Clerk session token.
3. The backend generates a unique short ID, saves it to MongoDB, and returns the short URL.
4. When anyone visits the short URL (GET /:id), the server checks Redis first.
   • Cache hit → immediate redirect.
   • Cache miss → fetches from MongoDB, caches the result for ~10 days, then redirects.

Preview

Getting Started

git clone https://github.com/teneplaysofficial/ziptly.git
cd ziptly

Install dependencies

# frontend
cd client
pnpm install

# backend
cd ../server
pnpm install

Setup environment variables

Create .env files in both client and server folders.

Run the app

# Backend
cd server
pnpm run start

# Frontend (in a separate terminal)
cd ../client
pnpm run dev

Installation Guide

Redis (Local)

Follow the official Redis installation docs for your platform.

Windows users: Redis is not natively supported on Windows. Use WSL (Windows Subsystem for Linux) and follow the Linux instructions below.

sudo apt-get update
sudo apt-get install redis

Verify the installation:

redis-cli

Test the connection:

127.0.0.1:6379> ping
PONG

Project Structure

├── client/        # React frontend
├── server/        # Express backend