Codementor Events

Atlantis Lite - Free Projects to start fast

Published Oct 01, 2020Last updated Mar 10, 2021
Atlantis Lite - Free Projects to start fast

Hello Coders,

This article presents a short-list with free, open-source starters coded in different frameworks on top of Atlantis Lite, a modern admin dashboard design. Beginners might use the projects to accommodate with a production-ready codebase enhanced with simple features like authentication, ORM, database.


Thanks for reading! The relevant links are below:


Atlantis Lite - Dark version coded in Flask - animated presentation.


Atlantis Lite

Atlantis Lite is a free bootstrap 4 admin dashboard that is beautifully and elegantly designed to display various metrics, numbers or data visualization.
Atlantis Lite admin dashboard has 2 layouts, many plugins and UI components to help developers create dashboards quickly and effectively so they can save development time and also help users to make the right and fast decisions based on existing data.

The HTML files can be downloaded directly from Github by accessing this repo. Being provided with SCSS files, the project can be customized with ease by following the Atlantis Lite Documentation.


Atlantis Lite - Flask Codebase

Features provided in the Flask version of Atlantis Lite are fairly simple: session-based authentication flow using Flask-Login, database, ORM, blueprints, and deployment scripts.
To compile and use the Flask version, we need to have Python3 installed and accesible via the terminal window. GIT command tool is also recommended to download the sources directly from the public repositories.

Let's compile the Flask version (dark layout) with a few commands copied from the README file.


Clone/Download the sources

$ git clone https://github.com/app-generator/flask-dashboard-atlantis-dark.git
$ cd flask-dashboard-atlantis-dark

Install modules

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt

Flask environment set up

$ # 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"

Start the project

$
$ # Start the application (development mode)
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

By default the application redirect the guests users to the login page. After reguster a new user and login, the app unlocks all private pages.

Atlantis Lite - Dashboard Page

Atlantis Lite - Flask Version, the main dashboard page.


Atlantis Lite - Timeline Widget

Atlantis Lite - Flask Version, the timeline widget page.


Atlantis Lite - Django Codebase

The Django codebase is provided with an identical set of features as the Flask version: authentication flow, database and deployment scripts. The product (both versio - lite & dark) can be compiled locally with a few commands typed in the terminal:

$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-atlantis.git
$ cd django-dashboard-atlantis
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/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
$
$ # Access the web app in browser: http://127.0.0.1:8000/

After a successfull authentication (please create a new user first via the registration page) the app unlocks the private pages and we can click around this modern UI.

Atlantis Lite - Main dashboard

Atlantis Lite - Django, main dashboard page.


Atlantis Lite - Widgets Page

Atlantis Lite - Django, widgets page.


Atlantis Lite - Jinja Version

Jinja version is provided to facilitate the UI integration into legacy products. The project is basically, a super simple Flask project without a database or any other hard dependencies.

Jinja Codebase Strcuture

< PROJECT ROOT >
   |
   |-- app/__init__.py
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # Page chunks, components
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts common to all pages
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts (the master pages)
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages like index, UI
   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)
   |    |    |
   |    |  index.html                      # The default page
   |    |  login.html                      # Auth Login Page
   |    |  register.html                   # Auth Registration Page
   |    |  page-404.html                   # Error 404 page (page not found)
   |    |  page-500.html                   # Error 500 page (server error)
   |    |    *.html                        # Other pages 
   |-- requirements.txt
   |
   |-- run.py
   |
   |-- ****************************************************

Thanks for reading! Using any starter presented in this article, anyone with a basic programming knowledge might code faster a new project without reinventing the wheel and re-code basic features like authentication, database set up, or deployment scripts.

Discover and read more posts from Adi Chirilov - Sm0ke
get started
post commentsBe the first to share your opinion
Show more replies