Soft UI - Generate a Django Dashboard with ease
Tags: webdev, softui, django, dashbaords
Published: 2021-09-04 15:55:52

Hello Coders!

This article presents an easy way to generate a Django dashboard on top of **[Soft UI](https://appseed.us/ui-kit/soft-ui-design-system)**, a modern Bootstrap 5 design crafted by Creative-Tim. To achieve this goal we will use an open-source tool: **Django Cookie-Cutter**. During the process, we can choose the design (Soft UI) and also the database type from a short-list with popular engines: SQLite, MySql, or PostgreSQL. 

> *Thanks for reading!* - Content provided by **[Admin Dashboards](https://www.admin-dashboards.com/)**.

---

**What's in the box?** The generated product looks similar to this one:

---

> **[Soft UI Django](https://appseed.us/product/django-soft-ui-dashboard)** - product page (includes demo & sources)

![Soft UI - Generated by Django Cookie-Cutter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o92d6gs4ymep2fvd2vgi.png)

---

To use this open-source generator a [minimal programming kit](https://docs.appseed.us/content/tutorials/minimal-programming-kit) should be installed in the workstation starting with Python3 and GIT:

- **Python** - the language used by the tool
- **GIT** - the popular command-line versioning tool
- A modern programming editor like **Atom** or **VSCode**

---

Once we have all the tools, we can proceed further and generate our simple Django Dashboard.

> **Step #1** - Install dependencies (cookie-cutter and GitPython)

```bash
$ pip install cookiecutter
$ pip install GitPython
```

**CookieCutter** is the Python library that makes all the work for us and **GitPython** is a nice and useful Python wrapper around Git used to pull the UI themes from Git.

---

> **Step #2** - Generate the dashboard using Soft UI design

```bash
$ cookiecutter https://github.com/app-generator/cookiecutter-django.git
```

---

> **Step #3** - Customize the project

Most of the commands provide a default value select-able by an ENTER. The most important step is the one when we choose the UI kit because the tool provides multiple choices regarding the design:

- (free) [Django Soft UI](https://appseed.us/product/django-soft-ui-dashboard) - the design we will select
- (free) [Django Volt](https://appseed.us/admin-dashboards/django-dashboard-volt) - a modern dashboard with Bootstrap 5 design
- (free) [Django Datta Able](https://appseed.us/admin-dashboards/django-datta-able) - open-source colorful dashboard

---

```bash
>>> # Project Name Option 
>>> project_name [Django Seed project]: Django Soft UI

>>> # Project Slug is the directory name
>>> project_slug [django_soft_ui]:

>>> # Project Description: saved in the README file 
>>> description [A simple Django project]: My Simple Django Project

>>> # Project Author: saved in the README file   
>>> author_name []: Bill Gates

>>> # Author Email: saved in the README file   
>>> email [bill@microsoft.com]:

>>> Project Version: saved in the README file
>>> version [0.0.1]:

>>> UI Kit: (Volt default option)
>>> Select theme:
1 - volt
2 - soft-ui                       <------ The magic option            
3 - datta-able

>>> Database: (SQLite default option) 
Select database:
1 - sqlite3
2 - mysql
3 - postgresql

>>> Database Credentials: Used to configure the connection
>>> database_name [appseed_django]: (use default)
>>> database_user [appseed_user]: (use default)
>>> database_pass [Pass1234]: (use default)
```

Once the process is finished, we can open the `django_soft_ui` directory using a programming editor like Atom or VsCode and follow the instruction provided by the `README` to compile the generated project.

---

> **Step #1** - Create a virtual environment  (used to install dependencies)

```bash
$ virtualenv env
$ source env/bin/activate
```

---

> **Step #2** - Install project dependencies

```bash
$ # Install modules
$ pip3 install -r requirements.txt
```
 
---

> **Step #3** - Set up the database

```bash
$ python manage.py makemigrations
$ python manage.py migrate
```

---

> **Step #4** - Start the generated Django project

```bash
$ # Start the application (development mode)
$ python manage.py runserver
```

By visiting the project in the browser we should see something similar to the original project: [Soft UI Dashboard](https://django-soft-ui-dashboard.appseed-srv1.com/) (demo link). Once we create a new user and Sign IN, the access to the private pages is unlocked.

---

![Soft UI - Dashboard generated by Django Cookie-Cutter.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl31s5wjgfvuo2csn4ht.png)
 
---

> Soft UI - VR Page

![Soft UI - VR Sample page generated by Django Cookie-Cutter Tool.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct7e6mxk3w4p4lbtayz2.png)

---

In the same way, we can build more Django projects but using different UI kits with less manual work. Regarding the **Django Cookie-Cutter** tool, the product has a nice roadmap where the publisher presents a few really nice features:

- New themes: CoreUI, AdminLTE (popular open-source templates)
- Deployment: AWS, Google Cloud, HEROKU, Docker
- Modules: Data tables, Charts, Stripe Payments

For more information please access the [public repository](https://github.com/app-generator/cookiecutter-django) of this tool and read more about it.

---

> **Thanks for reading!** For more resources, please access:

- More [Django Dashboards](https://appseed.us/admin-dashboards/django) built with modern UI kits
- [Open-source Admin Dashboards](https://appseed.us/admin-dashboards/open-source) - index provided by AppSeed
- Free [React Dashboards](https://dev.to/sm0ke/react-dashboards-open-source-apps-1c7j) - a popular article published on Dev.to