Flask React Soft Dashboard

Start your development with an Innovative Admin Template for Material-UI and React. Soft UI Dashboard is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. The product comes with a simple JWT authentication flow: login/register/logout.

Features

Innovative Material UI Design - Crafted by Creative-Tim
React, Redux, Redux-persist
Authentication: JWT Login/Register/Logout
Full-stack Ready using a Flask API Server (open-source project) - Server Features
- Flask / Flask-RestX / SQLite3 - a simple, easy to use backend
- Authentication with JWT (login, logout, register)
- Docker, Unitary tests

Links

👉 Flask React Soft UI Dashboard - product page
👉 Flask React Soft UI Dashboard - LIVE Demo
🎁 Free Support via Github (issues tracker) and Discord.

React UI Tests:

NodeJS	NPM	YARN	Status
`v16.13.0`	`v8.1.0`	`v1.22.5`	✔️
`v14.15.0`	`v6.14.8`	`v1.22.5`	✔️
`v12.22.0`	`v6.14.11`	`v1.22.5`	✔️

✨ Quick-start

Start the Flask API using Docker

$ cd flask-api
$ docker-compose up --build

At this point, the API should be up & running at http://localhost:5000, and we can test the interface using POSTMAN or curl.

Start the React UI (using another terminal)

$ cd react-ui
$ yarn         # install dependencies
$ yarn start   # start the app

Once all the above commands are executed, the React UI should be visible in the browser. By default, the app redirects the guest users to authenticate. After we register a new user and Sign IN, all the private pages become accessible.

General Information

The product is built using a two-tier pattern where the React frontend is decoupled logically and physically from the API backend. How to use the product:

Compile and start the Flask API Backend
- by default the server starts on port 5000
Compile and start the React UI
- UI will start on port 3000 and expects a running backend on port 5000
Configuration (Optional)
- Change the API port
- Configure the API port used by the React UI to communicate with the backend

✨ Manual build

Start the Flask API

$ cd flask-api
$ 
$ # Create a virtual environment
$ virtualenv env
$ source env/bin/activate
$
$ # Install modules
$ pip install -r requirements.txt
$
$ # Set up the environment
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
$ 
$ # Start the API
$ flask run

Compile & start the React UI

$ cd react-ui
$
$ # Install Modules
$ yarn
$
$ # Start for development (LIVE Reload)
$ yarn start

Configuration (Optional)

Change the port exposed by the Flask API

$ flask run --port=5001

Now, the API starts on port 5001.

Update the API port used by the React Frontend

API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

✨ API

For a fast set up, use this POSTMAN file: api_sample

Register - api/users/register (POST request)

POST api/users/register
Content-Type: application/json

{
    "username":"test",
    "password":"pass", 
    "email":"test@appseed.us"
}

Login - api/users/login (POST request)

POST /api/users/login
Content-Type: application/json

{
    "password":"pass", 
    "email":"test@appseed.us"
}

Logout - api/users/logout (POST request)

POST api/users/logout
Content-Type: application/json
authorization: JWT_TOKEN (returned by Login request)

{
    "token":"JWT_TOKEN"
}

✨ Product UI

Flask React Soft UI Dashboard - Login

Flask React Soft UI Dashboard - User Profile

Flask React Soft UI Dashboard - Billing Page

Links & Resources

Ask for Support on Discord
See for React Starters - index provided by AppSeed

Flask React Soft UI Dashboard - Full-Stack seed project provided by AppSeed App Generator

IAmLuisJ/dataBoard