DEV Community

Cover image for Flask Dashboard Atlantis Dark - Open-Source Admin panel with Dark Design
admin-dashboards
admin-dashboards

Posted on • Updated on

Flask Dashboard Atlantis Dark - Open-Source Admin panel with Dark Design

Hello coder,

This article presents a simple Flask web app released as an open-source product by the publisher that might help students and beginners to code their first product with a commercial value.

In my case, I've learned a lot by updating open-source projects written in different patterns and technologies starting from old school C/C++ to Python and modern frameworks like React and Vue.


A few words about the app

The web app is a simple web application coded in the Flask, the popular and lightweight Python web framework. The application comes with a basic set of features, listed below:

  • A beautiful UI kit: Dashboard Atlantis provided by Themekita agency
  • The web framework, as mentioned above, is Flask
  • Database: SQLite
  • Session-based authentication that allows registration and login
  • To manage the database, the popular SQLAlchemy is already integrated
  • License: MIT - this means that anyone might use the app for commercial and hobby projects.

In a rush? just grab the code from Github, follow the comprehensive instructions listed in the README file and start coding: Flask Dashboard Atlantis Dark

Flask Dashboard Atlantis Dark - Open-Source Admin Panel.


What is Flask

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions. The framework has a small footprint and lets the programmer build complex web apps with great freedom. For more information, feel free to read more on the official Flask website


Atlantis Flask Dashboard

The application has a simple, modular structure:

Flask - App Package structure

In this simple structure, the key files are:

  • run.py - app launcher
  • requirements.txt - the file with the project required modules
  • app / __init__.py - the constructor for our app
  • app / views.py - handles app routing and serve the requests
  • app / models.py - defines the tables used by the app as Python classes
  • app / forms.py - defines the forms used in login and users registration
  • app / configuration.py - concentrate all config variables in one place

Build the app

In order to build this admin dashboard, we need to have a minimum environment already set up in the workstation. First, we need to add Python, the programming language used to code the app and behind the Flask framework.

Install Python

Python can be downloaded from the official website. Choose the installer for your operating system, download, and click a few times.
By typing python --version in a terminal window, you should see something like this:

$ python --version
Python 3.7.2

Install Flask

We have two options here. Install Flask using a virtual environment or globally. I will choose the simple option:

$ pip install Flask
$ pip freeze | grep Flask 

First command install Flask, the second will print the version.

If we reach this point without errors, the next step is to build the app by type all commands listed in the README file, published on Github:


$ # Clone the sources
$ git clone https://github.com/app-generator/flask-dashboard-atlantis-dark.git
$ cd flask-dashboard-atlantis-dark
$
$ # 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/

For newcomers, Virtualenv is a concept used by the Python programmers to isolate the dependencies and avoid conflicts with other applications - more information available in this article.


If all goes well, our Flask dashboard should run in the browser, and we should see some beautiful screens with various widgets and UI elements:

Flask Dashboard Atlantis Dark - App Screen.

Flask Dashboard Atlantis Dark - App Screen.

Flask Dashboard Atlantis Dark - App Screen.


Where to go from here

Using this simple and functional web app, a beginner might learn web programming by updating the code and add new simple features:

  • Customize the pages meta information (title, description)
  • Add new app routes
  • Code simple javascript functions
  • Add new forms, tables
  • Upgrade the app to support other database engines: MySql, PostgreSQL

Thank you for reading this article and don't hesitate to AMA in the comments.

Top comments (0)