A modern, production-ready URL shortener application built with Next.js 14, featuring real-time analytics, custom short links, and advanced tracking capabilities.
- Instant URL Shortening: Transform long URLs into memorable short links
- Custom Short Codes: Create branded links with personalized aliases
- QR Code Generation: Automatic QR code creation for every short link
- Link Management: Comprehensive dashboard for organizing all your links
- Real-time Click Tracking: Monitor link performance as it happens
- Detailed Analytics: Track clicks, analyze traffic sources, and understand your audience
- Geographic Data: See where your clicks are coming from worldwide
- Device Analytics: Monitor desktop vs mobile usage patterns
- Browser & OS Tracking: Understand your audience's technical preferences
- Link Security: Automatic scanning for malicious URLs
- Rate Limiting: Intelligent protection against abuse
- Global CDN: Lightning-fast redirects worldwide
- HTTPS Redirects: Secure redirects for all shortened URLs
- Lynx-Inspired Design: Modern dark theme with coral orange accents
- Responsive Design: Mobile-first design that works on all devices
- Smooth Animations: Delightful micro-interactions and transitions
- Real-time Feedback: Instant notifications and status updates
- Framework: Next.js 14 with App Router
- Database: Supabase (PostgreSQL)
- Authentication: Supabase Auth with email/password
- UI Components: Shadcn/ui + Radix UI
- Styling: Tailwind CSS with custom Lynx-inspired theme
- Validation: Zod for type-safe validation
- Charts: Recharts for analytics visualization
- Animations: Framer Motion
- Icons: Lucide React
- Notifications: Sonner (React Hot Toast)
- Node.js 18+
- Supabase account and project
git clone <repository-url>
cd slink-ninja
npm installCreate a .env.local file in the root directory:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
# In production: https://slink.ninjaThe application uses Supabase with the following tables:
urls- Stores original URLs, short codes, and metadataanalytics- Tracks click data and user interactions
Migration files are located in /supabase/migrations/:
20250726144240_humble_flame.sql- Creates URLs table20250726144248_foggy_oasis.sql- Creates Analytics table
# Development
npm run dev
# Production Build
npm run build
npm startThe application will be available at http://localhost:3000
-
Deploy to Vercel:
npm i -g vercel vercel
-
Set Environment Variables in Vercel Dashboard:
NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URLNEXT_PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous keyNEXT_PUBLIC_APP_URL: Your production domain (https://slink.ninja)
-
Supabase Configuration:
- Ensure your Supabase project is properly configured
- Add your Vercel domain to Supabase Auth settings
- Configure RLS policies for security
CREATE TABLE urls (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
original_url text NOT NULL,
short_code text UNIQUE NOT NULL,
custom_code text UNIQUE,
title text,
description text,
user_id uuid REFERENCES auth.users(id),
clicks integer DEFAULT 0,
is_active boolean DEFAULT true,
expires_at timestamptz,
qr_code text,
created_at timestamptz DEFAULT now(),
updated_at timestamptz DEFAULT now()
);CREATE TABLE analytics (
id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
url_id uuid REFERENCES urls(id) ON DELETE CASCADE NOT NULL,
ip_address text NOT NULL,
user_agent text NOT NULL,
country text DEFAULT 'Unknown',
city text DEFAULT 'Unknown',
referrer text DEFAULT 'Direct',
device text NOT NULL,
browser text NOT NULL,
os text NOT NULL,
clicked_at timestamptz DEFAULT now()
);POST /api/urls/create- Create short URLGET /api/urls- Get user's URLs (authenticated)PUT /api/urls/[id]- Update URL (authenticated)DELETE /api/urls/[id]- Delete URL (authenticated)
GET /api/analytics- Get analytics data (authenticated)GET /api/analytics/[id]- Get URL-specific analytics
GET /[shortCode]- Redirect to original URL (tracks analytics)
- URL format validation with Zod schemas
- Custom code format restrictions
- XSS prevention through input sanitization
- SQL injection prevention
- IP-based rate limiting for URL creation
- Configurable limits per time window
- Abuse prevention mechanisms
- Supabase Auth with secure session management
- Row Level Security (RLS) policies
- Secure cookie settings in production
- Basic malicious URL detection
- Extensible security rule system
- Safe redirect mechanisms
- Real-time click counting
- Detailed click history
- Time-based analytics (daily, weekly, monthly)
- Country-level tracking
- City-level tracking (with IP geolocation)
- Regional traffic analysis
- Device type detection (Mobile/Desktop)
- Browser identification
- Operating system tracking
- User agent analysis
- Referrer tracking
- Direct vs referred traffic
- Social media source identification
- Primary: Coral Orange (#ff6b35)
- Secondary: Orange Accent (#f7931e)
- Background: Dark theme with glass morphism
- Text: High contrast white on dark
- Glass morphism cards with backdrop blur
- Smooth animations and transitions
- Responsive grid layouts
- Accessible design patterns
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication pages
│ ├── (dashboard)/ # Dashboard pages
│ └── [shortCode]/ # Dynamic redirect route
├── components/ # Reusable components
│ ├── ui/ # UI components
│ ├── dashboard/ # Dashboard-specific components
│ └── forms/ # Form components
├── lib/ # Utilities and services
│ ├── supabase/ # Supabase client configuration
│ ├── services/ # Business logic services
│ └── utils/ # Helper functions
├── hooks/ # Custom React hooks
└── supabase/ # Database migrations
UrlService- URL creation and managementAnalyticsService- Click tracking and analyticsUrlController- Business logic coordination
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js for the excellent React framework
- Supabase for the backend-as-a-service platform
- Shadcn/ui for beautiful UI components
- Tailwind CSS for utility-first styling
- Lynx for design inspiration
- Vercel for seamless deployment
For support, email support@slink.ninja or create an issue in this repository.
Built with ❤️ for smarter URL shortening • slink.ninja