ShortMe

Fast & Secure URL Shortener

Fast, simple, and secure URL shortening service built with Next.js. Create short, memorable links with user authentication and dashboard management.

View on GitHub

2 stars0 forksUpdated last year

Tech Stack

Next.jsTypeScriptMySQLJWTTailwind CSS

ShortMe is a fast, simple, and secure URL shortening service built with Next.js. Create short, memorable links from long URLs with user authentication, analytics, and a modern dashboard—all backed by MySQL for reliable data persistence.

✨ Key Features

🔗

URL Shortening

Create short, memorable links from long URLs instantly

👤

User Authentication

Secure registration and login system for link management

📊

Dashboard

Manage all your shortened links in one centralized place

🔐

JWT Security

Secure session management with JWT token authentication

💾

MySQL Database

Reliable data persistence and link history tracking

🎨

Modern UI

Built with Tailwind CSS for a sleek, responsive interface

⚡

Type-Safe

Full TypeScript support for reliability and better DX

🚀

Production Ready

Fast, scalable, and ready for deployment

🚀 Getting Started

📦 Installation

1. Clone the repository:

git clone https://github.com/kibaofficial/shortme.git cd shortme

2. Install dependencies:

npm install

3. Set up database (.env):

NEXT_PUBLIC_HOSTNAME=http://localhost:3000
DEBUG=false
DB_HOST="localhost"
DB_USER="shortme"
DB_PASS="shortme"
DB_NAME="shortme"

4. Start development server:

npm run dev

Prerequisites

✓Node.js v16 or higher
✓MySQL or MariaDB
✓npm, yarn, pnpm, or bun

📖 How to Use

Register/Login

Navigate to the authentication page and create your account

Access Dashboard

After login, you'll be redirected to your personal dashboard

Create Link

Enter a long URL and get a short code instantly

Share & Track

Use your shortened link: http://localhost:3000/ShortCodeHere

🏗️ Project Structure

shortme/
├── src/
│   ├── app/
│   │   ├── api/              # API routes
│   │   │   ├── create-short/ # Create shortened URL
│   │   │   ├── delete-code/  # Delete link
│   │   │   ├── login/        # User login
│   │   │   ├── register/     # User registration
│   │   │   └── ...
│   │   ├── auth/             # Authentication page
│   │   ├── dashboard/        # User dashboard
│   │   └── [code]/           # Dynamic redirect route
│   ├── components/           # React components
│   │   ├── auth/             # Auth components
│   │   ├── ui/               # UI components
│   │   └── ...
│   ├── lib/                  # Utilities & services
│   │   ├── api.ts
│   │   ├── DB.ts
│   │   ├── middleware.ts
│   │   └── ...
│   └── utils/
│       └── GenerateDB.sql
├── public/                   # Static assets
├── .env.example
├── next.config.mjs
├── tsconfig.json
└── tailwind.config.ts

🎯 Core Components

🔗

URL Shortener Engine

Efficient algorithm for generating unique short codes and managing redirects

🔐

JWT Authentication

Secure token-based session management with expiration handling

📊

Link Management

Dashboard for viewing, editing, and deleting shortened URLs

🗄️

MySQL Integration

Persistent storage with schema for users, links, and metadata

⚡

API Routes

RESTful endpoints for all shortening and auth operations

🔄

Dynamic Routing

Instant redirects using Next.js dynamic routes with [code]

🛠️ Tech Stack

▸ Frontend

Next.js - React framework
TypeScript - Type safety
Tailwind CSS - Styling

▸ Backend & Database

Next.js API Routes
JWT Authentication
MySQL/MariaDB

📡 API Endpoints

POST

/api/register

POST

/api/login

User login with credentials

POST

/api/create-short

Create a new shortened URL

GET

/api/[code]

Redirect to original URL

DELETE

/api/delete-code

Remove a shortened link

💾 Database Schema

ShortMe uses MySQL to store user accounts, shortened links, and metadata:

Users Table

•id (Primary Key)
•username
•email
•password (hashed)
•created_at

Links Table

•id (Primary Key)
•user_id (FK)
•original_url
•short_code
•created_at
•expires_at

🎯 Status

✅ Completed Features

✓User registration & login
✓URL shortening engine
✓Dashboard for link management
✓JWT authentication
✓MySQL database integration
✓Redirect functionality
✓TypeScript support

🚀 Future Enhancements

○Click analytics & statistics
○Custom short codes
○QR code generation
○Link expiration dates
○Password protection
○API rate limiting
○Social sharing metrics

📚 Learn More

🔗

Next.js Docs

Official Next.js documentation and guides

🔒

JWT Auth

JSON Web Token authentication patterns

🗄️

MySQL Docs

Database design and optimization

✨

TypeScript

Type safety and advanced patterns

v1.0•MIT License•2 ⭐ on GitHub

"Made with ❤️ for efficient URL shortening and link management"