Shortly - A Modern URL Shortener

Shortly is a full-stack URL shortening application built with a modern, type-safe technology stack. It allows users to create short, memorable links, manage them through a personal dashboard, and track their performance with click analytics. The application supports both anonymous users for quick link creation and registered users for a personalized experience with link history.

The user interface is designed with a keen eye for aesthetics, featuring two distinct, beautifully animated themes: a bright, airy "Aurora Glass" theme for light mode and a sleek, futuristic "Midnight Glow" theme for dark mode.

---

✨ Features

• URL Shortening: Instantly convert long URLs into concise, shareable links.
• Custom Slugs: Users can define their own custom short codes for branded links.
• User Authentication: Secure sign-up and login functionality using Supabase Auth.
• Personalized Dashboard: Logged-in users can view and manage their entire history of created links.
• Click Analytics: Track the total number of clicks for each shortened link.
• QR Code Generation: Instantly generate and download a QR code for any short link.
• Dual User-Flow: Supports both anonymous (no history) and authenticated (with history) users.
• Responsive Design: A seamless experience across desktop, tablet, and mobile devices.
• Stunning UI/UX:
  • Light Mode ("Aurora Glass"): A bright, clean interface with soft, animated aurora backgrounds and a polished glass-shine effect.
  • Dark Mode ("Midnight Glow"): A sleek, futuristic interface with deep, jewel-toned backgrounds and glowing neon edges on UI elements.

---

🛠️ Tech Stack

This project is built with a modern, robust, and scalable technology stack, emphasizing developer experience and performance.

• Framework: Next.js (App Router)
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animation: Framer Motion
• Backend & Database: Supabase (PostgreSQL, Auth, and Database Functions)
• Deployment: Vercel

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone [https://github.com/your-username/shortly.git](https://github.com/your-username/shortly.git)
   cd shortly

2. Install NPM packages:

   npm install

3. Set up your Supabase project:

   • Create a new project on supabase.com.
   • In the SQL Editor, run the SQL scripts to create the links and clicks tables, and the get_links_with_click_counts function.
   • Set up your RLS policies as detailed in the project build plan.

4. Set up environment variables:

   • Create a file named .env.local in the root of your project.
   • Add your Supabase Project URL and Anon Key to this file:

     NEXT_PUBLIC_SUPABASE_URL=YOUR_PROJECT_URL
     NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_ANON_PUBLIC_KEY
     

5. Run the development server:

   npm run dev

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

---

🌐 Deployment

This application is optimized for deployment on Vercel, the platform from the creators of Next.js.

1. Push your code to a GitHub repository.
2. Sign up for a Vercel account and import your repository.
3. Vercel will automatically detect that it's a Next.js project.
4. Important: In the Vercel project settings, go to "Environment Variables" and add your NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
5. Click "Deploy". Your application will be live in minutes!

---

🖼️ Gallery

Light Mode	Dark Mode

Dashboard	QR Code Modal