Building an Invoicing Application

(Part 1)

This article will show you how to use Python, Django, and Bootstrap to build an invoicing application from the ground up. If you have an interest in python, you will learn these valuable development skills through this awesome Python project:

  • How to create a PDF from Django(applicable to dashboards and the development of a SaaS web app)
  • How to build a dashboard application(Django CRUD-[Create, Read, Update & Delete] development.)
  • Including PDF attachments in emails sent from Django applications.

Like many of my tutorials, it features a follow-along youtube video (how to create an invoicing app with Django). The video shows step-by-step how to write the code. There is also a GitHub repository of the code ( Django invoicing application source code).

Because of the complexity of this tutorial, I decides to break it into a series of tutorials. This is the first article of a series of articles. I will publish video and GitHub links with every article I write in this series.

Check more tutorials on Tati Digital

Part 1 of Building an Invoicing Application will cover:

  • Source code for open source bootstrap 5 dashboard HTML, CSS, and JS
  • Describe the user experience of our application, what the user can do
  • Outline the steps of the design process for our application, as well as the planning involved in developing it
  • The design of your database
  • Set up an entirely new Django project
  • Building the Client Model in Django
  • Assignment for next tutorial

Invoicing Application with Bootstrap5 code as the front end

Since I am going to make this code available on after this series, I only used open source code. No purchases made. Start by downloading the Bootstrap5 examples from  Download Bootstrap5.

Create a decent landing page, login page, and dashboard HTML for use in our project. Combine the elements to achieve this.

Client Journey Django-based Invoicing Application

During many app development brainstorming sessions and planning sessions, the client is at the centre of attention. Determine how the end-user is using the application, what they are attempting to do, and what challenges they are trying to solve.

Build an Invoice App
Build an Invoice App

The majority of our clients are looking for an easy and affordable way to create, print, and send invoices online. Similarly, recording their invoices in one place, so that they can keep track of the total amount they have invoiced per client and across all clients. Additionally, the customer wants to be able to look for invoices, track payments, and even send reminders if they have not received payments yet.

Based on the needs of our clients, we design our Django apps to meet those needs. These requirements can be summarised into one visual that would show all the activities that our clients will be able to perform on the application:

Client journey in a django invoicing app
Client journey in a django invoicing app

Clients will have the ability to (1)login, (2) create a client profile, (3) add products and services, (4) create an invoice, (5) Print or email the invoice, (6) view invoices in a list and update their status to — PAID, UNPAID, OVERDUE etc.

Design Journey for the Invoicing Application

At this point, we can begin to understand what we will experience as the app designers. In order to get an understanding of Django architecture, we will follow these steps:

Design Journey for an Invoicing App
Design Journey for an Invoicing App

See my previous Django development tutorials on medium if you’re new to the concept. The following are covered:

The design of your database

It is also much easier to determine the best way to design our database once we understand the user journey. Consider these points:

  • What models are needed
  • Establishing the relationship between the principal model and its supporting models. I call this “slave” and “master” models. A master model is the core application model; ideally, each application should have only one master model. You can develop another application within the same Django project if you need more. The slave models are frequently linked to the master model after that.

An example of an invoicing app:

Database design
Database design

Considering this example, the Invoice model will be the master. We will build this model as our primary one. Models serve as the base for the database structure. structure. . An instance of a class is represented as a column in a table, which represents the model’s variables. Generally, invoice models contain details such as invoice numbers, payment statuses, payment instructions, and client and product information.

Provide contact information for clients, including their names, addresses, and phone numbers. Moreover, the invoice can be used multiple times for the same client. In that case, the client should be the model. It will nonetheless be a “slave” class of the class for an invoice.

Set up an entirely new Django project

The video is actually based on a previous video where I’ve covered the same topic in detail: creating a Django project from scratch. We build this in a cloud-based server.

Getting a cloud server is really cheap on digitalocean, get yours for only $5. It is not conducive to my learning or teaching to have random projects occupying my personal computer.

Develop the Client model

We will finish today by creating our client model, at least that will get us to write some code after all this discussion. To plan and to ensure that the code is right, we must do those discussions.

An old saying goes:

“If I had 8 hours to chop down a tree, I would spend 6 hours sharpening my axe” – Abraham Lincoln

The axe has been sharpened, we know what we want, we know what our client wants, so we might as well begin to cut down the tree.

Create a model file: Paste this code:

from django.db import models
from django.template.defaultfilters import slugify
from django.utils import timezone
from uuid import uuid4
from django.contrib.auth.models import Userclass Client(models.Model):PROVINCES = [
('Gauteng', 'Gauteng'),
('Free State', 'Free State'),
('Limpopo', 'Limpopo'),
]#Basic Fields
clientName = models.CharField(null=True, blank=True, max_length=200)
addressLine1 = models.CharField(null=True, blank=True, max_length=200)
province = models.CharField(choices=PROVINCES, blank=True, max_length=100)
postalCode = models.CharField(null=True, blank=True, max_length=10)
phoneNumber = models.CharField(null=True, blank=True, max_length=100)
emailAddress = models.CharField(null=True, blank=True, max_length=100)#Utility fields
uniqueId = models.CharField(null=True, blank=True, max_length=100)
slug = models.SlugField(max_length=500, unique=True, blank=True, null=True)
date_created = models.DateTimeField(blank=True, null=True)
last_updated = models.DateTimeField(blank=True, null=True)def __str__(self):
return '{} {} {}'.format(self.clientName, self.province, self.uniqueId)def get_absolute_url(self):
return reverse('client-detail', kwargs={'slug': self.slug})def save(self, *args, **kwargs):
if self.date_created is None:
self.date_created = timezone.localtime(timezone.now())
if self.uniqueId is None:
self.uniqueId = str(uuid4()).split('-')[4]
self.slug = slugify('{} {} {}'.format(self.clientName, self.province, self.uniqueId))self.slug = slugify('{} {} {}'.format(self.clientName, self.province, self.uniqueId))
self.last_updated = timezone.localtime(timezone.now())super(Client, self).save(*args, **kwargs)

https://raw.githubusercontent.com/skolo-online/invoicing/main/invoice/models.py

The code for this model is thoroughly discussed in the video.

Home Assignment

Develop a model that shows the relationships between Products/Services and Invoice. The next instalment will follow next week. I would love to hear what you think. Please leave a comment below or on the YouTube video.

YouTube Tutorial

Leave a Reply

Your email address will not be published.

Subscribe to our mailing list

And get this 💃💃 Free😀 eBook !

Holler Box