Skip to content

Commit ae2f7d3

Browse files
app-generatorapp-generator
committed
React Berry - Added Flask & Django(free)
1 parent 2d3b32b commit ae2f7d3

File tree

2 files changed

+186
-3
lines changed

2 files changed

+186
-3
lines changed

‎docs/products/react/django-berry-dashboard.mdx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sidebar_label: Django React Berry
77

88
<SubHeading> Open-source Full Stack seed project built in React and Django on top of Berry Dashboard </SubHeading>
99

10-
Full-Stack Seed project generated by [React App Generator](https://appseed.us/generator/react/) top of **[Berry Dashboard](https://appseed.us/product/berry-dashboard/api-server-django/react/)** design.
10+
`Full-Stack` Seed project generated by [React App Generator](https://appseed.us/generator/react/) top of **[Berry Dashboard](https://appseed.us/product/berry-dashboard/api-server-django/react/)** design.
1111
The backend logic is provided by a simple, `easy-to-extend` **DJANGO API Server** that manages the Authentication flow (login, registration, logout) using `JSON Web Tokens` (JWT).
1212
The **React** Design is crafted by [CodedThemes](https://codedthemes.com/?ref=appseed) on top of `MUI` Library.
1313

@@ -138,11 +138,12 @@ $ docker-compose up --build
138138
```
139139

140140

141-
## [React Berry Dashboard PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/)
141+
## [React Berry PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) `fullstack`
142142

143143
> For more components, pages and priority on support, feel free to take a look at this amazing starter:
144144
145-
Berry 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, Berry Dashboard PRO is ready to help you create stunning websites and web apps.
145+
Berry Dashboard is a premium React Design now available for download as a full-stack app.
146+
Made of hundred of elements, designed blocks, and fully coded pages, Berry Dashboard PRO is ready to help you create stunning websites and web apps.
146147

147148
- 👉 [React Berry Dashboard PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) - Product Page
148149
- ✅ `Enhanced UI` - more pages and components

‎docs/products/react/flask-berry-dashboard.mdx‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Flask React Berry - Open-Source Starter
3+
sidebar_label: Flask React Berry
4+
---
5+
6+
# [Flask React Berry](https://appseed.us/product/berry-dashboard/api-server-flask/react/)
7+
8+
<SubHeading> Open-source Full Stack seed project built in React and Flask on top of Berry Dashboard </SubHeading>
9+
10+
`Full-Stack` Seed project generated by [React App Generator](https://appseed.us/generator/react/) top of **[Berry Dashboard](https://appseed.us/product/berry-dashboard/api-server-flask/react/)** design.
11+
The backend logic is provided by a simple, `easy-to-extend` **Flask API Server** that manages the Authentication flow (login, registration, logout) using `JSON Web Tokens` (JWT).
12+
The **React** Design is crafted by [CodedThemes](https://codedthemes.com/?ref=appseed) on top of `MUI` Library.
13+
14+
- 👉 [Flask React Berry](https://appseed.us/product/berry-dashboard/api-server-flask/react/) - product page
15+
- 👉 [Flask React Berry](https://flask-react-berry-dashboard.appseed-srv1.com/) - LIVE Demo
16+
17+
![React Berry Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/174480640-e0b450b1-07a8-4cc7-84bc-287bb9c45773.png)
18+
19+
20+
## Product features
21+
22+
The product expects a running API backend that exposes an interface for login/logout and register actions.
23+
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.
24+
25+
26+
## ✨ `React` Berry Dashboard
27+
28+
- `M-UI` based design
29+
- Modern aesthetics UI design - Designed by *[CodedThemes](https://bit.ly/37fF9RT)*
30+
- React, Redux, Redux-persist
31+
32+
33+
> `Tests` (compatibility matrix using Ubuntu 18 LTS as reference)
34+
35+
| NodeJS | NPM | YARN |
36+
| --- | --- | --- |
37+
| `v14.0.0` | ✅ | ✅ |
38+
| `v16.0.0` | ✅ | ✅ |
39+
| `v18.0.0` | ❌ | ❌ |
40+
41+
42+
## ✨ `Flask API` Features
43+
44+
- Stack: `Flask` / `Flask-RestX` / **SQLite**
45+
- **DB Layer**: `SqlAlchemyORM`, `SQLite` persistence
46+
- **Auth**: JWT tokens managed via `Flask-jwt_extended`
47+
- [API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) - the unified API structure implemented by this server
48+
49+
50+
## ✨ How to use it
51+
52+
Being a full-stack product, the backend and the frontend should be compiled and started separately.
53+
Before starting to compile the product, make sure you have the following tools installed in the environment:
54+
55+
- [NodeJS](https://nodejs.org/en/) - version `14.x` or higher
56+
- [GIT](https://git-scm.com/) - used to clone tjhe sources from Github
57+
- [Python3](https://www.python.org/) - used in many tools
58+
59+
60+
### 👉 Start the Frontend
61+
62+
> **Step 1** - Once the project is downloaded, change the directory to `react-ui`.
63+
64+
```bash
65+
$ cd react-ui
66+
```
67+
68+
> **Step 2** - Install dependencies via NPM or yarn
69+
70+
```bash
71+
$ npm i
72+
// OR
73+
$ yarn
74+
```
75+
76+
> **Step 3** - Start in development mode
77+
78+
```bash
79+
$ npm run start
80+
// OR
81+
$ yarn start
82+
```
83+
84+
At this point, the app is available in the browser `localhost:3000` (the default address).
85+
86+
87+
### 👉 Start the Backend Server
88+
89+
> **Step 1** - Change the directory to `api-server-flask`
90+
91+
```bash
92+
$ cd api-server-flask
93+
```
94+
95+
> **Step 2** - Install dependencies using a `virtual environment`
96+
97+
```bash
98+
$ # Virtualenv modules installation (Unix based systems)
99+
$ virtualenv env
100+
$ source env/bin/activate
101+
$
102+
$ # Virtualenv modules installation (Windows based systems)
103+
$ # virtualenv env
104+
$ # .\env\Scripts\activate
105+
$
106+
$ pip install -r requirements.txt
107+
```
108+
109+
110+
> **Step 3** - Setup the `Flask` environment
111+
112+
```bash
113+
$ export FLASK_APP=run.py
114+
$ export FLASK_ENV=development
115+
// OR
116+
$ (Windows CMD) set FLASK_APP=run.py
117+
$ (Windows CMD) set FLASK_ENV=development
118+
// OR
119+
$ (Powershell) $env:FLASK_APP = ".\run.py"
120+
$ (Powershell) $env:FLASK_ENV = "development"
121+
```
122+
123+
124+
> **Step 4** - Start the API server (development mode)
125+
126+
```bash
127+
$ flask run
128+
```
129+
130+
Use the API via `POSTMAN` or `Swagger Dashboard` at `localhost:5000`.
131+
132+
133+
### 👉 Start API using `Docker`
134+
135+
> **Step 1** - Change the directory to `api-server-flask`
136+
137+
```bash
138+
$ cd api-server-flask
139+
```
140+
141+
142+
> **Step 2** - Start API using `docker-compose` command
143+
144+
```bash
145+
$ docker-compose up --build
146+
```
147+
148+
149+
## 👉 Codebase Structure
150+
151+
```bash
152+
< ROOT >
153+
|
154+
api-server-flask/
155+
├── api
156+
│ ├── config.py
157+
│ ├── __init__.py
158+
│ ├── models.py
159+
│ └── routes.py
160+
├── requirements.txt
161+
├── run.py
162+
└── tests.py
163+
```
164+
165+
## [React Berry PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) `fullstack`
166+
167+
> For more components, pages and priority on support, feel free to take a look at this amazing starter:
168+
169+
Berry Dashboard is a premium React Design now available for download as a full-stack app.
170+
Made of hundred of elements, designed blocks, and fully coded pages, Berry Dashboard PRO is ready to help you create stunning websites and web apps.
171+
172+
- 👉 [React Berry Dashboard PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) - Product Page
173+
- ✅ `Enhanced UI` - more pages and components
174+
- ✅ `Priority` on support
175+
176+
![React Berry Dashboard PRO - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/174492378-280b6de6-df58-4df7-865d-f86f6e9b1dd0.png)
177+
178+
179+
## Resources
180+
181+
- 👉 More [React Dashboards](https://appseed.us/admin-dashboards/react/) - provided by `AppSeed` (free & premium)
182+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord

0 commit comments

Comments
 (0)