URL Shortener App

Overview

A full-stack web application that allows users to shorten long URLs and get concise, shareable short links. When visiting a short URL, users are redirected to the original long URL.

The app also includes an Admin Dashboard to view all shortened URLs and track their usage statistics.

---

Features

• User-friendly form to submit long URLs and receive short URLs.
• Redirect functionality from short URLs to original URLs.
• Admin dashboard to:
  • List all shortened URLs.
  • Track and display how many times each short URL has been visited.
• Secure admin authentication with JWT-based sessions.
• RESTful API backend with Node.js, Express, and MongoDB.
• React frontend with responsive UI.

---

Tech Stack

• Frontend: React, Axios
• Backend: Node.js, Express, Mongoose (MongoDB ORM)
• Database: MongoDB
• Authentication: JWT tokens for admin session management

---

Prerequisites

• Node.js v16+
• MongoDB
• npm package manager

---

Installation

1. Clone the repository

   git clone https://github.com/vkkd12/URL_Shortener-App.git
   cd url-shortener

2. Install backend dependencies

   cd server
   npm install

3. Install frontend dependencies

   cd ../client
   npm install

4. Configure environment variables

   Create .env files in server/ and client/ directories with the following variables:

   server/.env

   PORT=5500
   MONGO_URI=<your-mongodb-uri>
   BASE_URL=http://localhost:5500
   ADMIN_SECRET=your_admin_secret_here
   JWT_SECRET=your_jwt_secret_here
   

   client/.env

   REACT_APP_API_URL=http://localhost:5000
   REACT_APP_ADMIN_SECRET=your_admin_secret_here
   

   Replace placeholders with your actual values.
   MONGO_URI is your MongoDB connection string.
   ADMIN_SECRET and JWT_SECRET are secrets for admin authentication and JWT signing.

---

Running the Application

Start backend server

cd server
npm run dev

Backend will run on http://localhost:5500 by default.

Start frontend development server

cd client
npm start

Frontend will run on http://localhost:3000 and proxy API requests to the backend.

---

Usage

• User: Submit a long URL in the form and receive a short URL.
• Redirect: Visit the short URL to be redirected to the original.
• Admin:
  • Log in on the admin page using the admin token (password).
  • View a list of all shortened URLs with their click counts.
  • Admin session lasts 1 hour via JWT authentication.

---

API Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/shorten	Shorten a long URL	No
GET	/:shortcode	Redirect to the original URL	No
POST	/api/auth/admin-login	Admin login, returns JWT token	No
GET	/api/admin/urls	Get all shortened URLs with stats	Yes (JWT)

---

Project Structure

url-shortener/
├─ client/                 # React frontend
│  ├─ src/
│  │  ├─ components/       # Reusable UI components
│  │  ├─ pages/            # Page components (Admin page etc.)
│  │  └─ App.jsx           # Main React app
├─ server/                 # Express backend
│  ├─ controllers/         # Request handlers
│  ├─ middleware/          # Auth middleware (JWT validation etc.)
│  ├─ models/              # Mongoose schemas
│  ├─ routes/              # API route definitions
│  ├─ config/              # DB config
│  └─ server.js            # Express server setup
├─ .env                    # Environment variables (not committed)
└─ README.md               # This documentation file

---

Security Considerations

• Admin routes are protected with JWT tokens issued at login.
• Tokens expire after 1 hour; frontend handles token storage and expiration.
• Sensitive secrets are stored in .env files and should not be committed.

---

Deployment Tips

• Build React frontend for production using npm run build inside client/.
• Serve frontend static files via backend or a CDN.
• Use environment variables securely on the server.
• Use HTTPS and secure cookies in production.
• Monitor and rotate JWT and admin secrets regularly.

---

License

MIT License

---

Author

VIVIDH KANAUJIA

---