🔗 URL Shortener

A simple full-stack URL Shortener that converts long URLs into short, shareable links.

I built this project to get hands-on experience with connecting a frontend to a backend API, working with a database, and understanding how a complete web application works.

✨ Features

• Shorten long URLs into short links
• Generate random 6-character short codes
• Create custom short codes
• Check whether a custom code is already in use
• Validate URLs
• Redirect short URLs to the original URL
• Track the number of clicks
• View URL history
• Set an expiration time for links
• Copy shortened URLs with one click
• Error messages for invalid or empty input
• Responsive design for different screen sizes

🛠️ Technologies Used

Backend

• Python
• FastAPI
• Uvicorn
• Pydantic

Database

• SQLite
• SQLAlchemy

Frontend

• HTML
• CSS
• JavaScript

Template Engine

• Jinja2

🔄 How It Works

1. The user enters a long URL.
2. JavaScript sends the URL to the FastAPI backend.
3. FastAPI validates the URL and generates a short code.
4. The URL and short code are stored in SQLite using SQLAlchemy.
5. The backend sends the shortened URL back to the frontend.
6. When the short URL is opened, FastAPI finds the original URL in the database.
7. The click count is updated and the user is redirected to the original URL.

📁 Project Structure

URL-shortner/
│
├── main.py
├── database.py
├── models.py
├── requirements.txt
├── .gitignore
│
└── templates/
    └── index.html

    ## 🌐 Live Demo

The project is deployed and available online:

https://url-shortner-cnak.onrender.com

## 📚 What I Learned

This project helped me understand how different parts of a web application work together.

I learned how to build APIs using FastAPI, work with SQLite and SQLAlchemy, connect JavaScript with a backend API, validate user input, handle errors, and debug issues during development.

I also learned how to deploy a Python web application and understand the difference between running an application locally and running it on a public server.

Most importantly, I got a better understanding of how the frontend, backend, API, and database communicate with each other.