Django URL Shortener Project – Creating UI/UX

In the previous article, we created a fully functional URL shortener project in Django. However, in the current state, the project is more like a college hobby project. Let’s work on the project to further improve it. In this article, let’s aim to improve the UI/UX of the project and create a few more pages for various purposes such as:

  1. UI UX improvement: Let’s use Bootstrap to improve our website’s UI/UX experience. We will also create standard templates like the website’s header and footer.
  2. User Authentication: We will work on the user’s authentication.
  3. List Short URLs: Showing the list of short URLs created by the user.
  4. URL Analytics: Showing the number of times a short URL is hit.
  5. Expiration and Deletion: Implement functionality to set expiration dates for shortened URLs or allow users to delete URLs when they’re no longer needed.

UI UX Improvement:

We can typically divide our website into three parts:

  1. Header: It will display the navigation menu. It will also provide an option for users to sign up or sign in. We will create a header.html template to include a header on each page of the website.
  2. Website’s body which has the main content. We are going to create a template to generate this part dynamically.
  3. Footer: The footer typically displays the organization’s trademark and a few other pages such as Terms and Conditions, Privacy Policy, etc.

Let’s create a base.html file at the following location: url_shortener/templates/url_shortener/base.html , update it with the below code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}URL Shortener{% endblock %}</title>
    <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    {% include 'url_shortener/header.html' %}
    <div class="container">
        {% block content %}
        {% endblock %}

    {% include 'url_shortener/footer.html' %}

    <script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Our next step is to create a header.html file at the following location: url_shortener/templates/url_shortener/header.html , update it with the below code.

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="{% url 'index' %}">URL Shortener</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Show Short URLs</a>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sign Up</a>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sign In</a>

Now, we can create footer.html file at the following location: url_shortener/templates/url_shortener/footer.html , update it with the below code.

<footer class="footer mt-auto py-3 bg-light">
    <div class="container">
        <span class="text-muted">© 2024 URL Shortener. All rights reserved.</span>

Updating index.html file which we created in the previous article. The location of the file is url_shortener/templates/url_shortener/index.html

Let’s run the Django server by running the “python runserver” command. You can launch the website at, you can notice the improvement immediately. Here is an image for your reference.

User Authentication

Enabling user authentication in Django involves several steps. Here’s a simplified guide to get you started:

  1. Update Add 'django.contrib.auth' to the INSTALLED_APPS list.
  2. Run migrations: Execute python migrate to create the necessary database tables for authentication.
  3. URLs configuration: Set up URLs for authentication views. You can use Django’s built-in authentication views or create custom views.
  4. Templates: Create templates for login, logout, signup, password reset, etc., if you’re using built-in views.
  5. Views: Implement views for signup, login, logout, password reset, etc., if you’re creating custom views.
  6. Forms: Create forms for signup, login, and password reset, if needed.

Since user authentication is a big topic, let’s focus on this dedicatedly in our next article.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top