Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/app-generator/flask-react-soft-dashboard
Flask React - Soft Dashboard (Open-source) | AppSeed.us
https://github.com/app-generator/flask-react-soft-dashboard
appseed flask react soft-dashboard
Last synced: about 2 months ago
JSON representation
Flask React - Soft Dashboard (Open-source) | AppSeed.us
- Host: GitHub
- URL: https://github.com/app-generator/flask-react-soft-dashboard
- Owner: app-generator
- License: other
- Created: 2021-10-10T07:31:58.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-29T11:45:47.000Z (over 1 year ago)
- Last Synced: 2024-10-11T04:43:30.985Z (2 months ago)
- Topics: appseed, flask, react, soft-dashboard
- Language: Python
- Homepage: https://appseed.us/product/soft-ui-dashboard/api-server-flask/react/
- Size: 5.95 MB
- Stars: 23
- Watchers: 4
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- jimsghstars - app-generator/flask-react-soft-dashboard - Flask React - Soft Dashboard (Open-source) | AppSeed.us (Python)
README
# [React Soft Ui Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-flask/react/) `full-stack`
Full-Stack Seed project generated by **[React App Generator](https://appseed.us/generator/react/)** top of *Soft Ui Dashboard* design. The backend logic is provided by a simple, `easy-to-extend` API Server that manages the Authentication flow (login, registration, logout) using `JSON Web Tokens` (JWT).
- 👉 [Flask React Soft UI Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-flask/react/) - `product page`
- 👉 [Flask React Soft UI Dashboard](https://flask-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - `LIVE Demo`
- ✅ [Flask React Soft UI Dashboard](https://www.youtube.com/watch?v=gwWfahWPt2A) - `YouTube material`
> Features
- ✅ Innovative **Material UI** Design - Crafted by [Creative-Tim](https://bit.ly/3fKQZaL)
- ✅ 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
## ✨ `Video Presentation`
> This material explains how to build the project using the [App Generator](https://appseed.us/generator/react/) and deploy with [LIVE Deployer](https://appseed.us/go-live/) service.
https://user-images.githubusercontent.com/51070104/202889957-ea8f6808-7a72-45ec-91f7-4a02b19e63d9.mp4
## ✨ `React` Soft UI Dashboard
- `M-UI` based design crafted by *[Creative-Tim](https://bit.ly/3fKQZaL)*
- `UI Kit`: 70+ components, `8 Sample Pages`, `3 Customized Plugins`
> `Tests` (compatibility matrix)
| NodeJS | NPM | YARN |
| --- | --- | --- |
| `v14.15.0` | ✅ | ✅ |
| `v16.0.0` | ✅ | ✅ |
| `v18.0.0` | ❌ | ❌ |
## ✨ `Flask API` Features
- Stack: `Flask` / `Flask-RestX` / **SQLite**
- **DB Layer**: `SqlAlchemyORM`, `SQLite` persistence
- **Auth**: JWT tokens managed via `Flask-jwt_extended`
- [API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) - the unified API structure implemented by this server
## ✨ How to use it
Being a full-stack product, the backend and the frontend should be compiled and started separately.
Before starting to compile the product, make sure you have the following tools installed in the environment:
- [NodeJS](https://nodejs.org/en/) - version `14.x` or higher
- [GIT](https://git-scm.com/) - used to clone tjhe sources from Github
- [Python3](https://www.python.org/) - used in many tools
### 👉 Start the Frontend
> **Step 1** - Once the project is downloaded, change the directory to `react-ui`.
```bash
$ cd react-ui
```
> **Step 2** - Install dependencies via NPM or yarn
```bash
$ npm i
// OR
$ yarn
```
> **Step 3** - Start in development mode
```bash
$ npm run start
// OR
$ yarn start
```
At this point, the app is available in the browser `localhost:3000` (the default address).
### 👉 Start the Backend Server
> **Step 1** - Change the directory to `api-server-flask`
```bash
$ cd api-server-flask
```
> **Step 2** - Install dependencies using a `virtual environment`
```bash
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ pip install -r requirements.txt
```
> **Step 3** - Setup the `Flask` environment
```bash
$ export FLASK_APP=run.py
$ export FLASK_ENV=development
// OR
$ (Windows CMD) set FLASK_APP=run.py
$ (Windows CMD) set FLASK_ENV=development
$
$ (Powershell) $env:FLASK_APP = ".\run.py"
$ (Powershell) $env:FLASK_ENV = "development"
```
> **Step 4** - Start the API server (development mode)
```bash
$ flask run
```
Use the API via `POSTMAN` or `Swagger Dashboard` at `localhost:5000`.
## 👉 Codebase Structure
```bash
< ROOT >
|
api-server-flask/
├── api
│ ├── config.py
│ ├── __init__.py
│ ├── models.py
│ └── routes.py
├── requirements.txt
├── run.py
└── tests.py
```
## PRO Version
> For more components, pages and priority on support, feel free to take a look at this amazing starter:
Soft UI Dashboard is a premium React Design now available for download as a full-stack app. Made of hundred of elements, designed blocks, and fully coded pages, Soft UI Dashboard PRO is ready to help you create stunning websites and web apps.
- 👉 [React Soft UI Dashboard PRO](https://appseed.us/product/soft-ui-dashboard-pro/full-stack/) - Product Page
- ✅ `Enhanced UI` - more pages and components
- ✅ `Priority` on support
---
[React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-flask/react/) - Full-Stack Seed project generated by **[App Generator](https://appseed.us/generator/)**.