What we are building - Build a Customer Support SaaS with Django and Vue

In this course, we're going to build a customer support application called SupportDesk. A company will be able to create a workspace, invite the people who handle support and keep customer conversations in one inbox. We'll build the application with Django and Vue, then add subscriptions and deploy it to a server.

I want us to build this in small steps. A support application has plenty of moving parts, but we don't need to introduce all of them at once. We'll start with two projects that run on our computer, make sure they can talk to each other, and then work through accounts, workspaces and tickets. Each lesson should leave us with something we can check before we move on.

What we are going to build

Imagine a small company with three people answering customer questions. A customer opens a ticket about an order, one agent takes responsibility for it, and another adds a note that only the team can see. The customer should be able to read the replies on their own ticket, but they should never see that internal note or another customer's conversation. Those are the kinds of decisions we'll turn into models, views and Vue pages.

We'll also let several companies use the application. Each company gets its own workspace, and the people in one workspace must not be able to access another workspace's tickets. Later, the workspace owner will be able to choose a paid plan, manage their subscription and invite more agents within that plan's limits.

The first version will accept tickets through the application and send email notifications. Receiving replies from arbitrary email inboxes is a separate feature, so we're not building an email server as part of this course. The main project will also work without an AI provider. Suggested replies and conversation summaries can be added after the core application is working.

The backend and frontend

Django will handle the database, accounts, permissions and API. Vue will handle the pages that agents and customers use in the browser. When an agent opens the inbox, Vue will ask Django for the tickets. Django will check who the agent is and which workspace they belong to before returning any data. Hiding a button in Vue is useful for the interface, but it does not replace the permission check in Django.

We'll use Django REST framework when we start building those API endpoints. On the frontend, we'll use Vue 3, TypeScript, Vue Router and Pinia. Tailwind will handle the styling. We'll begin with SQLite so that the first setup doesn't require a database server; the deployment section will move the application to PostgreSQL.

For authentication, we'll use Django sessions. The frontend and API will share an origin in production, and during development Vite will forward API requests to Django. We will add the actual sign-in flow and CSRF handling in the next module. For this first part, we only need a small public endpoint that tells us the backend is reachable.

Before you start

You should be comfortable with basic Python, HTML and JavaScript. I'll explain the Django and Vue pieces as we use them, but this course isn't an introduction to variables or functions. You'll need a terminal, an editor, a browser, Python 3.12 or newer and a supported Node.js version. This setup was checked with Python 3.14.8 and Node.js 22.23.2. The Vue starter used here requires Node 22.18 or newer within the 22 series, or Node 24.12 or newer.

Open a terminal and check that Python, Node and npm are available:

python3 --version
node --version
npm --version

The commands in the lessons use a macOS or Linux terminal. On Windows, you may need to use py instead of python3 when creating the environment; I'll show the PowerShell activation command in the next lesson. Once the environment is active, use python for the Django commands.

The project folders

We'll keep both applications in one parent folder. This makes it easy to see which files belong to Django and which belong to Vue. By the end of this module, the important files will be arranged like this:

supportdesk/
    .venv/
    .gitignore
    backend/
        manage.py
        requirements.txt
        config/
        accounts/
    frontend/
        package.json
        package-lock.json
        vite.config.ts
        src/

The .venv folder will contain our Python packages. The backend folder will contain the Django project, and frontend will contain the Vue project. Neither the virtual environment nor the frontend's installed packages should be committed to Git.

Our checkpoint for this module is deliberately small: the Django admin opens, our custom user model is in place, Vue can display two pages, and a button on the home page can reach Django. We will then have a working starting point for registration and sign-in.

Next: Setting up Django and the custom user model