Video Demo: https://youtu.be/4CZeW3bM17c
Live App: https://vinaycode7.pythonanywhere.com/
Certificate that I got: CS50 Certificate
- Python
- Flask
- SQL (MySQL / SQLITE)
- Jinja
- JavaScript
- HTML
- Bootstrap
This is a simple URL shortener project built with Python and Flask. The application allows users to shorten long URLs into custom short URLs and stores the data on a SQLITE databse. It's a lightweight and easy-to-use solution for generating short links.
It uses Jinja as templating language for dynamic HTML pages. The project also uses CS50's own SQL library to interact with the database and perform queries.
- Very easy to use and have minimal UI and styles.
- Create custom Short URLs for any link you want.
- Collection of all short URLs are displayed in a single page.
- Shows how many times a link has been visited using the custom URL.
- Shows how long ago the link was visited using the custom URL.
- Prerequisites: Python should be installed on the system and pip command should be availabe to use from anywhere.
-
Clone the repository using below command or download and extract the ZIP file.
git clone https://github.com/your-username/url-shortener-app.git
-
Open the project folder containing
app.py
in your preferred code editor. Open the terminal and make sure your current directory is one the that contains all the files and folders such asstatic
,templates
,app.py
,helpers.py
etc. -
Now create and activate a virtual environment using this command:
For Windows,
python -m venv .venv .\.venv\Scripts\activate
For Mac/Linux
python3 -m venv .venv source .venv/bin/activate
Note: Make sure that you terminal prompt starts with something like
(.venv)
, this makes sure that your virtual environment is activated.Learn more about virtual environment here: Virtual Environment
-
This project only requires two dependencies i.e.
Flask
andcs50
. To install these dependencies, just use the following command:pip install Flask cs50
To check if all dependencies are installed just use:
pip list
-
Now everything is done and you can use the following command to run your app:
python app.py # For Windows python3 app.py # For Mac/Linux
-
Your app now must be running on
127.0.0.1:5000
orlocalhost:5000
.
-
Import Statements: The code imports Flask and cs50 library for managing routes and database, also uses datetime module for getting current date and time. The helpers import statement imports a piece of code from helpers.py discussed later.
-
The Flask app is initialized with the name of the current module (name).
-
The code sets up a connection to an SQLite database named "shortUrls.db" using the cs50.SQL class.
-
Index Route (Home Page): This route ("/") handles both GET and POST requests. On a GET request, it renders an HTML template called "index.html" and passes in data including the fullUrl, shortUrl, and message parameters.
On a POST request, it retrieves the input full URL and short URL. If the short URL is not alphanumeric, it redirects back to the index page with an "invalid" message. If the short URL is already taken, it redirects back with a "taken" message. Otherwise, it inserts the URL data into the database and redirects back to the index page with a "success" message.
-
Database Route: This route ("/database") fetches all data from the database and orders it by the "lastClicked" timestamp in descending order. It then renders an HTML template called "database.html" and passes in the fetched data and a helper function time_ago.
-
Short URL Route: This dynamic route ("/<short_url>") is used to redirect users based on the provided short URL. It retrieves the corresponding data from the database. If no data is found, it displays a "URL Not Found" message. If the difference between the current time and the last clicked timestamp is greater than 2 seconds, it updates the click count and last clicked timestamp in the database. Finally, it performs a redirect to the original full URL associated with the provided short URL.
This file contains a single function time_ago
which is used to calculate the time difference between the last click and current time of a short url.
This is a SQLite database used for storing the short url data. It contains a single table named urlData
in the following form.
shortUrl | fullUrl | clickCount | LastClicked |
---|---|---|---|
short Link1 | full Link1 | count value | date and time |
short Link2 | full Link2 | count value | date and time |
... | ... | ... | ... |
This file provieds extra features added to the form in index.html
, such as feedback messages for invalid or taken urls, automatically filling the short url. If user has selected some url and provided full url then filling it again for some change.
Also provied copy
functionality to user.
This is a base file for creating dynamic html pages, this file is further used by index.html
and database.html
to provide the content that should be displayed.
This is the main page (home page) that the user sees. It is styled using bootstrap and contains a form which makes a POST request to the server. It also contains <script> tag to refer the script.js
file for providing user friendly functions.
This page contains a table and gets dynamic data from server which is then displayed to the user.
- Implement user authentication to make private urls and database. So that users can login and save their urls in their own database.
- Urls from public database should be removed after 24hrs of inactivity.
If you find any bugs or have suggestions for improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.
Thanks for reading...