Flask React Soft Dashboard - Free Project
Tags: webdev, react, flask, opensource
Published: 2022-01-28 16:22:32

---
title: Flask React Soft Dashboard - Free Project
published: true
description: Open-source seed project that uses a beautiful React design powered by a simple Flask API server. Sources are available on Github (MIT License).
tags: webdev, react, flask, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2aokyoaic0b397trbc5q.jpg
canonical_url: https://blog.appseed.us/flask-react-soft-dashboard-free-project/
---
Hello Coders!

This article presents an `open-source` full-stack project that uses a react **Material-UI React** design powered by a simple **Flask API Server**. [Flask React Soft](https://appseed.us/product/flask-react-soft-dashboard) can be downloaded from Github without a registration lock and used for commercial projects or eLearning activities. For newcomers, `Flask` is a leading framework powered by Python and `React` is a popular JS library for coding user interfaces baked by Facebook.

> Thanks for reading! 

- 👉 [Flask React Soft](https://flask-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - LIVE Demo
- 👉 [Flask React Soft](https://github.com/app-generator/flask-react-soft-dashboard) - source code

---

`Soft UI Dashboard React` is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

---

## ✨ Product Features

- `Innovative Material UI Design` - Crafted by Creative-Tim
- `React`, Redux, Redux-persist
- `Authentication`: JWT Login/Register/Logout
- `Full-Stack ready` via a simple Flask API
- `Docker` support for API part
- `SQLite` persistence, Flask-RestX
- `Up-to-date dependencies`

---

The product is built using a `two-tier` pattern where the **React** frontend is decoupled logically and physically from the API backend. In order to start the product in a local environment, we need to type a short-list with commands in the terminal window:

- 👉 Clone/download product sources
- 👉 Compile and start the API using a manual build or Docker
- 👉 Test the API using cURL or POSTMAN (optional)
- 👉 Compile and start the React UI
- 👉 Register users and authenticate

The frontend and the backend should be started from different terminal windows.

---

## ✨ Start the API Server

This free product is a simple API starter enhanced with JWT authentication, `SqlAlchemy`, `SQLite` persistence and deployment scripts via Docker. It has all the ready-to-use bare minimum essentials and can be extended with ease.

> Clone/Download sources from Github

```bash
$ git clone https://github.com/app-generator/flask-react-soft-dashboard.git
$ cd flask-react-soft-dashboard
```

---

> Start API - via Docker

```bash
$ cd flask-api
$ docker-compose up --build
$
$ # API is up on port 5000
```

---

Once the commands are executed, we should be able to access the API and create users. POSTMAN is a popular tool for this operation but we can use a command-line tool like `cURL` as well.

---

![Flask React Soft - API Call via POSTMAN.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vzkvj90cfxhtrpehvc4.png)
 
---

## ✨ Start the React UI

`Soft UI Dashboard` is compatible with multiple NodeJS versions (12.x, 14.x, 16.x) and we can compile and start the product with a single command:

```bash
$ cd react-ui
$ yarn         # install modules
$ yarn start   # start the app
$
$ # React UI is up on port 3000
```

Once the UI is visible in the browser, we can register new users, authenticate and interact with all private pages.

---

![Flask React Soft - Login Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rc8achp4nrv993pqxrr.png)
 
---

> Flask React Soft - Charts & Widgets

![Flask React Soft - Charts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqh5469ktejfzw3cqvez.png)

---

> Flask React Soft - User profile

![Flask React Soft - Profile Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azq455stroic9749o5v9.png)
 
---

In case Flask is not your preferred backend server, the react frontend can be also used with [NodeJS](https://github.com/app-generator/api-server-nodejs), [Laravel](https://github.com/app-generator/api-server-laravel) or [Django](https://github.com/app-generator/api-server-django) (all free).

---

> **Thanks for reading!** For more resources, feel free to access:

---

- 🎁 [Django React Soft](https://appseed.us/product/django-react-soft-dashboard) - free product
- 🎁 More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in **Flask**, Django and `React`