Skip to content

A full-stack URL Shortener app using the MERN stack. The frontend is built with Vite, React, TypeScript, and Tailwind CSS, while the backend uses Node.js, Express, and MongoDB. Features include shortening long URLs, custom short URLs, and click tracking. Deployed with Vercel for seamless performance and user-friendly interface.

Notifications You must be signed in to change notification settings

YoosufAathil/url-shortener

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

URL Shortener

UI Screenshot This is a full-stack URL Shortener application built using the MERN stack (MongoDB, Express, React, Node.js). The frontend is developed with Vite+React+TypeScript, and the backend uses Node.js, Express, and MongoDB.

Features

  • Shorten URLs: Convert long URLs into short, manageable links.
  • Custom URLs: Create memorable custom short URLs.
  • Analytics: Track the number of clicks on your shortened URLs.
  • User-Friendly: Intuitive and easy-to-use interface with Tailwind CSS styling.

Demo

Live Demo

Installation

Prerequisites

  • Node.js
  • MongoDB
  • npm (Node Package Manager)

Clone the Repository

git clone https://github.com/your-username/url-shortener.git
cd url-shortener

Install Dependencies

Client

cd client
npm install

Server

cd ../server
npm install

Running the App

Start the Server

cd server
npm start

Start the Client

cd ../client
npm run dev

Environment Variables

Create a .env file in the server directory and add the following environment variables:

MONGODB_URI=your_mongodb_connection_string
PORT=5001

Deployment

Deploying with Vercel

Client

  1. Sign in to Vercel.
  2. Import the client directory from your GitHub repository.
  3. Set the framework preset to Vite.
  4. Set the build command to npm run build.
  5. Set the output directory to dist.
  6. Deploy the project.

Server

  1. Create a new project in Vercel for the server.
  2. Import the server directory from your GitHub repository.
  3. Set the framework preset to Node.js.
  4. Add necessary environment variables (e.g., MONGODB_URI).
  5. Deploy the project.

Usage

  1. Navigate to the deployed client application.
  2. Enter a long URL in the input field.
  3. Click "Shorten URL".
  4. Use the generated short URL to share and track clicks.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

About

A full-stack URL Shortener app using the MERN stack. The frontend is built with Vite, React, TypeScript, and Tailwind CSS, while the backend uses Node.js, Express, and MongoDB. Features include shortening long URLs, custom short URLs, and click tracking. Deployed with Vercel for seamless performance and user-friendly interface.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published