Skip to content

Commit 6a334cc

Browse files
app-generatorapp-generator
committed
React Section Update & Django Berry (NEW)
1 parent bf4a2c7 commit 6a334cc

10 files changed

+175
-37
lines changed

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Django React Berry - Open-Source Starter
3+
sidebar_label: Django React Berry
4+
---
5+
6+
# Django React Berry Dashboard
7+
8+
<SubHeading> Open-source Full Stack seed project built in React and Django 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* design.
11+
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).
12+
Design crafted by [CodedThemes](https://bit.ly/37fF9RT) on top of `MUI` Library.
13+
14+
- 👉 [Django React Berry](https://appseed.us/product/django-react-berry-dashboard) - product page
15+
- 👉 [Django React Berry](https://django-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+
## ✨ `Django API` Features
43+
44+
- Stack: : `Django` / `DRF` / **SQLite**
45+
- `Up-to-date dependencies`
46+
- **DB Layer**: Django Native `ORM`, `SQLite` persistence
47+
- **Auth**: JWT tokens managed via `PyJWT`
48+
- [API Definition](/boilerplate-code/api-server/api-unified-definition/) - the unified API structure implemented by this server
49+
50+
51+
## ✨ How to use it
52+
53+
Being a full-stack product, the backend and the frontend should be compiled and started separately.
54+
Before starting to compile the product, make sure you have the following tools installed in the environment:
55+
56+
- [NodeJS](https://nodejs.org/en/) - version `14.x` or higher
57+
- [GIT](https://git-scm.com/) - used to clone tjhe sources from Github
58+
- [Python3](https://www.python.org/) - used in many tools
59+
60+
61+
### 👉 Start the Frontend
62+
63+
> **Step 1** - Once the project is downloaded, change the directory to `react-ui`.
64+
65+
```bash
66+
$ cd react-ui
67+
```
68+
69+
> **Step 2** - Install dependencies via NPM or yarn
70+
71+
```bash
72+
$ npm i
73+
// OR
74+
$ yarn
75+
```
76+
77+
> **Step 3** - Start in development mode
78+
79+
```bash
80+
$ npm run start
81+
// OR
82+
$ yarn start
83+
```
84+
85+
At this point, the app is available in the browser `localhost:3000` (the default address).
86+
87+
88+
### 👉 Start the Backend Server
89+
90+
> **Step 1** - Change the directory to `api-server-django`
91+
92+
```bash
93+
$ cd api-server-django
94+
```
95+
96+
> **Step 2** - Install dependencies using a `virtual environment`
97+
98+
```bash
99+
$ # Virtualenv modules installation (Unix based systems)
100+
$ virtualenv env
101+
$ source env/bin/activate
102+
$
103+
$ # Virtualenv modules installation (Windows based systems)
104+
$ # virtualenv env
105+
$ # .\env\Scripts\activate
106+
$
107+
$ pip install -r requirements.txt
108+
```
109+
110+
> **Step 3** - Setup the database
111+
112+
```bash
113+
$ python manage.py makemigrations
114+
$ python manage.py migrate
115+
```
116+
117+
> **Step 4** - Start the API server (development mode)
118+
119+
```bash
120+
$ python manage.py runserver 5000
121+
```
122+
123+
Use the API via `POSTMAN` or `Swagger Dashboard` at `localhost:5000`.
124+
125+
126+
### 👉 Start API using `Docker`
127+
128+
> **Step 1** - Change the directory to `api-server-django`
129+
130+
```bash
131+
$ cd api-server-django
132+
```
133+
134+
> **Step 2** - Start API using `docker-compose` command
135+
136+
```bash
137+
$ docker-compose up --build
138+
```
139+
140+
141+
## [React Berry Dashboard PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/)
142+
143+
> For more components, pages and priority on support, feel free to take a look at this amazing starter:
144+
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.
146+
147+
- 👉 [React Berry Dashboard PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) - Product Page
148+
- ✅ `Enhanced UI` - more pages and components
149+
- ✅ `Priority` on support
150+
151+
![React Berry Dashboard PRO - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/174492378-280b6de6-df58-4df7-865d-f86f6e9b1dd0.png)
152+
153+
154+
## Resources
155+
156+
- 👉 More [React Dashboards](https://appseed.us/admin-dashboards/react/) - provided by `AppSeed` (free & premium)
157+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord

‎docs/products/react/django-datta-able-pro.mdx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
---
2-
sidebar_position: 8
3-
description: >-
4-
Premium seed project built in React and Django on top of Datta Able Dashboard
5-
(PRO version)
2+
title: Django React Datta PRO - Premium Starter
3+
sidebar_label: Django React Datta PRO
64
---
7-
85
# Django React Datta PRO
96

107
<SubHeading> Premium seed project built in React and Django on top of Datta Able Dashboard (PRO version)</SubHeading>

‎docs/products/react/django-datta-able.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 7
3-
description: >-
4-
Open-source Full Stack seed project built in React and Django on top of Datta
5-
Able Dashboard
2+
title: Django React Datta Able - Open-Source Starter
3+
sidebar_label: Django React Datta Able
64
---
75

86
# Django React Datta Able

‎docs/products/react/firebase-datta-able-pro.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 6
3-
description: >-
4-
Full Stack seed project built in React and Firebase on top of Datta Able
5-
Dashboard (premium version)
2+
title: Django Firebase Datta PRO - Premium Starter
3+
sidebar_label: Django Firebase Datta PRO
64
---
75

86
# React Firebase Datta PRO

‎docs/products/react/firebase-datta-able.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 5
3-
description: >-
4-
Open-source Full Stack seed project built in React and Firebase on top of
5-
Datta Able Dashboard
2+
title: Django Firebase Datta - Open-Source Starter
3+
sidebar_label: Django Firebase Datta
64
---
75

86
# React Firebase Datta Able

‎docs/products/react/flask-datta-able.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 9
3-
description: >-
4-
Open-source Full Stack seed project built in React and Flask on top of Datta
5-
Able Dashboard
2+
title: Flask React Datta - Open-Source Starter
3+
sidebar_label: Flask React Datta
64
---
75

86
# Flask React Datta Able

‎docs/products/react/node-js-berry-dashboard.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 1
3-
description: >-
4-
Open-source Full Stack seed project built in React and Node JS on top of Berry
5-
Dashboard
2+
title: NodeJS React Datta Able - Open-Source Starter
3+
sidebar_label: NodeJS React Datta Able
64
---
75

86
# React Node JS Berry

‎docs/products/react/node-js-datta-able-pro.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 3
3-
description: >-
4-
Premium seed project built in React and Node JS on top of Datta Able Dashboard
5-
(PRO version)
2+
title: NodeJS React Datta PRO - Premium Starter
3+
sidebar_label: NodeJS React Datta PRO
64
---
75

86
# React Node JS Datta PRO

‎docs/products/react/node-js-datta-able.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 2
3-
description: >-
4-
Open-source Full Stack seed project built in React and Node JS on top of Datta
5-
Able Dashboard
2+
title: NodeJS React Datta - Open-Source Starter
3+
sidebar_label: NodeJS React Datta
64
---
75

86
# React Node JS Datta Able

‎docs/products/react/node-js-material-kit-pro.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
2-
sidebar_position: 4
3-
description: >-
4-
Premium React UI Kit designed by Creative-Tim, coded as a full-stack product
5-
by AppSeed
2+
title: NodeJS React MKit PRO - Premium Starter
3+
sidebar_label: NodeJS React MKit PRO
64
---
75

86
# React Node Material Kit PRO

0 commit comments

Comments
 (0)