Argon Dashboard - Free Django Seed Project
Tags: webdev, argondesign, django, appseed
Published: 2020-08-13 16:43:42

---
title: Argon Dashboard - Free Django Seed Project
published: true
description: An open-source Django Dashboard coded with simple modules on top of Argon Design (free version).
tags: webdev, argondesign, django, appseed
cover_image: https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen-2.png
---
Hello Coders,

This article presents a simple Django Starter coded on top of a modern UI Kit - **[Argon Dashboard](https://appseed.us/admin-dashboards/django-dashboard-argon)** (free version) with basic modules (authentication, database, ORM) and deployment scripts. 
The project can be downloaded directly from Github under the MIT License, a license that permits unlimited hobby & commercial projects (no footer mentions are required).

The goal of this open-source Django starter is to help two categories of programmers:

- Beginners - To learn faster how to code a real project
- Experienced Programmers - Skip over coding the common modules like authentication, ORM integration, basic project configuration

---

- [Argon Dashboard Django](https://appseed.us/admin-dashboards/django-dashboard-argon) - product page 
- **[Argon Dashboard](https://appseed.us/admin-dashboards/django-dashboard-argon-pro) Django PRO** - more pages, components

---

![Argon Design - Django version, animated presentation.](https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen.png)

---

## **[Argon Design System](https://appseed.us/ui-kit/argon-design-system)**

Coding an app is great, but coding a real product on top of a modern UI Kit with commercial value is amazing. Argon UI, crafted under the MIT License by Creative-Tim agency comes with many components and pre-built pages that might help us to deliver faster the end product.

*UI Vendor Notes* - **[Argon Dashboard](https://appseed.us/admin-dashboards/django-dashboard-argon-pro)** is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files.

You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Design System is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

---

> **Argon Design** - Dashboard Page

![Argon Design - Django version, the dashboard page.](https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen.png)

---

> **Argon Design** - User Profile Page

![Argon Design - Django version, the user profile page.](https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen-3.png)

---

> **Argon Design** - UI Icons Page

![Argon Design - Django version, UI icons page.](https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen-1.png)

---

## Django Dashboard - Features

The codebase used to integrate the UI is coded using a simple, modular structure super easy to extend and add more features on top - The full list of features: 

- UI-Ready app, SQLite Database, Django Native ORM
- Modular design, clean code-base
- Session-Based Authentication, Forms validation
- Deployment scripts: Docker, Gunicorn / Nginx
- Support via Github (issues tracker) and [Discord](https://discord.gg/fZC6hup)

---

> Codebase structure

```bash
< PROJECT ROOT >
   |
   |-- core/                       # Implements app logic
   |    |-- static/
   |    |    |-- <css, JS, images> # CSS files, Javascripts files
   |    |-- templates/             # Templates Folder
   |         |-- includes/         # HTML chunks and components
   |         |-- layouts/          # Master pages
   |         |-- accounts/         # Authentication pages
   |         |
   |      index.html               # The default page
   |       *.html                  # All other HTML pages
   |
   |-- authentication/             # Handles auth routes 
   |-- app/                        # Serve HTML files
   |
   |-- requirements.txt            # Development modules 
   |
   |-- .env                        # Environment Configuration
   |-- manage.py                   # Start the app
   |
   |-- ****************************
```

---

> App Bootstrap Flow

- Django bootstrapper `manage.py` uses `core/settings.py` as the main configuration file
- `core/settings.py` loads the app magic from `.env` file
- Redirect the guest users to Login page
- Unlock the pages served by *app* node for authenticated users

---

Once we are getting familiar with the codebase we can move forward and code the app locally. To compile the sources, we need a Python3 environment and GIT command tool to clone the source code from Github. The full-list with dependencies and tools required to build the app:

- [Python3](https://www.python.org/) - the programming language used to code the app
- [GIT](https://git-scm.com/) - used to clone the source code from the Github repository
- Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

For more information on how to set up your environment please access the resources listed below. In case I've missed something, feel free to AMA in the comments.

- [Setup CentOS for development](https://docs.appseed.us/how-to/setup-centos-for-development/?ref=dev)
- [Setup Ubuntu for development](https://docs.appseed.us/how-to/setup-ubuntu-for-development/?ref=dev)
- [Setup Windows for development](https://docs.appseed.us/how-to/setup-windows-for-development/?ref=dev)

---

> Compile the sources

```bash
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-argon.git
$ cd django-dashboard-argon
$
$ # Virtualenv set up
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite version
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port 
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in the browser: http://127.0.0.1:8000/
```

At this point, we can visit the app in the browser `http://127.0.0.1:8000/`. By default, the app will redirect guest users to the login page. To access the private pages:

- Create a new user using the registration page
- Authenticate using the login page

---

![Argon Design - Django version, the Login page.](https://raw.githubusercontent.com/app-generator/django-dashboard-argon/master/media/django-dashboard-argon-screen-login.png)

---

Thanks for reading! Feel free to ask me anything in the comments. For more starters coded on top of [Argon Design](https://appseed.us/ui-kit/argon-design-system?ref=dev) please access the [AppSeed](https://appseed.us/?ref=dev) platform.