Skip to content

A simple and fast URL shortener built with Next.js, Tailwind CSS, and MongoDB.

Notifications You must be signed in to change notification settings

anishasingh-dev/bitlinks

Repository files navigation

🔗 URL Shortener Web Application

A simple and fast URL Shortener web application built using Next.js , Tailwind CSS , and MongoDB. The application allows users to generate short URLs and automatically redirect them to the original long URLs.

This project uses MongoDB for persistent data storage and Next.js App Router for both frontend and backend API handling.


🚀 Features

  • Shorten long URLs instantly

  • Redirect short URLs to original links

  • Dynamic routing for short URLs

  • Server-side API handling using Next.js

  • Data persistence with MongoDB

  • Clean, responsive, and modern UI

  • Fast performance with Next.js App Router


🛠️ Tech Stack

  • Framework: Next.js (App Router)

  • Styling: Tailwind CSS

  • Database: MongoDB

  • Language: JavaScript

  • Backend: Next.js API Routes

  • Runtime: Node.js


📦 Installation & Setup

Clone the repository

git clone https://github.com/anishasingh-dev/bitlinks.git

#Navigate to the project directory
cd bitlinks

#Install dependencies
npm install

#Setup environment variables
#Create a .env.local file in the root directory:
MONGODB_URI=your_mongodb_connection_string
NEXT_PUBLIC_BASE_URL=http://localhost:3000

#Start the development server
npm run dev

#Open the application in your browser
http://localhost:3000

🔁 How It Works

  • User enters a long URL

  • Request is sent to /api/generate

  • A unique short URL is generated

  • URL mapping is stored in MongoDB

  • Visiting the short URL redirects to the original link

📸 Screenshots

Home page

Home Page

Shorten Page

Shorten page

After Saving

After Saving

Saved Page

Saved Page

🎯 Project Motivation

This project was built to strengthen my understanding of:

  • Next.js App Router architecture

  • Full-stack development using a single framework

  • Server-side API routes

  • MongoDB integration

  • Dynamic routing and redirects

  • Real-world web application workflows

🔮 Future Improvements

  • Custom short URL aliases

  • Click analytics and tracking

  • URL expiration feature

  • Authentication system

  • Deploy the application online

👩‍💻 Author

Anisha B.Tech Computer Science Student

Interests: Data Structures & Algorithms, Web Development, Open Source, and Problem Solving

About

A simple and fast URL shortener built with Next.js, Tailwind CSS, and MongoDB.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published