A full-stack URL shortener with an analytics dashboard — similar to Bitly — built using:
- Frontend: Vite + React + TailwindCSS
- Backend: Node.js + Express + TypeScript
- Database: MongoDB (Atlas)
- Deployment: Vercel (Frontend), Render/Railway (Backend)
- User Signup, Signin & JWT-based Auth
- Create short links (max 4 per user)
- Analytics dashboard for tracking visits
- URL search functionality
- Clean TailwindCSS UI
- Toast messages & Auth redirect
- Email field-based user ID & auth logic
| Layer | Stack |
|---|---|
| Frontend | React + Vite + TailwindCSS |
| Backend | Node.js + Express + TypeScript |
| Database | MongoDB Atlas |
| Auth | JWT |
| Deployment | Vercel (frontend), Railway/Render (backend) |
Use the following credentials to test the application:
- Email:
admin - Password:
password
cd frontend
npm install
npm run devcd backend
npm install
npm run devPORT=3000
MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_secret_keyRequest:
{
"email":"[email protected]",
"password":"password"
}Response:
{
"token": "the token",
"user": {
"id": "67f6*********************b",
"email": "[email protected]",
"message": "user signed up sucessfully"
}
}Request:
{
"email": "[email protected]",
"password": "your_password"
}Response:
{
"token": "the token",
"user": {
"id": "67f6*********************b",
"email": "[email protected]",
"message": "user logged in sucessfully"
}
}Headers:
Authorization: Bearer <token>
Request:
{
"originalUrl": "https://wikipedia.com/",
"customAlias": "myLink1234",
"expirationDate": "2025-06-01T00:00:00Z"
}Response:
{
"shortUrl": "http://localhost:3000/myLink1234",
"shortCode": "myLink1234"
}Headers:
Authorization: Bearer <token>
Response:
[
{
"_id": "67f62d210fd95393f231e332",
"userId": "67f51e5217f7d7b1c412ee57",
"originalUrl": "https://wikipedia.com/",
"shortCode": "myLink1234",
"customAlias": "myLink1234",
"expirationDate": "2025-06-01T00:00:00.000Z",
"totalClicks": 0,
"createdAt": "2025-04-09T08:17:37.076Z",
"__v": 0
}
]Headers:
Authorization: Bearer <token>
Request:
{
"originalUrl": "wikipedia.com"
}Response:
{
"results": [
{
"_id": "67f62d210fd95393f231e332",
"userId": "67f51e5217f7d7b1c412ee57",
"originalUrl": "https://wikipedia.com/",
"shortCode": "myLink1234",
"customAlias": "myLink1234",
"expirationDate": "2025-06-01T00:00:00.000Z",
"totalClicks": 0,
"createdAt": "2025-04-09T08:17:37.076Z",
"__v": 0
}
]
}cd frontend
npm install
npm run devTo run the frontend locally do this