• Stars
    star
    165
  • Rank 222,337 (Top 5 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Argon Dashboard - Django Template | Creative-Tim

Argon Dashboard Django Tweet

version GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Open-source Django Template crafted on top of Argon Dashboard, a modern Bootstrap 4 design. Start your development with a modern Bootstrap 4 Admin template for Django. Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. If you want to code faster, with a smooth workflow, then you should try this template carefully developed with Django, a well-known Python Framework. Django codebase is crafted using a simple, modular structure that follows the best practices and provides authentication, database configuration, and deployment scripts for Docker and Gunicorn/Nginx stack.

  • Up-to-date dependencies: Django 3.2.6 LTS
  • SCSS compilation via Gulp
  • UI Kit: Argon Dashboard (Free Version)
  • 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

Argon Dashboard Django - Admin Dashboard coded in Django.


Table of Contents


Demo

To authenticate use the default credentials test / ApS12_ZZs8 or create a new user on the registration 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/argon-dashboard-django.git
$ cd argon-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 Argon Dashboard Django is hosted at our website.


Code-base structure

The project is coded using a simple and intuitive structure presented bellow:

< 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/argon-dashboard-django.git
$ cd argon-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


Reporting Issues

We use GitHub Issues as the official bug tracker for the Argon 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 Argon 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


Useful Links


Social Media



Argon Dashboard - Django Template - Provided by Creative Tim and AppSeed

More Repositories

1

material-dashboard

Material Dashboard - Open Source Bootstrap 5 Material Design Admin
SCSS
10,910
star
2

material-kit

Free and Open Source UI Kit for Bootstrap 5, React, Vue.js, React Native and Sketch based on Google's Material Design
HTML
5,881
star
3

tailwind-starter-kit

Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source
CSS
5,645
star
4

material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
TypeScript
3,381
star
5

material-dashboard-react

React version of Material Dashboard by Creative Tim
JavaScript
2,720
star
6

argon-design-system

Argon - Design System for Bootstrap 4 by Creative Tim
CSS
2,442
star
7

vue-paper-dashboard

Creative Tim Paper Dashboard made for Vue
Vue
1,792
star
8

now-ui-kit

Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim
CSS
1,704
star
9

light-bootstrap-dashboard

Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple.
CSS
1,349
star
10

vuetify-material-dashboard

Vuetify Material Dashboard - Open Source Material Design Admin by Creative Tim
Vue
1,284
star
11

notus-nextjs

Notus NextJS: Free Tailwind CSS UI Kit and Admin
JavaScript
1,244
star
12

material-kit-react

Material Kit React free and open source by Creative Tim
JavaScript
1,158
star
13

material-dashboard-angular2

Material Dashboard Angular
SCSS
958
star
14

vue-argon-design-system

Vue Argon Design System
Vue
829
star
15

notus-svelte

Notus Svelte: Free Tailwind CSS UI Kit and Admin
Svelte
795
star
16

vue-light-bootstrap-dashboard

Vue Light Bootstrap Dashboard - FREE BOOTSTRAP 4 VUEJS ADMIN TEMPLATE
SCSS
769
star
17

notus-react

Notus React: Free Tailwind CSS UI Kit and Admin
JavaScript
759
star
18

light-bootstrap-dashboard-react

React version of Light Bootstrap Dashboard
SCSS
716
star
19

argon-design-system-react

React version of Argon Design System
CSS
649
star
20

argon-dashboard

Argon - Dashboard for Bootstrap 5 by Creative Tim
SCSS
605
star
21

argon-react-native

Argon React Native
JavaScript
593
star
22

material-kit-react-native

Material Kit React Native
JavaScript
546
star
23

vue-material-dashboard

Vue Material Dashboard - Open Source Material Design Admin
SCSS
529
star
24

vue-notus

Vue Notus: Free Tailwind CSS UI Kit and Admin
Vue
519
star
25

vue-black-dashboard

Vue Black Dashboard
Vue
506
star
26

soft-ui-dashboard

Soft UI Dashboard - Free and OpenSource Bootstrap 5 Dashboard
SCSS
502
star
27

purity-ui-dashboard

Purity UI Dashboard - Free and Open Source Chakra UI Dashboard
JavaScript
477
star
28

argon-dashboard-react

React version of Argon Dashboard
CSS
429
star
29

black-dashboard-react

CSS
425
star
30

vue-argon-dashboard

Vue Argon Dashboard
SCSS
372
star
31

paper-dashboard

Paper Dashboard is a Bootstrap Admin Panel which combines soft colors with beautiful typography and spacious cards and graphics.
CSS
357
star
32

black-dashboard

CSS
343
star
33

vue-material-kit

Vue Material Kit - Open Source Material Design UI Kit
CSS
327
star
34

light-bootstrap-dashboard-angular2

Light Bootstrap Dashboard Angular 2
HTML
321
star
35

nextjs-material-kit

NextJS version of Material Kit React by Creative Tim
JavaScript
318
star
36

astro-ecommerce

Astro Ecommerce - Ready to use components
SCSS
297
star
37

material-tailwind-dashboard-react

Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.
JavaScript
292
star
38

soft-ui-dashboard-tailwind

Soft UI Dashboard Tailwind - Free and OpenSource TailwindCSS Dashboard
HTML
282
star
39

muse-vue-ant-design-dashboard

Muse Vue Ant Design Dashboard - Free and OpenSource Ant Design Vue Dashboard
Vue
267
star
40

bootstrap4-cheatsheet

Bootstrap 4 Cheat Sheet
HTML
260
star
41

soft-ui-dashboard-react

Soft UI Dashboard React - Free Dashboard using React and Material UI
JavaScript
251
star
42

argon-design-system-angular

SCSS
245
star
43

nextjs-material-dashboard

NextJS version of Material Dashboard React
JavaScript
241
star
44

blk-design-system

CSS
231
star
45

notus-angular

Notus Angular: Free Tailwind CSS UI Kit and Admin
HTML
226
star
46

notus-js

Notus JS: Free Tailwind CSS UI Kit and Admin
HTML
225
star
47

paper-kit-2

Paper Kit is a Fully Coded Web UI Kit based on Bootstrap.
SCSS
200
star
48

argon-dashboard-asp-net

Start your development with a Bootstrap 4 Admin Dashboard built for ASP.NET Core framework, the newest go-to technology from Microsoft for top companies.
CSS
200
star
49

paper-dashboard-react

CSS
192
star
50

blk-design-system-react

React version of BLK Design System:
CSS
191
star
51

soft-ui-design-system

Soft UI Design System - Open Source Bootstrap 5 design system
HTML
189
star
52

now-ui-dashboard

Now UI Dashboard - Open Source Admin Template
SCSS
186
star
53

now-ui-react-native

Now UI Pro React Native
JavaScript
185
star
54

argon-dashboard-angular

HTML
164
star
55

vision-ui-dashboard-chakra

JavaScript
158
star
56

paper-kit-2-angular

Free Bootstrap 4 UI Kit for Angular 2+
SCSS
153
star
57

paper-dashboard-angular

Angular version of the original Paper Dashboard.
SCSS
152
star
58

soft-ui-react-native

Start your development with a Design System for React-Native inspired by Soft UI Design System.
TypeScript
150
star
59

bits

Bits by Creative Tim - Code Snippets for easier coding
146
star
60

now-ui-kit-react

React version of Now UI Kit by Creative Tim
CSS
145
star
61

argon-dashboard-nodejs

CSS
143
star
62

paper-kit-react

React version of Paper Kit 2 by Creative Tim
SCSS
135
star
63

now-ui-dashboard-react

React version of Now UI Dashboard
CSS
134
star
64

vue-now-ui-kit

Vue Now UI Kit
SCSS
132
star
65

ct-material-kit-pro

Premium Bootstrap 4 UI Kit based on Google's Material Design
128
star
66

muse-ant-design-dashboard

Muse Ant Design Dashboard - Free Dashboard using React and Ant Design
JavaScript
128
star
67

nextjs-argon-dashboard

NextJS version of Argon Dashboard React
CSS
126
star
68

material-dashboard-react-nodejs

React Material template connected to working Node API
JavaScript
126
star
69

ct-material-dashboard-pro-react

React version of Material Dashboard Pro
126
star
70

black-dashboard-django

Black Dashboard - Open-source Django Template | Creative-Tim
CSS
119
star
71

impact-design-system

Kick-Start Your Development With An Awesome Design System carefully designed for your online business showcase. Joint project by Creative Tim and Themesberg.
HTML
119
star
72

ct-material-dashboard-pro

Material Dashboard Pro - Premium Bootstrap 5 Admin
115
star
73

soft-ui-dashboard-laravel

Soft UI Dashboard Laravel - Free full stack dashboard app
Blade
105
star
74

get-shit-done

A free UI Kit built on Twitter Bootstrap
HTML
105
star
75

vision-ui-dashboard-react

JavaScript
101
star
76

soft-ui-dashboard-laravel-livewire

Soft UI Dashboard Laravel - Free full stack app with Laravel, Livewire & Alpine.js
Blade
101
star
77

bootstrap-vue-argon-dashboard

Vue
100
star
78

vue-soft-ui-dashboard

Vue Soft UI Dashboard - Free and OpenSource VueJS 3 & Bootstrap 5 Dashboard
SCSS
97
star
79

black-dashboard-angular

SCSS
97
star
80

material-dashboard-django

Material Dashboard - Django Template | Creative-Tim
CSS
86
star
81

material-tailwind-kit-react

Free and Open Source UI Kit for Tailwind CSS and React based on Google's Material Design.
JavaScript
84
star
82

argon-dashboard-tailwind

Argon Dashboard Tailwind - Free and OpenSource TailwindCSS Dashboard
HTML
82
star
83

material-bootstrap-wizard

Material Bootstrap Wizard - Bootstrap wizard based on Material Design
SCSS
80
star
84

soft-ui-dashboard-django

Soft UI Dashboard - Django Template | Creative-Tim
Python
75
star
85

awesome-landing-page

CSS
71
star
86

argon-dashboard-flask

Argon Dashboard - Flask Template | Creative-Tim
CSS
70
star
87

argon-flutter

Dart
70
star
88

now-ui-dashboard-angular

SCSS
70
star
89

ct-material-dashboard-pro-angular

68
star
90

material-dashboard-flask

Material Dashboard - Flask Template | Creative-Tim
SCSS
68
star
91

ct-material-kit-pro-react-native

Material Kit PRO React Native is a fully coded app template built over Galio.io, React Native and Expo
67
star
92

ct-vue-material-dashboard-pro

Vue Material Dashboard Pro - Material Design Admin
64
star
93

blk-design-system-angular

SCSS
62
star
94

argon-dashboard-chakra

JavaScript
61
star
95

now-ui-flutter

Dart
61
star
96

vue-material-dashboard-laravel-bs4

Vue SPA Material template connected to working Laravel REST API with the help of json:api standard
SCSS
58
star
97

astro-launch-ui

AstroLaunch UI - Ready to use components
TypeScript
56
star
98

argon-dashboard-material-ui

This is the Material UI version of the Argon Dashboard React.
JavaScript
56
star
99

now-ui-kit-angular

SCSS
54
star
100

coming-sssoon-page

HTML
51
star