SnipUrl | MINI PROJECT

A full-stack URL Shortener web application built using React (Vite) for the frontend and Spring Boot for the backend.

The application allows users to shorten long URLs into compact short links and redirect users back to the original URLs. It also tracks URL usage statistics such as click count.

---

Features

• Shorten long URLs
• Generate unique short codes
• Redirect shortened URLs to original URLs
• Track click count statistics
• REST API based backend
• Responsive frontend UI
• Input validation and error handling
• Localhost development setup

---

Tech Stack

Frontend

• React
• Vite
• Axios
• CSS

Backend

• Spring Boot
• Spring Web
• Spring Data JPA
• Hibernate
• Maven

Database

• H2 Database (Local Development)

---

Project Structure

URL-Shortener/
│
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.js
│
├── backend/
│   ├── src/
│   ├── pom.xml
│   └── application.properties
│
└── README.md

---

API Endpoints

Shorten URL

POST /shorten

Request Body

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

Response

{
  "shortUrl": "http://localhost:8080/abc123",
  "shortCode": "abc123"
}

---

Redirect URL

GET /{shortCode}

Redirects to original URL.

---

URL Statistics

GET /stats/{shortCode}

Response

{
  "shortCode": "abc123",
  "originalUrl": "https://example.com",
  "clickCount": 5,
  "shortUrl": "http://localhost:8080/abc123"
}

---

How to Run Locally

Prerequisites

Install:

• Node.js (v18 or above)
• Java 17
• Maven
• Git

---

Backend Setup

Open terminal inside:

backend

Run:

mvn clean install
mvn spring-boot:run

Backend runs on:

http://localhost:8080

Health check:

http://localhost:8080/health

---

Frontend Setup

Open terminal inside:

frontend

Install dependencies:

npm install

Run frontend:

npm run dev

Frontend runs on:

http://localhost:5173

---

Error Handling

The application includes:

• Global exception handling
• URL validation
• Invalid short code handling
• Backend connectivity checks

---

Future Improvements

Planned future improvements include:

• Deployment of frontend and backend to cloud platforms
• PostgreSQL integration for production database support
• User authentication and account management
• Custom short URL aliases
• URL expiration support
• Analytics dashboard
• QR code generation for shortened URLs
• Rate limiting and security enhancements
• Docker containerization
• CI/CD pipeline integration

---

Notes

• Current setup is optimized for localhost development.
• H2 database is currently used for local storage.
• Production deployment configuration will be added in future updates.

---

Author

Kush Dani