A full-stack URL shortener application built using the MERN stack (MongoDB, Express.js, React, Node.js) with authentication, stats tracking, and a responsive UI.
🚀 Deployed Frontend: https://rudraksh-url-shortner.vercel.app
🛠️ Deployed Backend: https://url-shortner-xclh.onrender.com
This is a full-featured URL shortening application where users can:
- Shorten long URLs into compact ones
- View analytics such as number of clicks and creation date
- Register and log in securely
- See their own history of shortened URLs
- Access public stats for any short URL code
- User registration and login
- JWT-based protected routes
- Auth context for frontend auth flow
- Authenticated users can generate short links
- Automatically generates a unique short code
- Links are saved with user reference and analytics
- Check original URL, click count, and creation date using the short code
- Paginated history of URLs shortened by the logged-in user
- Includes click count, original & short URLs, and timestamps
- Built with Tailwind CSS and React
- Mobile-first, clean design with proper word-breaking for long URLs
| Layer | Tech |
|---|---|
| Frontend | React, Vite, Tailwind CSS |
| Backend | Node.js, Express.js |
| Database | MongoDB Atlas |
| Auth | JWT + bcryptjs |
| Deployment | Vercel (Frontend), Render (Backend) |
- Node.js v18+
- MongoDB Atlas account
- Vercel + Render accounts (for deployment)
Clone the repo:
git clone https://github.com/your-username/url-shortener.git
cd url-shortener/server
npm install
Create a .env file:
PORT=5000
BASE_URL=https://url-shortner-xclh.onrender.com
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
npm run dev
cd ../client
npm install
npm run dev