loading...
Cover image for Argon Design - Django Dashboard Example

Argon Design - Django Dashboard Example

sm0ke profile image Sm0ke ・4 min read

Hello Coders,

This article presents a simple Django Dashboard coded on top of a modern UI Kit - Argon Design (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

Thanks for reading! Links are below (for fast-runners)


Argon Design - Django version, animated presentation.


Argon Design

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 Design System 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.


Argon Design - User Profile Page

Argon Design - Django version, the user profile page.


Argon Design - UI Icons Page

Argon Design - Django version, UI icons page.


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

Codebase structure

< 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 - the programming language used to code the app
  • GIT - 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.


Compile the sources

$ # 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.


Thanks for reading! Feel free to ask me anything in the comments. For more starters coded on top of Argon Design please access the AppSeed platform.

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide
 

The free version of Argon Design is more than ok for simple projects.
Thanks for writing.

 

Thank you!