Flask React Datta Able
Open-source Full Stack seed project built in React and Flask on top of Datta Able Dashboard
Last updated
Open-source Full Stack seed project built in React and Flask on top of Datta Able Dashboard
Last updated
Open-source full-stack seed project coded in React and Flask on top of a modern design from CodedThemes. The React / Flask codebase is already configured with an SQLite database, API, and JWT token-based authentication flow.
Flask React Datta Able - product page
Flask React Datta Able - LIVE demo
The product expects a running API backend that exposes an interface for login/logout and register actions. By default, the guest users are redirected to the login page. Once the user is authenticated using an existing account or the new one, all private pages are accessible. Here are the steps to compile the product.
Dependencies
To use the product, Python3 is required, and GIT command-line tool to clone/download the project from the public repository.
Step #1 - Clone the project
Step #2 - Install dependencies via NPM or yarn
Step #3 - Start in development mode
Step #4 - Configure the backend -
src/config.js
To use the product and see all features in action an API server should be up and running. This can be done in two ways:
Compile and start a simple Flask API Server already built to work with this frontend
Mock a test server using the API Interface definition.
Here we will use the first option and build a real API server coded in Flask Framework on top of Flask-RestX Library with SQLite persistence.
Step #1 - clone the project using GIT
Step #2 - Install dependencies (using a virtual environment)
Install dependencies in once the virtualenv
is activated
Step #3 - Prepare the environment
Or for Windows-based systems
Step #4 - Initialize the database, check
run.py
for shell context
Step #5 - Start the API server
Visit http://localhost:5000
in your browser. The API server will be running.
With backend and frontend up & running, we can start using the product, register. and authenticate. The React UI will reveal the private pages once the users are authenticated.