Flask Soft UI Dashboard

screenshot of Flask Soft UI Dashboard
vite
scss

Flask Soft Dashboard - Open-Source Starter | App-Generator.dev

Overview

Soft UI Dashboard Flask is an open-source Flask Dashboard created by AppSeed. It features a modern design with bold elements and is designed to help users create stunning websites and web apps. The theme is built on top of Bootstrap 5 and offers various features such as up-to-date dependencies, UI kit, persistence options (SQLite, MySql), authentication (Basic, OAuth via AllAuth for Github), API generator (using Flask-restX), deployment options (Docker, Page Compression), and CI/CD via Render. It provides a full-stack starter generated by AppSeed.

Features

  • Up-to-date Dependencies
  • UI Kit: Bootstrap 5, Dark-Mode (persistent)
  • Persistence: SQLite, MySql
  • Authentication: Basic, OAuth via AllAuth for Github
  • API Generator: Secure API via Flask-restX
  • Deployment: Docker, Page Compression
  • CI/CD via Render

Start in Docker

  1. Download the code from the GitHub repository (using GIT).
  2. Start the APP in Docker.
  3. Visit http://localhost:5085 in your browser. The app should be up & running.

Manual Build - Unix, MacOS

  1. Download the code.
  2. Set Up for Unix, MacOS:
    • Install modules via VENV.
    • Set Up Flask Environment.
    • Start the app (http://127.0.0.1:5000/).

Manual Build - Windows

  1. Download the code.
  2. Set Up for Windows:
    • Install modules via VENV (windows).
    • Set Up Flask Environment.
    • Start the app (http://127.0.0.1:5000/).

API Generator

This module helps to generate secure APIs using Flask-restX. Follow these steps:

  1. Edit/add your model in apps/models.py.
  2. Migrate the database.
  3. Update Configuration: apps/config.py, section API_GENERATOR.
  4. Generate the API code: $ flask gen_api. The new code is saved in apps/api.
  5. Access the API in the browser: /api/MODEL_NAME.
    • The API is secured using the JWT token provided by /login/jwt/ request (username & password should be provided).
    • GET requests are public (GET all, get Item).
    • Mutating requests are protected by a token generated based on the user credentials (username, pass).
  6. Two POSTMAN Collections are provided in the media directory:
    • Books API: Uses PORT *5000 for the API.
    • Books API 2: Uses PORT *5085 for the API (default port in Docker).
    • In case both ports are unusable in your environment, feel free to edit the files before POSTMAN import.

Create Users

By default, the app redirects guest users to authenticate. To access the private pages, follow this setup:

  1. Start the app via flask run.
  2. Access the registration page and create a new user: http://127.0.0.1:5000/register.
  3. Access the sign-in page and authenticate: http://127.0.0.1:5000/login.

Summary

Soft UI Dashboard Flask is an open-source Flask Dashboard with a modern design and bold elements. It offers a range of features including up-to-date dependencies, a UI kit based on Bootstrap 5, persistence options (SQLite, MySql), authentication (Basic, OAuth via AllAuth for Github), API generation using Flask-restX, deployment options (Docker, Page Compression), and CI/CD via Render. The installation process can be done through Docker or manually on Unix/MacOS or Windows. It also provides a guide on how to create users and access private pages.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.