A full-stack URL shortening platform with authentication, click tracking, user-scoped URL management, and AI-powered slug and webpage summary generation.
The application allows authenticated users to securely create, manage, and track shortened URLs.
It also includes an AI Suggest feature that analyzes the destination webpage and uses Gemini to generate a meaningful short URL slug and concise summary.
Live App:
https://url-shortener-app-topaz.vercel.app
GitHub Repository:
https://github.com/Developer-Sohail786/url-shortener-app
- Create custom short URLs
- Prevent duplicate short URL codes
- Associate URLs with individual user accounts
- Store URL summaries
- Server-side authentication before URL creation
- Store click counts and timestamps
The application includes an AI Suggest feature powered by Google Gemini.
When a user enters a destination URL:
- The frontend sends the URL to
/api/ai-generate. - The server fetches the destination webpage.
- The webpage HTML is inspected.
- The application attempts to extract the
<title>tag. - If unavailable, it attempts to extract
og:title. - The URL and extracted title are sent to Gemini.
- Gemini generates:
- A concise webpage summary
- A clean, lowercase, hyphen-separated URL slug
The generated slug and summary are returned to the frontend.
Gemini 2.5 Flash
โ
โผ
If request fails
โ
โผ
Gemini 3 Flash Preview
โ
โผ
If both fail
โ
โผ
Deterministic fallback slug
+ generic summary
The final fallback generates a slug from the last segment of the URL and uses:
Generated from URL
as the fallback summary.
Authentication is implemented using NextAuth with JWT sessions.
- User registration
- Email and password login
- Password hashing with bcryptjs
- Case-normalized email lookup
- Invalid credential handling
- JWT-based sessions
- Google login
- Automatic user creation for first-time Google users
- MongoDB user ID stored in the JWT
- Authenticated user ID available through the session
User
โ
โผ
Login / Register
โ
โผ
NextAuth
โ
โโโ Credentials
โ
โโโ Google OAuth
โ
โผ
JWT Session
โ
โผ
Authenticated Application
Authenticated routes are protected using server-side session validation.
/shorten
Only authenticated users can access the URL management dashboard.
/login
/register
Authenticated users are redirected to:
/shorten
Route protection uses:
getServerSession()authOptionsredirect()force-dynamic- Server-side session validation
The current
app/middleware.jsdoes not perform route protection. Protection is implemented directly in the relevant server-rendered pages and API routes.
The /shorten page provides a dashboard for managing generated URLs.
- View all generated URLs
- View original destination URL
- View shortened URL
- View AI-generated summary
- View total clicks
- View creation date
- Copy shortened URL
- Delete URLs
- Responsive table layout
The dashboard fetches the user's URLs when the page loads and refreshes them when the browser window receives focus.
Shortened URLs support click tracking.
When a user opens a shortened URL:
/shorturl
โ
โผ
Find URL in MongoDB
โ
โผ
Increment clicks using $inc
โ
โผ
Redirect to original URL
MongoDB's atomic $inc operation is used to increment the click count.
Tracked fields include:
clickscreatedAtlastClickedAt
lastClickedAtis currently initialized when a URL is created, but the current redirect implementation does not update it when a click occurs.
Short URLs are handled through:
/[shorturl]
The redirect process:
- Receives the short URL parameter.
- Searches MongoDB for the matching
shorturl. - Returns
notFound()if the record does not exist. - Validates that the destination begins with
http. - Atomically increments the click counter.
- Redirects the user to the original destination.
Each URL is associated with the authenticated user's ID.
Example URL document:
{
"url": "https://example.com",
"shorturl": "example123",
"summary": "Example webpage",
"clicks": 0,
"userId": "user_id",
"createdAt": "Date",
"lastClickedAt": null
}The application ensures that:
- Users only retrieve their own URLs.
- Users can only delete their own URLs.
- URL deletion checks both the document ID and authenticated user's ID.
- Unauthenticated API requests are rejected.
Creates a new credentials-based user.
Handles NextAuth authentication requests.
Creates a shortened URL.
Requires:
url
shorturl
summary
Authentication is required.
Returns URLs belonging to the authenticated user.
Authentication is required.
Deletes an owned shortened URL.
Authentication is required.
Generates an AI-powered slug and webpage summary.
Input:
{
"url": "https://example.com"
}Output:
{
"success": true,
"summary": "Example webpage summary",
"slug": "example-page"
}If both Gemini models fail, the endpoint can return fallback data.
The project uses MongoDB with the database:
URL_Shorten
users
url
| Field | Description |
|---|---|
url |
Original destination URL |
shorturl |
Short URL identifier |
summary |
AI-generated or supplied summary |
clicks |
Total number of clicks |
userId |
ID of the URL owner |
createdAt |
URL creation timestamp |
lastClickedAt |
Last-click timestamp field |
User records can contain:
nameemailpasswordprovidercreatedAt
The application demonstrates several security practices.
- NextAuth authentication
- JWT sessions
- Password hashing with bcryptjs
- Google OAuth
- Server-side session validation
- User-scoped database queries
- Ownership verification during deletion
- Protected application routes
- Protected API operations
- Passwords are hashed before storage
- URL records contain ownership information
- Database operations are performed server-side
User enters URL
โ
โผ
AI Suggest button
โ
โผ
POST /api/ai-generate
โ
โผ
Fetch webpage HTML
โ
โผ
Extract <title>
โ
โผ
Fallback to og:title
โ
โผ
Build Gemini prompt
โ
โผ
Gemini 2.5 Flash
โ
โผ
Gemini 3 Flash Preview
โ
โผ
Deterministic fallback
โ
โผ
Return summary + slug
โ
โผ
Populate URL form
The AI prompt asks Gemini to generate a maximum 10-word summary and a clean lowercase, hyphen-separated slug using the URL and webpage title.
โโโโโโโโโโโโโโโโโโโโโโโโ
โ User โ
โโโโโโโโโโโโฌโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโ
โ Next.js โ
โ App Router โ
โโโโโโโโโโโโฌโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโ
โ โ โ
โผ โผ โผ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
โ NextAuth โ โ API Routes โ โ Pages / โ
โ + JWT โ โ โ โ Components โ
โโโโโโโโโโโโโโโ โโโโโโโโฌโโโโโโโ โโโโโโโโโโโโโโโ
โ
โโโโโโโโโโดโโโโโโโโโ
โ โ
โผ โผ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
โ MongoDB โ โ Gemini AI โ
โ Database โ โ โ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
app/
โโโ (auth)/
โ โโโ login/
โ โ โโโ page.js
โ โ โโโ loginComponent.js
โ โโโ register/
โ โโโ page.js
โ โโโ register-component.js
โ
โโโ (main)/
โ โโโ [shorturl]/
โ โ โโโ page.js
โ โโโ shorten/
โ โ โโโ page.js
โ โ โโโ shorten.js
โ โโโ about/
โ โ โโโ page.js
โ โโโ contact/
โ โ โโโ page.js
โ โโโ page.js
โ
โโโ api/
โ โโโ ai-generate/
โ โ โโโ route.js
โ โโโ auth/
โ โ โโโ [...nextauth]/
โ โ โ โโโ route.js
โ โ โโโ register/
โ โ โโโ route.js
โ โโโ delete/
โ โ โโโ route.js
โ โโโ generate/
โ โ โโโ route.js
โ โโโ urls/
โ โโโ route.js
โ
โโโ middleware.js
lib/
โโโ auth.js
โโโ mongodb.js
โโโ normalizeUrl.js
| Category | Technologies |
|---|---|
| Framework | Next.js 16.1.6, App Router |
| Frontend | React 19.2.3, Tailwind CSS |
| Authentication | NextAuth 4, Credentials, Google OAuth |
| Sessions | JWT |
| Database | MongoDB, MongoDB Atlas |
| Database Driver | MongoDB Native Driver |
| AI | Google Generative AI |
| AI Models | Gemini 2.5 Flash, Gemini 3 Flash Preview |
| Forms | React Hook Form |
| Notifications | React Toastify |
| Icons | React Icons |
| Password Security | bcryptjs |
| Deployment | Vercel |
Create a .env.local file:
MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_secret
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXT_PUBLIC_HOST=http://localhost:3000
GEMINI_API_KEY=your_gemini_api_key| Variable | Purpose |
|---|---|
MONGODB_URI |
MongoDB connection string |
NEXTAUTH_SECRET |
NextAuth session/security secret |
NEXTAUTH_URL |
Application URL used by NextAuth |
GOOGLE_CLIENT_ID |
Google OAuth client ID |
GOOGLE_CLIENT_SECRET |
Google OAuth client secret |
NEXT_PUBLIC_HOST |
Public host used to construct shortened URLs |
GEMINI_API_KEY |
Google Generative AI API key |
git clone https://github.com/Developer-Sohail786/url-shortener-appcd url-shortener-appnpm installCreate:
.env.local
Add the required variables listed above.
npm run devThe application will be available at:
http://localhost:3000
npm run dev
npm run build
npm run start
npm run lintThe project is deployed using Vercel.
Frontend / Backend
โ
โผ
Vercel
Database
โ
โผ
MongoDB Atlas
AI
โ
โผ
Google Generative AI
For production deployment, configure:
- MongoDB Atlas connection string
- NextAuth secret
- Production NextAuth URL
- Google OAuth credentials
- Public application host
- Gemini API key
Planned improvements include:
- Rate limiting
- Analytics charts
- URL expiration
- Role-based access control
- Advanced usage statistics
- Full-stack Next.js application
- Next.js App Router
- React-based responsive interface
- Credentials + Google OAuth authentication
- JWT session management
- Secure password hashing with bcryptjs
- Server-side route protection
- User-scoped URL ownership
- MongoDB-backed URL management
- Atomic click tracking with MongoDB
$inc - AI-powered URL slug generation
- AI-generated webpage summaries
- Gemini model fallback strategy
- Deterministic fallback when AI is unavailable
- Server-side URL redirects
- Responsive URL management dashboard
- Vercel deployment
Sohail Khan
GitHub:
https://github.com/Developer-Sohail786# ๐ AI-Powered Secure URL Shortener
A full-stack URL shortening platform with authentication, click tracking, user-scoped URL management, and AI-powered slug and webpage summary generation.
The application allows authenticated users to securely create, manage, and track shortened URLs.
It also includes an AI Suggest feature that analyzes the destination webpage and uses Gemini to generate a meaningful short URL slug and concise summary.
Live App:
https://url-shortener-app-topaz.vercel.app
GitHub Repository:
https://github.com/Developer-Sohail786/url-shortener-app
- Create custom short URLs
- Prevent duplicate short URL codes
- Associate URLs with individual user accounts
- Store URL summaries
- Server-side authentication before URL creation
- Store click counts and timestamps
The application includes an AI Suggest feature powered by Google Gemini.
When a user enters a destination URL:
- The frontend sends the URL to
/api/ai-generate. - The server fetches the destination webpage.
- The webpage HTML is inspected.
- The application attempts to extract the
<title>tag. - If unavailable, it attempts to extract
og:title. - The URL and extracted title are sent to Gemini.
- Gemini generates:
- A concise webpage summary
- A clean, lowercase, hyphen-separated URL slug
The generated slug and summary are returned to the frontend.
Gemini 2.5 Flash
โ
โผ
If request fails
โ
โผ
Gemini 3 Flash Preview
โ
โผ
If both fail
โ
โผ
Deterministic fallback slug
+ generic summary
The final fallback generates a slug from the last segment of the URL and uses:
Generated from URL
as the fallback summary.
Authentication is implemented using NextAuth with JWT sessions.
- User registration
- Email and password login
- Password hashing with bcryptjs
- Case-normalized email lookup
- Invalid credential handling
- JWT-based sessions
- Google login
- Automatic user creation for first-time Google users
- MongoDB user ID stored in the JWT
- Authenticated user ID available through the session
User
โ
โผ
Login / Register
โ
โผ
NextAuth
โ
โโโ Credentials
โ
โโโ Google OAuth
โ
โผ
JWT Session
โ
โผ
Authenticated Application
Authenticated routes are protected using server-side session validation.
/shorten
Only authenticated users can access the URL management dashboard.
/login
/register
Authenticated users are redirected to:
/shorten
Route protection uses:
getServerSession()authOptionsredirect()force-dynamic- Server-side session validation
The current
app/middleware.jsdoes not perform route protection. Protection is implemented directly in the relevant server-rendered pages and API routes.
The /shorten page provides a dashboard for managing generated URLs.
- View all generated URLs
- View original destination URL
- View shortened URL
- View AI-generated summary
- View total clicks
- View creation date
- Copy shortened URL
- Delete URLs
- Responsive table layout
The dashboard fetches the user's URLs when the page loads and refreshes them when the browser window receives focus.
Shortened URLs support click tracking.
When a user opens a shortened URL:
/shorturl
โ
โผ
Find URL in MongoDB
โ
โผ
Increment clicks using $inc
โ
โผ
Redirect to original URL
MongoDB's atomic $inc operation is used to increment the click count.
Tracked fields include:
clickscreatedAtlastClickedAt
lastClickedAtis currently initialized when a URL is created, but the current redirect implementation does not update it when a click occurs.
Short URLs are handled through:
/[shorturl]
The redirect process:
- Receives the short URL parameter.
- Searches MongoDB for the matching
shorturl. - Returns
notFound()if the record does not exist. - Validates that the destination begins with
http. - Atomically increments the click counter.
- Redirects the user to the original destination.
Each URL is associated with the authenticated user's ID.
Example URL document:
{
"url": "https://example.com",
"shorturl": "example123",
"summary": "Example webpage",
"clicks": 0,
"userId": "user_id",
"createdAt": "Date",
"lastClickedAt": null
}The application ensures that:
- Users only retrieve their own URLs.
- Users can only delete their own URLs.
- URL deletion checks both the document ID and authenticated user's ID.
- Unauthenticated API requests are rejected.
Creates a new credentials-based user.
Handles NextAuth authentication requests.
Creates a shortened URL.
Requires:
url
shorturl
summary
Authentication is required.
Returns URLs belonging to the authenticated user.
Authentication is required.
Deletes an owned shortened URL.
Authentication is required.
Generates an AI-powered slug and webpage summary.
Input:
{
"url": "https://example.com"
}Output:
{
"success": true,
"summary": "Example webpage summary",
"slug": "example-page"
}If both Gemini models fail, the endpoint can return fallback data.
The project uses MongoDB with the database:
URL_Shorten
users
url
| Field | Description |
|---|---|
url |
Original destination URL |
shorturl |
Short URL identifier |
summary |
AI-generated or supplied summary |
clicks |
Total number of clicks |
userId |
ID of the URL owner |
createdAt |
URL creation timestamp |
lastClickedAt |
Last-click timestamp field |
User records can contain:
nameemailpasswordprovidercreatedAt
The application demonstrates several security practices.
- NextAuth authentication
- JWT sessions
- Password hashing with bcryptjs
- Google OAuth
- Server-side session validation
- User-scoped database queries
- Ownership verification during deletion
- Protected application routes
- Protected API operations
- Passwords are hashed before storage
- URL records contain ownership information
- Database operations are performed server-side
User enters URL
โ
โผ
AI Suggest button
โ
โผ
POST /api/ai-generate
โ
โผ
Fetch webpage HTML
โ
โผ
Extract <title>
โ
โผ
Fallback to og:title
โ
โผ
Build Gemini prompt
โ
โผ
Gemini 2.5 Flash
โ
โผ
Gemini 3 Flash Preview
โ
โผ
Deterministic fallback
โ
โผ
Return summary + slug
โ
โผ
Populate URL form
The AI prompt asks Gemini to generate a maximum 10-word summary and a clean lowercase, hyphen-separated slug using the URL and webpage title.
โโโโโโโโโโโโโโโโโโโโโโโโ
โ User โ
โโโโโโโโโโโโฌโโโโโโโโโโโโ
โ
โผ
โโโโโโโโโโโโโโโโโโโโโโโโ
โ Next.js โ
โ App Router โ
โโโโโโโโโโโโฌโโโโโโโโโโโโ
โ
โโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโ
โ โ โ
โผ โผ โผ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
โ NextAuth โ โ API Routes โ โ Pages / โ
โ + JWT โ โ โ โ Components โ
โโโโโโโโโโโโโโโ โโโโโโโโฌโโโโโโโ โโโโโโโโโโโโโโโ
โ
โโโโโโโโโโดโโโโโโโโโ
โ โ
โผ โผ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
โ MongoDB โ โ Gemini AI โ
โ Database โ โ โ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ
app/
โโโ (auth)/
โ โโโ login/
โ โ โโโ page.js
โ โ โโโ loginComponent.js
โ โโโ register/
โ โโโ page.js
โ โโโ register-component.js
โ
โโโ (main)/
โ โโโ [shorturl]/
โ โ โโโ page.js
โ โโโ shorten/
โ โ โโโ page.js
โ โ โโโ shorten.js
โ โโโ about/
โ โ โโโ page.js
โ โโโ contact/
โ โ โโโ page.js
โ โโโ page.js
โ
โโโ api/
โ โโโ ai-generate/
โ โ โโโ route.js
โ โโโ auth/
โ โ โโโ [...nextauth]/
โ โ โ โโโ route.js
โ โ โโโ register/
โ โ โโโ route.js
โ โโโ delete/
โ โ โโโ route.js
โ โโโ generate/
โ โ โโโ route.js
โ โโโ urls/
โ โโโ route.js
โ
โโโ middleware.js
lib/
โโโ auth.js
โโโ mongodb.js
โโโ normalizeUrl.js
| Category | Technologies |
|---|---|
| Framework | Next.js 16.1.6, App Router |
| Frontend | React 19.2.3, Tailwind CSS |
| Authentication | NextAuth 4, Credentials, Google OAuth |
| Sessions | JWT |
| Database | MongoDB, MongoDB Atlas |
| Database Driver | MongoDB Native Driver |
| AI | Google Generative AI |
| AI Models | Gemini 2.5 Flash, Gemini 3 Flash Preview |
| Forms | React Hook Form |
| Notifications | React Toastify |
| Icons | React Icons |
| Password Security | bcryptjs |
| Deployment | Vercel |
Create a .env.local file:
MONGODB_URI=your_mongodb_connection_string
NEXTAUTH_SECRET=your_secret
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXT_PUBLIC_HOST=http://localhost:3000
GEMINI_API_KEY=your_gemini_api_key| Variable | Purpose |
|---|---|
MONGODB_URI |
MongoDB connection string |
NEXTAUTH_SECRET |
NextAuth session/security secret |
NEXTAUTH_URL |
Application URL used by NextAuth |
GOOGLE_CLIENT_ID |
Google OAuth client ID |
GOOGLE_CLIENT_SECRET |
Google OAuth client secret |
NEXT_PUBLIC_HOST |
Public host used to construct shortened URLs |
GEMINI_API_KEY |
Google Generative AI API key |
git clone https://github.com/Developer-Sohail786/url-shortener-appcd url-shortener-appnpm installCreate:
.env.local
Add the required variables listed above.
npm run devThe application will be available at:
http://localhost:3000
npm run dev
npm run build
npm run start
npm run lintThe project is deployed using Vercel.
Frontend / Backend
โ
โผ
Vercel
Database
โ
โผ
MongoDB Atlas
AI
โ
โผ
Google Generative AI
For production deployment, configure:
- MongoDB Atlas connection string
- NextAuth secret
- Production NextAuth URL
- Google OAuth credentials
- Public application host
- Gemini API key
Planned improvements include:
- Rate limiting
- Analytics charts
- URL expiration
- Role-based access control
- Advanced usage statistics
- Full-stack Next.js application
- Next.js App Router
- React-based responsive interface
- Credentials + Google OAuth authentication
- JWT session management
- Secure password hashing with bcryptjs
- Server-side route protection
- User-scoped URL ownership
- MongoDB-backed URL management
- Atomic click tracking with MongoDB
$inc - AI-powered URL slug generation
- AI-generated webpage summaries
- Gemini model fallback strategy
- Deterministic fallback when AI is unavailable
- Server-side URL redirects
- Responsive URL management dashboard
- Vercel deployment
Sohail Khan