This article aims to help students and beginners to start fast a new project by using a well-known open-source project, the Adminator Dashboard, coded in three versions:
- The flat/lifeless HTML version, provided by ColorLib
- The Python coded versions (Flask Dashboard Adminator and Django Adminator Panel), both generated using automation tools with an identical feature set: authentication (login, register), database, ORM, helpers, and deployment scripts.
In case you want to start faster your next admin dashboard project check out this index with Open Source Admin Dashboards already coded with authentication, database, and deploy scripts - Provided by AppSeed.
All versions are released under the MIT license and published on Github using public repositories. In case you like one of the projects, just clone one and start coding something for you or for a customer (the permissive license allows this). Thanks for reading!
For those in a rush, I'll put here the links to the Github repositories:
- Adminator Dashboard - HTML version provided by ColorLib
- Flask Dashboard Adminator - Flask version, MIT License
- Django Dashboard Adminator - Django version, MIT license
Regarding the automation process used to generate the apps, I've published a few articles here on Dev, that explains the workflow in deep:
- How I’ve built 100+ open-source apps with automation tools
- Dark Admin Dashboards - Open-Source and Free
- Open-Source Web Apps - Grouped by UI Kits
For newcomers, I will reiterate the automated workflow in a few sentences:
The process uses flat HTML as input and produces UI-Ready web apps enhanced with basic modules: authentication, database, ORM in different languages and patterns.
Phase #1 - UI processing: components extraction, master pages detection, hard-coded texts removal, sometimes assets management tuning (CSS compression, JS minification, etc) using an HTML parser coded in Python BS4 (not open-source).
Phase #2 - Once the HTML is processed, the automated workflow injects the layouts and components into simple boilerplate code enhanced with basic features and modules: authentication, database, ORM, deployment scripts.
Using this new approach, simple UI-Ready web apps are produced much faster with batteries included and clean code-base, ready to be used by open-source enthusiasts.
Adminator is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Build the HTML version of the Adminator Dashboard requires a basic toolchain installed on our workstation:
- Yarn or NPM
- Git (to clone the sources)
How to build the HTML project:
$ # Clone the project from Github $ git clone https://github.com/app-generator/fork-adminator-admin-dashboard $ cd fork-adminator-admin-dashboard $ $ # Install Modules $ npm install $ $ # Start the project in dev mode $ npm run dev $ $ # Built HTML for production $ npm run build
Not familiar with Node, or the differences between development and production build? AMA in the comments.
The Flask version of Adminator Dashboard comes with authentication, SQLite database, SQLAlchemy ORM included. For newcomers, Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy.
How to use the app
$ # Clone the sources $ git clone https://github.com/app-generator/flask-dashboard-adminator.git $ cd flask-dashboard-adminator $ $ # Virtualenv modules installation (Unix based systems) $ virtualenv --no-site-packages env $ source env/bin/activate $ $ # Virtualenv modules installation (Windows based systems) $ # virtualenv --no-site-packages env $ # .\env\Scripts\activate $ $ # Install requirements $ pip3 install -r requirements.txt $ $ # Set the FLASK_APP environment variable $ (Unix/Mac) export FLASK_APP=run.py $ (Windows) set FLASK_APP=run.py $ (Powershell) $env:FLASK_APP = ".\run.py" $ $ # Set up the DEBUG environment $ # (Unix/Mac) export FLASK_ENV=development $ # (Windows) set FLASK_ENV=development $ # (Powershell) $env:FLASK_ENV = "development" $ $ # Run the application $ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1) $ # --port=5000 - specify the app port (default 5000) $ flask run --host=0.0.0.0 --port=5000 $ $ # Access the app in browser: http://127.0.0.1:5000/
If all goes well, we should see the Adminator dashboard running in the browser.
Note: no default user is provided, and we need to create a new one using the registration page. In case of any issues, AMA in the comments.
Open-Source Admin Panel coded in Django Framework on top of Adminator Dashboard design. Features:
- UI-ready Modular design, clean code-base
- SQLite, Django native ORM
- Session-Based Authentication (login, register)
- Forms validation
How to use it
$ # Get the code $ git clone https://github.com/app-generator/django-dashboard-adminator.git $ cd django-dashboard-adminator $ $ # Virtualenv modules installation (Unix based systems) $ virtualenv --no-site-packages env $ source env/bin/activate $ $ # Virtualenv modules installation (Windows based systems) $ # virtualenv --no-site-packages env $ # .\env\Scripts\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 browser: http://127.0.0.1:8000/
By visiting the app in the browser, we should see the login screen:
After we create a new user, via the registration page, and pass the login, we should see a beautiful, and simple UI:
Links & resources
- More about Flask - such a beautiful piece of software
- More About Django - a powerful Framework with many batteries included
- Open-Source Admin Dashboards provided by AppSeed using automation tools
Thanks for reading and let me know your thoughts in the comments.