Link Palette - URL Shortener with Analytics

A modern, feature-rich URL shortener built with Next.js 16, Firebase Realtime Database, and beautiful analytics dashboard.

Features

• 🔗 URL Shortening: Create short links with custom aliases
• 📊 Analytics Studio: Comprehensive analytics dashboard with:
  • Overview statistics (Total Clicks, Unique Visitors, Avg CTR, Top Country)
  • Click timeline charts
  • Geographic analytics (Country distribution)
  • Device & Browser statistics
  • Traffic source analysis
  • Link-specific analytics (select any link to see its individual stats)
  • Real-time activity feed
• 🗺️ Live Traffic Map: Interactive world map showing click distribution by country
• 📱 Responsive Design: Beautiful, modern UI that works on all devices
• 🎨 Dark Theme: Optimized for dark mode with balanced white/black theme

Tech Stack

• Framework: Next.js 16 (App Router)
• Database: Firebase Realtime Database
• Styling: Tailwind CSS
• Charts: Recharts, d3-geo
• Animations: Framer Motion
• Icons: Phosphor React

Getting Started

Prerequisites

• Node.js 20.x or higher
• npm or yarn
• Firebase project with Realtime Database enabled

Installation

1. Clone the repository:

git clone <your-repo-url>
cd link-palette-nextjs

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env.local file in the root directory:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_DATABASE_URL=your_database_url
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

4. Configure Firebase Realtime Database Rules: See FIREBASE_RULES.md for instructions.

5. Run the development server:

npm run dev

6. Open http://localhost:3000 in your browser.

Deployment to Vercel

See VERCEL_DEPLOYMENT.md for detailed deployment instructions.

Quick Deploy

1. Push your code to GitHub/GitLab/Bitbucket
2. Go to vercel.com/new
3. Import your repository
4. Add environment variables (see .env.example)
5. Click Deploy

Project Structure

├── app/
│   ├── api/              # API routes
│   │   ├── analytics/    # Analytics endpoints
│   │   ├── links/        # Link management
│   │   ├── redirect/     # URL redirection
│   │   └── shorten/      # Link shortening
│   ├── [shortCode]/      # Dynamic redirect page
│   └── page.tsx          # Home page
├── components/
│   ├── analytics-studio.tsx  # Analytics dashboard
│   ├── layout.tsx            # Main layout with downpanel
│   └── visual-map.tsx        # World map component
├── lib/
│   └── firebase.ts       # Firebase configuration
└── public/               # Static assets

API Endpoints

Link Management

• POST /api/shorten - Create a short link
• GET /api/links - Get all links

Analytics

• GET /api/analytics/overview - Overall statistics
• GET /api/analytics/timeline?range=7d - Timeline data
• GET /api/analytics/devices - Device statistics
• GET /api/analytics/referrers - Traffic sources
• GET /api/analytics/recent-activity - Recent clicks
• GET /api/analytics/link/[linkId] - Individual link stats
• GET /api/stats/countries - Country statistics

Redirect

• GET /api/redirect/[shortCode] - Redirect to original URL

Environment Variables

All Firebase configuration should be set as environment variables with NEXT_PUBLIC_ prefix to be available in the browser.

Firebase Setup

1. Create a Firebase project at Firebase Console
2. Enable Realtime Database
3. Set up security rules (see FIREBASE_RULES.md)
4. Get your Firebase config values
5. Add them to .env.local or Vercel environment variables

License

MIT

Support

For issues and questions, please open an issue on GitHub.