- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 📊 Database Schema
Clipper is a full-stack URL Shortener built using Next.js, Supabase, ShadCN UI, and Tailwind CSS. It allows users to shorten long URLs, track analytics, and manage their links efficiently.
With Clipper, users can:
- Generate short, shareable links.
- View detailed analytics for each shortened URL.
- Manage and organize their links from a user-friendly dashboard.
The project is designed for simplicity, and ease of use, making URL shortening seamless and efficient.
- Next.js
- JavaScript
- Supabase
- ShadCN UI
- Tailwind CSS
👉 Shorten Long URLs – Easily convert long and complex URLs into short, manageable links.
👉 User Authentication – Secure authentication using Supabase with email/password.
👉 Custom Short URLs – Allows users to create custom slugs for personalized short URLs.
👉 Dashboard for Link Management – Users can view, edit, and delete their shortened links from an intuitive dashboard.
🔹 Location Stats – Track the geographic locations of visitors who click on your shortened links.
🔹 Device Stats – Monitor the types of devices (mobile, desktop, tablet) used to access your links.
👉 SEO-Friendly and Optimized Performance – Fast-loading, optimized pages built with Next.js and Tailwind CSS.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/MohammedHamza0631/clippr.git
cd clipprInstallation
Install the project dependencies using npm:
npm installSet Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
NEXT_PUBLIC_SUPABASE_URL=<SUPABASE_PROJECT_URL>
NEXT_PUBLIC_SUPABASE_KEY=<SUPABASE_ANON_KEY>
NEXT_PUBLIC_IPINFO_TOKEN=<IPINFO_API_TOKEN>Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites from Supabase, and Ipinfo.
Running the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
The application uses two main tables in Supabase to store data:
| Column | Type | Description |
|---|---|---|
| id | int8 | Primary key |
| created_at | timestamptz | When the URL was created |
| original_url | text | Original long URL |
| short_url | text | Generated short URL identifier |
| custom_url | text | User-defined custom URL (optional) |
| user_id | uuid | Foreign key to the user |
| title | text | Title of the URL |
| qr_code | text | QR code for the shortened URL |
| Column | Type | Description |
|---|---|---|
| id | int8 | Primary key |
| created_at | timestamptz | When the click occurred |
| url_id | int8 | Foreign key to the urls table |
| city | text | City from which the URL was accessed |
| device | text | Device type used (mobile, desktop) |
| country | text | Country from which the URL was accessed |