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, product page
- Argon Design - Django Demo - LIVE App
- More starters coded with on top of Argon Design, provided by AppSeed
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 - User Profile Page
Argon Design - UI Icons Page
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
App Bootstrap Flow
- Django bootstrapper
core/settings.pyas the main configuration file
core/settings.pyloads the app magic from
- 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