Giter VIP home page Giter VIP logo

app-generator / flask-pixel Goto Github PK

View Code? Open in Web Editor NEW
119.0 7.0 62.0 18.56 MB

Flask Pixel UI Kit - Open-Source web app coded in Flask | AppSeed

Home Page: https://appseed.us/product/pixel-bootstrap/flask/

License: Other

Shell 0.01% Dockerfile 0.03% Python 1.23% CSS 45.72% JavaScript 0.53% SCSS 12.60% HTML 39.88%
flask-template bootstrap5 flask-app flask-application flask-boilerplate flask-bootstrap flask-bootstrap5 flask-docker flask-docker-boilerplate flask-sqlalchemy

flask-pixel's Introduction

Open-Source Flask App crafted on top of a modern design. Pixel is a free and open-source Bootstrap 5 UI Kit featuring over 80 fully coded UI elements and example pages that will help you prototype and build a website for your next project.


Features

Have questions? Contact Support (Email & Discord) provided by AppSeed

Free Version PRO Version Custom Development
โœ“ Up-to-date dependencies Everything in Free, plus: Everything in PRO, plus:
โœ“ Best Practices โœ… Premium Bootstrap 5 Design โœ… 1 Week Custom Development
โœ“ DB: SQLite, MySql โœ… Auth Provided by Flask-Security-Too โœ… Dedicated Developer
โœ“ DB Tools: ORM, Flask-Migrate โœ… Extended User Model โœ… Weekly Sprints
โœ“ Session-Based authentication โœ… Users Roles โœ… Technical SPECS
โœ“ Docker โœ… Private REPO Access โœ… Documentation
โœ“ CI/CD Flow via Render โœ… PRO Support - Email & Discord โœ… 30 days Delivery Warranty
โœ“ Free Support - โœ… CI/CD for AWS, DO (Extra)
--------------------------------- --------------------------------- ---------------------------------
โœ“ LIVE Demo ๐Ÿš€ LIVE Demo PRO ๐Ÿ›’ Order: $999 (GUMROAD)

Pixel Bootstrap Lite - Full-Stack Starter generated by AppSeed.


Start with Docker

๐Ÿ‘‰ Step 1 - Download the code from the GH repository (using GIT)

$ git clone https://github.com/app-generator/flask-pixel.git
$ cd flask-pixel

๐Ÿ‘‰ Step 2 - Start the APP in Docker

$ docker-compose up --build 

Visit http://localhost:5085 in your browser. The app should be up & running.


Manual Build

Download the code

$ git clone https://github.com/app-generator/flask-pixel.git
$ cd flask-pixel

๐Ÿ‘‰ Set Up for Unix, MacOS

Install modules via VENV

$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ export FLASK_APP=run.py
$ export FLASK_ENV=development

Start the app

$ flask run

At this point, the app runs at http://127.0.0.1:5000/.


๐Ÿ‘‰ Set Up for Windows

Install modules via VENV (windows)

$ virtualenv env
$ .\env\Scripts\activate
$ pip3 install -r requirements.txt

Set Up Flask Environment

$ # CMD 
$ set FLASK_APP=run.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\run.py"
$ $env:FLASK_ENV = "development"

Start the app

$ flask run

At this point, the app runs at http://127.0.0.1:5000/.


๐Ÿ‘‰ Create Users

By default, the app redirects guest users to authenticate. In order to access the private pages, follow this set up:

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

CSS/SCSS Update

In order to customize the UI (primary/seconday colors), follow this setup:

  • Navigate to apps/static/assets
  • Edit SCSS files
  • Install dependencies using PNPM
    • pnpm i
  • Recompile the SCSS files with Gulp
    • gulp

NOTE: the above setup was tested using:

  • Node v16.15.0
  • Gulp CLI 2.3.0, LOCAL 4.0.2
  • PNPM v8.6.0

Codebase Structure

The project is coded using blueprints, app factory pattern, dual configuration profile (development and production) and an intuitive structure presented bellow:

< PROJECT ROOT >
   |
   |-- apps/
   |    |
   |    |-- home/                           # A simple app that serve HTML files
   |    |    |-- routes.py                  # Define app routes
   |    |
   |    |-- authentication/                 # Handles auth routes (login and register)
   |    |    |-- routes.py                  # Define authentication routes  
   |    |    |-- models.py                  # Defines models  
   |    |    |-- 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
   |    |    
   |  config.py                             # Set up the app
   |    __init__.py                         # Initialize the app
   |
   |-- requirements.txt                     # App Dependencies
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- run.py                               # Start the app - WSGI gateway
   |
   |-- ************************************************************************

PRO Version

For more components, pages and priority on support, feel free to take a look at this amazing starter:

Pixel PRO is a premium design crafted by the Themesberg agency on top of Bootstrap 5 Framework. Pixel is a premium Bootstrap 5 UI Kit that provides 1000+ components, 50+ sections and 35 example pages including a fully fledged user dashboard.

Pixel Bootstrap PRO - Full-Stack Starter generated by AppSeed



Flask Pixel Lite - Open-source starter generated by App Generator.

flask-pixel's People

Contributors

app-generator avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.