Skip to content

About

AI-powered full-stack URL shortener with Gemini slug generation, webpage summaries, authentication, user-scoped URL management, and click tracking.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

ย 

History

40 Commits

Folders and files

NameName
Last commit message
Last commit date
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ”— 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 Demo

Live App:
https://url-shortener-app-topaz.vercel.app

GitHub Repository:
https://github.com/Developer-Sohail786/url-shortener-app


โœจ Core Features

๐Ÿ”— Secure URL Generation

  • 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

๐Ÿค– AI-Powered URL Suggestions

The application includes an AI Suggest feature powered by Google Gemini.

When a user enters a destination URL:

  1. The frontend sends the URL to /api/ai-generate.
  2. The server fetches the destination webpage.
  3. The webpage HTML is inspected.
  4. The application attempts to extract the <title> tag.
  5. If unavailable, it attempts to extract og:title.
  6. The URL and extracted title are sent to Gemini.
  7. Gemini generates:
    • A concise webpage summary
    • A clean, lowercase, hyphen-separated URL slug

The generated slug and summary are returned to the frontend.

๐Ÿ”„ AI Model Fallback

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

Authentication is implemented using NextAuth with JWT sessions.

Credentials Authentication

  • User registration
  • Email and password login
  • Password hashing with bcryptjs
  • Case-normalized email lookup
  • Invalid credential handling
  • JWT-based sessions

Google OAuth

  • Google login
  • Automatic user creation for first-time Google users
  • MongoDB user ID stored in the JWT
  • Authenticated user ID available through the session

Authentication Flow

User
  โ”‚
  โ–ผ
Login / Register
  โ”‚
  โ–ผ
NextAuth
  โ”‚
  โ”œโ”€โ”€ Credentials
  โ”‚
  โ””โ”€โ”€ Google OAuth
  โ”‚
  โ–ผ
JWT Session
  โ”‚
  โ–ผ
Authenticated Application

๐Ÿ›ก๏ธ Route Protection

Authenticated routes are protected using server-side session validation.

Protected Routes

/shorten

Only authenticated users can access the URL management dashboard.

Authentication-only Routes

/login
/register

Authenticated users are redirected to:

/shorten

Implementation

Route protection uses:

  • getServerSession()
  • authOptions
  • redirect()
  • force-dynamic
  • Server-side session validation

The current app/middleware.js does not perform route protection. Protection is implemented directly in the relevant server-rendered pages and API routes.


๐Ÿ“Š URL Dashboard

The /shorten page provides a dashboard for managing generated URLs.

Dashboard Features

  • 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.


๐Ÿ“ˆ Click Tracking

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:

  • clicks
  • createdAt
  • lastClickedAt

lastClickedAt is currently initialized when a URL is created, but the current redirect implementation does not update it when a click occurs.


๐Ÿ”€ URL Redirect System

Short URLs are handled through:

/[shorturl]

The redirect process:

  1. Receives the short URL parameter.
  2. Searches MongoDB for the matching shorturl.
  3. Returns notFound() if the record does not exist.
  4. Validates that the destination begins with http.
  5. Atomically increments the click counter.
  6. Redirects the user to the original destination.

๐Ÿ‘ค Authorization & User Ownership

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.

๐Ÿ”Œ API Routes

Authentication

POST /api/auth/register

Creates a new credentials-based user.

/api/auth/[...nextauth]

Handles NextAuth authentication requests.


URL Management

POST /api/generate

Creates a shortened URL.

Requires:

url
shorturl
summary

Authentication is required.

GET /api/urls

Returns URLs belonging to the authenticated user.

Authentication is required.

POST /api/delete

Deletes an owned shortened URL.

Authentication is required.


AI

POST /api/ai-generate

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.


๐Ÿ—„๏ธ Database

The project uses MongoDB with the database:

URL_Shorten

Collections

users
url

URL Collection

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

Users Collection

User records can contain:

  • name
  • email
  • password
  • provider
  • createdAt

๐Ÿ”’ Security

The application demonstrates several security practices.

Authentication Security

  • NextAuth authentication
  • JWT sessions
  • Password hashing with bcryptjs
  • Google OAuth

Authorization Security

  • Server-side session validation
  • User-scoped database queries
  • Ownership verification during deletion
  • Protected application routes
  • Protected API operations

Data Security

  • Passwords are hashed before storage
  • URL records contain ownership information
  • Database operations are performed server-side

๐Ÿง  AI Architecture

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.


๐Ÿ—๏ธ Application Architecture

                    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                    โ”‚        User          โ”‚
                    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
                               โ–ผ
                    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                    โ”‚      Next.js         โ”‚
                    โ”‚     App Router       โ”‚
                    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
              โ”‚                โ”‚                โ”‚
              โ–ผ                โ–ผ                โ–ผ
       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
       โ”‚  NextAuth   โ”‚  โ”‚ API Routes  โ”‚  โ”‚   Pages /   โ”‚
       โ”‚    + JWT    โ”‚  โ”‚             โ”‚  โ”‚ Components  โ”‚
       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
                      โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                      โ”‚                 โ”‚
                      โ–ผ                 โ–ผ
               โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
               โ”‚   MongoDB   โ”‚   โ”‚  Gemini AI  โ”‚
               โ”‚   Database  โ”‚   โ”‚             โ”‚
               โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

๐Ÿ“‚ Important Project Files

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

๐Ÿ› ๏ธ Tech Stack

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

๐Ÿ” Environment Variables

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

Environment Variable Purpose

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

๐Ÿš€ Installation & Setup

1. Clone the repository

git clone https://github.com/Developer-Sohail786/url-shortener-app

2. Enter the project

cd url-shortener-app

3. Install dependencies

npm install

4. Configure environment variables

Create:

.env.local

Add the required variables listed above.

5. Start the development server

npm run dev

The application will be available at:

http://localhost:3000

๐Ÿ“ฆ NPM Scripts

npm run dev
npm run build
npm run start
npm run lint

โ˜๏ธ Deployment

The project is deployed using Vercel.

Production Services

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

๐Ÿ”ฎ Future Improvements

Planned improvements include:

  • Rate limiting
  • Analytics charts
  • URL expiration
  • Role-based access control
  • Advanced usage statistics

โญ Project Highlights

  • 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

๐Ÿ‘จโ€๐Ÿ’ป Author

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 Demo

Live App:
https://url-shortener-app-topaz.vercel.app

GitHub Repository:
https://github.com/Developer-Sohail786/url-shortener-app


โœจ Core Features

๐Ÿ”— Secure URL Generation

  • 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

๐Ÿค– AI-Powered URL Suggestions

The application includes an AI Suggest feature powered by Google Gemini.

When a user enters a destination URL:

  1. The frontend sends the URL to /api/ai-generate.
  2. The server fetches the destination webpage.
  3. The webpage HTML is inspected.
  4. The application attempts to extract the <title> tag.
  5. If unavailable, it attempts to extract og:title.
  6. The URL and extracted title are sent to Gemini.
  7. Gemini generates:
    • A concise webpage summary
    • A clean, lowercase, hyphen-separated URL slug

The generated slug and summary are returned to the frontend.

๐Ÿ”„ AI Model Fallback

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

Authentication is implemented using NextAuth with JWT sessions.

Credentials Authentication

  • User registration
  • Email and password login
  • Password hashing with bcryptjs
  • Case-normalized email lookup
  • Invalid credential handling
  • JWT-based sessions

Google OAuth

  • Google login
  • Automatic user creation for first-time Google users
  • MongoDB user ID stored in the JWT
  • Authenticated user ID available through the session

Authentication Flow

User
  โ”‚
  โ–ผ
Login / Register
  โ”‚
  โ–ผ
NextAuth
  โ”‚
  โ”œโ”€โ”€ Credentials
  โ”‚
  โ””โ”€โ”€ Google OAuth
  โ”‚
  โ–ผ
JWT Session
  โ”‚
  โ–ผ
Authenticated Application

๐Ÿ›ก๏ธ Route Protection

Authenticated routes are protected using server-side session validation.

Protected Routes

/shorten

Only authenticated users can access the URL management dashboard.

Authentication-only Routes

/login
/register

Authenticated users are redirected to:

/shorten

Implementation

Route protection uses:

  • getServerSession()
  • authOptions
  • redirect()
  • force-dynamic
  • Server-side session validation

The current app/middleware.js does not perform route protection. Protection is implemented directly in the relevant server-rendered pages and API routes.


๐Ÿ“Š URL Dashboard

The /shorten page provides a dashboard for managing generated URLs.

Dashboard Features

  • 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.


๐Ÿ“ˆ Click Tracking

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:

  • clicks
  • createdAt
  • lastClickedAt

lastClickedAt is currently initialized when a URL is created, but the current redirect implementation does not update it when a click occurs.


๐Ÿ”€ URL Redirect System

Short URLs are handled through:

/[shorturl]

The redirect process:

  1. Receives the short URL parameter.
  2. Searches MongoDB for the matching shorturl.
  3. Returns notFound() if the record does not exist.
  4. Validates that the destination begins with http.
  5. Atomically increments the click counter.
  6. Redirects the user to the original destination.

๐Ÿ‘ค Authorization & User Ownership

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.

๐Ÿ”Œ API Routes

Authentication

POST /api/auth/register

Creates a new credentials-based user.

/api/auth/[...nextauth]

Handles NextAuth authentication requests.


URL Management

POST /api/generate

Creates a shortened URL.

Requires:

url
shorturl
summary

Authentication is required.

GET /api/urls

Returns URLs belonging to the authenticated user.

Authentication is required.

POST /api/delete

Deletes an owned shortened URL.

Authentication is required.


AI

POST /api/ai-generate

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.


๐Ÿ—„๏ธ Database

The project uses MongoDB with the database:

URL_Shorten

Collections

users
url

URL Collection

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

Users Collection

User records can contain:

  • name
  • email
  • password
  • provider
  • createdAt

๐Ÿ”’ Security

The application demonstrates several security practices.

Authentication Security

  • NextAuth authentication
  • JWT sessions
  • Password hashing with bcryptjs
  • Google OAuth

Authorization Security

  • Server-side session validation
  • User-scoped database queries
  • Ownership verification during deletion
  • Protected application routes
  • Protected API operations

Data Security

  • Passwords are hashed before storage
  • URL records contain ownership information
  • Database operations are performed server-side

๐Ÿง  AI Architecture

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.


๐Ÿ—๏ธ Application Architecture

                    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                    โ”‚        User          โ”‚
                    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
                               โ–ผ
                    โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                    โ”‚      Next.js         โ”‚
                    โ”‚     App Router       โ”‚
                    โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
              โ”‚                โ”‚                โ”‚
              โ–ผ                โ–ผ                โ–ผ
       โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
       โ”‚  NextAuth   โ”‚  โ”‚ API Routes  โ”‚  โ”‚   Pages /   โ”‚
       โ”‚    + JWT    โ”‚  โ”‚             โ”‚  โ”‚ Components  โ”‚
       โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                               โ”‚
                      โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
                      โ”‚                 โ”‚
                      โ–ผ                 โ–ผ
               โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
               โ”‚   MongoDB   โ”‚   โ”‚  Gemini AI  โ”‚
               โ”‚   Database  โ”‚   โ”‚             โ”‚
               โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

๐Ÿ“‚ Important Project Files

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

๐Ÿ› ๏ธ Tech Stack

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

๐Ÿ” Environment Variables

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

Environment Variable Purpose

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

๐Ÿš€ Installation & Setup

1. Clone the repository

git clone https://github.com/Developer-Sohail786/url-shortener-app

2. Enter the project

cd url-shortener-app

3. Install dependencies

npm install

4. Configure environment variables

Create:

.env.local

Add the required variables listed above.

5. Start the development server

npm run dev

The application will be available at:

http://localhost:3000

๐Ÿ“ฆ NPM Scripts

npm run dev
npm run build
npm run start
npm run lint

โ˜๏ธ Deployment

The project is deployed using Vercel.

Production Services

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

๐Ÿ”ฎ Future Improvements

Planned improvements include:

  • Rate limiting
  • Analytics charts
  • URL expiration
  • Role-based access control
  • Advanced usage statistics

โญ Project Highlights

  • 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

๐Ÿ‘จโ€๐Ÿ’ป Author

Sohail Khan

GitHub:
https://github.com/Developer-Sohail786

About

AI-powered full-stack URL shortener with Gemini slug generation, webpage summaries, authentication, user-scoped URL management, and click tracking.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages