A modern, full-stack URL shortener built with Next.js 15, MongoDB, and Shadcn UI. Create short, memorable links with advanced features like custom aliases, expiration dates, and detailed analytics.
- 🚀 Modern, responsive UI with dark mode support
- 🔗 Generate short URLs instantly
- 🎯 Custom alias support
- ⏰ URL expiration dates
- 📊 Detailed analytics with charts and graphs
- 🌐 Device and location tracking
- 📱 Mobile-first, responsive design
- 🌙 Dark/Light mode with system preference support
- 📈 Click tracking with bot detection
- 🔍 Referrer and UTM parameter tracking
- 📱 QR code generation for shortened URLs
- 📊 Interactive charts for click trends
- 🕒 Hourly and daily click distribution
- 🌍 Geographic location insights
- 🔄 Real-time analytics updates
- Next.js 15 - React framework with App Router
- React 19 - JavaScript library for user interfaces
- TypeScript - Type safety and better developer experience
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - High-quality, accessible UI components
- Chart.js 4.4 - Interactive charts and graphs
- React Hook Form 7.54 - Form validation and handling
- Zod 3.24 - Schema validation
- Lucide React 0.469 - Beautiful, consistent icons
- next-themes 0.4 - Theme management
- MongoDB 8.9 - Document database
- Mongoose - MongoDB object modeling
- Next.js API Routes - Serverless API endpoints
- nanoid 5.0 - URL shortcode generation
- TypeScript 5.7 - Static type checking
- ESLint - Code linting
- Prettier - Code formatting
- Turbopack - Incremental bundler
- Node.js 18+
- MongoDB database
- Clone the repository:
git clone https://github.com/byigitt/short.git
cd short- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Create a
.env.localfile in the root directory:
MONGODB_URI=your_mongodb_connection_string
NEXT_PUBLIC_APP_URL=http://localhost:3000- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── [shortCode]/ # URL redirection
│ ├── a/ # Analytics pages
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # React components
│ ├── ui/ # Shadcn UI components
│ └── theme/ # Theme components
├── lib/ # Shared utilities
│ ├── db.ts # Database connection
│ ├── models/ # Mongoose models
│ ├── validations/ # Zod schemas
│ └── utils/ # Utility functions
└── public/ # Static files
- Generate short codes using nanoid
- Support for custom aliases
- URL validation and sanitization
- Expiration date setting
- Duplicate URL detection
- Reserved keyword protection
- Click tracking with bot detection
- Device and browser detection
- Geographic location tracking
- Referrer tracking
- UTM parameter tracking
- Time-based analytics
- Interactive charts and graphs
- QR code generation
- Mobile-first responsive design
- Dark mode support
- Copy to clipboard functionality
- QR code sharing
- Loading states and animations
- Toast notifications
- Form validation
- Error handling
Create a new short URL
- Body:
{ url: string, customAlias?: string, expiresAt?: string } - Response:
{ shortCode: string, shortUrl: string, analyticsUrl: string }
Redirect to original URL
- Params: shortCode
- Response: 301 redirect or 404
Get URL analytics
- Params: shortCode
- Response: Analytics data with clicks and stats
- Fork the repository
- Create your 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.