Material Dashboard Django

Free product - Django Dashboard starter project - Features:

• Up-to-date dependencies: Django 3.2.6 LTS
• SCSS compilation via Gulp
• UI Kit: Material Dashboard (Free Version) provided by Creative-Tim
• Django Codebase - provided by AppSeed
• UI-Ready app, SQLite Database, Django Native ORM
• Modular design, clean code-base
• Session-Based Authentication, Forms validation
• Deployment scripts: Docker, Gunicorn / Nginx

Table of Contents

• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Demo

To authenticate use the default credentials test / ApS12_ZZs8 or create a new user on the registration page.

• Material Dashboard Django Login Page

Quick start

UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.

$ # Get the code
$ git clone https://github.com/creativetimofficial/material-dashboard-django.git
$ cd material-dashboard-django
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Storage
$ 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 browser: http://127.0.0.1:8000/

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.

Documentation

The documentation for the Material Dashboard Django is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

< PROJECT ROOT >
   |
   |-- core/                               # Implements app configuration
   |    |-- settings.py                    # Defines Global Settings
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |
   |-- apps/
   |    |
   |    |-- home/                          # A simple app that serve HTML files
   |    |    |-- views.py                  # Serve HTML pages for authenticated users
   |    |    |-- urls.py                   # Define some super simple routes  
   |    |
   |    |-- authentication/                # Handles auth routes (login and register)
   |    |    |-- urls.py                   # Define authentication routes  
   |    |    |-- views.py                  # Handles login and registration  
   |    |    |-- forms.py                  # Define auth forms (login and register) 
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                   # Master pages
   |         |    |-- base-fullscreen.html  # Used by Authentication pages
   |         |    |-- base.html             # Used by common pages
   |         |
   |         |-- accounts/                  # Authentication pages
   |         |    |-- login.html            # Login page
   |         |    |-- register.html         # Register page
   |         |
   |         |-- home/                      # UI Kit Pages
   |              |-- index.html            # Index page
   |              |-- 404-page.html         # 404 page
   |              |-- *.html                # All other pages
   |
   |-- requirements.txt                     # Development modules - SQLite storage
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- manage.py                            # Start the app - Django default start script
   |
   |-- ************************************************************************

The 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

Recompile CSS

To recompile SCSS files, follow this setup:

Step #1 - Install tools

• NodeJS 12.x or higher
• Gulp - globally
  • npm install -g gulp-cli
• Yarn (optional)

Step #2 - Change the working directory to assets folder

$ cd apps/static/assets

Step #3 - Install modules (this will create a classic node_modules directory)

$ npm install
// OR
$ yarn

Step #4 - Edit & Recompile SCSS files

$ gulp scss

The generated file is saved in static/assets/css directory.

Deployment

The app is provided with a basic configuration to be executed in Docker, Gunicorn, and Waitress.

Docker execution

---

The application can be easily executed in a docker container. The steps:

Get the code

$ git clone https://github.com/creativetimofficial/material-dashboard-django.git
$ cd material-dashboard-django

Start the app in Docker

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Visit http://localhost:85 in your browser. The app should be up & running.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

• Demo: https://www.creative-tim.com/live/material-dashboard-django
• Download Page: https://www.creative-tim.com/product/material-dashboard-django
• Documentation: https://demos.creative-tim.com/material-dashboard-django/docs/1.0/getting-started/getting-started-django.html
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Dashboard Django. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Material Dashboard Django. Check the CHANGELOG from your dashboard on our website.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser-specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

• Copyright 2019 - present Creative Tim
• Licensed under Creative Tim EULA

Useful Links

• More products from Creative Tim
• Tutorials
• Freebies from Creative Tim
• Affiliate Program (earn money)

Social Media

• Twitter: https://twitter.com/CreativeTim
• Facebook: https://www.facebook.com/CreativeTim
• Dribbble: https://dribbble.com/creativetim
• Instagram: https://www.instagram.com/CreativeTimOfficial

---

Material Dashboard Django - Provided by Creative Tim and AppSeed