QuickShort - Tiny Links, Big Impact! 🚀

A simple and efficient URL Shortener App built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. This application allows users to shorten long URLs and redirect to the original URL when accessing the shortened link.

📋 Table of Contents

1. 🕸️ Features
2. ⚙️ Tech Stack
3. 📂 Project Structure
4. 🤸 Quick Start
5. 🔗 API Endpoints
6. 🔭 Deployment
7. 🪴 Future Enhancements
8. 🤝 Contributing
9. 📄 License
10. 📩 Contact

🚀 Features

• 🔗 Shorten long URLs with a unique identifier
• 🚀 Instant redirection to the original URL
• 📊 Track the number of clicks for each shortened link
• 🌐 Responsive and user-friendly UI
• 🎨 Styled with Tailwind CSS

🛠️ Tech Stack

Frontend

• React.js (Vite for fast development)
• Tailwind CSS (for modern UI styling)
• React Query (for state management)
• Axios (for API requests)

Backend

• Node.js & Express.js (REST API)
• MongoDB & Mongoose (Database & Schema management)
• nanoid (for generating unique short URLs)
• dotenv & cors (environment configuration & cross-origin handling)

🏗️ Project Structure

/url-shortener
 ├── client/        (React.js Frontend)
 ├── server/        (Express.js Backend)
 ├── public/        (Static Assets)
 ├── package.json   (Project Dependencies)
 ├── .gitignore     (Git Ignore File)
 ├── LICENSE        (Project License)
 ├── README.md      (Project Documentation)

🤸 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git - for version control
• Node.js - for running JavaScript on the server
• pnpm - for package management

1️⃣ Clone the Repository

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

2️⃣ Backend Setup (Node.js & Express)

cd server
pnpm install

🔹 Create a .env file in the server/ directory

CLIENT_API = <your_frontend_api_url>;
SERVER_API = <your_backend_api_url>;
MONGO_URI = <your_mongodb_connection_string>;
PORT = 5000;

🔹 Start the Backend Server

pnpm dev

3️⃣ Frontend Setup (React.js)

cd ../client
pnpm install

🔹 Create a .env file in the client/ directory

VITE_SERVER_API = <your_backend_api_url>;

🔹 Start the Frontend Server

pnpm dev

4️⃣ Open the App

Visit: http://localhost:5173

📌 API Endpoints

1️⃣ Shorten a URL

POST /short

{
  "longUrl": "https://example.com"
}

Response:

{
  "shortUrl": "http://localhost:5000/abc1234"
}

2️⃣ Redirect to Original URL

GET /:shortId

When visiting http://localhost:5000/abc1234, it redirects to https://example.com.

🌍 Deployment

• Frontend: Vercel
• Backend: Render
• Database: MongoDB Atlas

🔥 Future Enhancements

✅ Add User Authentication (JWT)
✅ Allow Custom Short URLs
✅ Track Click Analytics
✅ Create a Dashboard for Managing URLs

🙌 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

To contribute:

Fork the repository
Create your feature branch (git checkout -b feature/your-feature)
Commit your changes (git commit -m 'feat: add your feature')
Push to the branch (git push origin feature/your-feature)

📜 License

This project is licensed under the Apache License - see the LICENSE file for details.

📩 Contact

For any questions or suggestions, feel free to reach out at laxmanrathod.dev@gmail.com.