You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
12
12
The **React** Design is crafted by [CodedThemes](https://codedthemes.com/?ref=appseed) on top of `MUI` Library.
18
18
19
+
<br />
19
20
20
21
## Product features
21
22
22
23
The product expects a running API backend that exposes an interface for login/logout and register actions.
23
24
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
+
<br />
25
27
26
-
## ✨ `React` Berry Dashboard
28
+
## `React` Berry Dashboard
27
29
28
30
-`M-UI` based design
29
31
- Modern aesthetics UI design - Designed by *[CodedThemes](https://codedthemes.com/?ref=appseed)*
@@ -39,16 +41,19 @@ By default, the guest users are redirected to the login page. Once the user is a
153
-
147
+
<br />
154
148
155
149
## Resources
156
150
157
-
- 👉 More [React Dashboards](https://appseed.us/admin-dashboards/react/) - provided by `AppSeed` (free & premium)
158
151
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
152
+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts
<SubHeading> Premium seed project built in React and Django on top of Datta Able Dashboard (PRO version)</SubHeading>
8
8
9
-
Open-source full-stack seed project coded in [**React** and **Django**](https://appseed.us/product/django-react-datta-able-pro) on top of a modern design from **CodedThemes**. The **React** / **Django** codebase is already configured with an SQLite database, API, and JWT token-based
10
-
authentication flow.
9
+
Open-source full-stack seed project coded in [**React** and **Django**](https://appseed.us/product/datta-able-pro/full-stack/react/) on top of a modern design from **[CodedThemes](https://codedthemes.com/?ref=appseed)**.
10
+
The **React** / **Django** codebase is already configured with an SQLite database, API, and JWT token-basedauthentication flow.
The product expects a running API backend that exposes an interface for login/logout and register actions. 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. Here are the steps to compile the product.
21
+
The product expects a running API backend that exposes an interface for login/logout and register actions.
22
+
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.
23
+
Here are the steps to compile the product.
24
+
25
+
<br />
20
26
21
27
> Dependencies
22
28
23
-
To use the product, **Python3** is required, and **GIT** command-line tool to clone/download the project from the public repository.
29
+
To use the product, `Nodejs`, and `Python3` are required in order to compile the product (backend & frontend).
24
30
25
-
> **Step #1** - Clone the project
31
+
> **Step #1** - Download the sources from the [product page](https://appseed.us/product/datta-able-pro/full-stack/react/) (requires a purchase)
> **Step #2** - Install dependencies via NPM or yarn
@@ -54,6 +60,8 @@ const config = {
54
60
};
55
61
```
56
62
63
+
<br />
64
+
57
65
## Django API Server
58
66
59
67
To use the product and see all features in action an API server should be up and running. This can be done in two ways:
@@ -92,4 +100,11 @@ The API server will start using the default port `5000`.
92
100
93
101
With backend and frontend up & running, we can start using the product, register. and authenticate. The React UI will reveal the private pages once the users are authenticated.
94
102
95
-
<SubHeading> Open-source Full Stack seed project built in React and Django on top of Datta Able Dashboard </SubHeading>
9
9
10
-
Open-source full-stack seed project coded in [**React** and **Django**](https://appseed.us/product/django-react-datta-able) on top of a modern design from **CodedThemes**. The **React** / **Django** codebase is already configured with an SQLite database, API, and JWT token-based authentication flow.
10
+
Open-source full-stack seed project coded in [**React** and **Django**](https://appseed.us/product/datta-able/api-server-django/react/) on top of a modern design from **[CodedThemes](https://codedthemes.com/?ref=appseed)**.
11
+
The **React** / **Django** codebase is already configured with an SQLite database, API, and JWT token-based authentication flow.
The product expects a running API backend that exposes an interface for login/logout and register actions. 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. Here are the steps to compile the product.
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
+
<br />
26
+
27
+
## ✨ `React` Datta Able
28
+
29
+
- Modern aesthetics UI design - Designed by *[CodedThemes](https://bit.ly/37fF9RT)*
30
+
- React, Redux, Redux-persist
31
+
32
+
<br />
33
+
34
+
> `Tests` (compatibility matrix)
35
+
36
+
| NodeJS | NPM | YARN |
37
+
| --- | --- | --- |
38
+
|`v14.0.0`| ❌ | ✅ |
39
+
|`v16.0.0`| ✅ | ✅ |
40
+
|`v18.0.0`| ❌ | ❌ |
41
+
42
+
43
+
<br />
21
44
22
-
> Dependencies
45
+
## ✨ `Django API` Features
23
46
24
-
To use the product, **Python3** is required, and **GIT** command-line tool to clone/download the project from the public repository.
> **Step #2** - Install dependencies via NPM or yarn
74
+
<br />
75
+
76
+
> **Step 2** - Install dependencies via NPM or yarn
34
77
35
78
```bash
36
79
$ npm i
37
80
// OR
38
81
$ yarn
39
82
```
40
83
41
-
> **Step #3** - Start in development mode
84
+
<br />
85
+
86
+
> **Step 3** - Start in development mode
42
87
43
88
```bash
44
-
$ npm run start
89
+
$ npm run start
45
90
// OR
46
91
$ yarn start
47
92
```
48
93
49
-
> **Step #4** - Configure the backend - `src/config.js`
50
-
51
-
```javascript
52
-
constconfig= {
53
-
...
54
-
API_SERVER:'http://localhost:5000/api/'// <-- The magic line
55
-
};
56
-
```
57
-
58
-
## Django API Server
94
+
<br />
59
95
60
-
To use the product and see all features in action an API server should be up and running. This can be done in two ways:
96
+
At this point, the app is available in the browser `localhost:3000` (the default address).
61
97
62
-
- Compile and start a simple [**Django API Server**](../../boilerplate-code/api-server/django.mdx) already built to work with this frontend
63
-
- Mock a test server using the [**API Interface**](../../boilerplate-code/api-server/api-unified-definition.mdx) definition.
64
98
65
-
99
+
<br />
66
100
67
-
Here we will use the first option and build a real API server coded in **Django Framework** on top of [DRF](https://www.django-rest-framework.org/) Library with SQLite persistence.
101
+
### 👉 Start the Backend Server
68
102
69
-
> **Step #1** - Clone the API Server from Github
103
+
> **Step 1** - Change the directory to `api-server-django`
> **Step 2** - Install dependencies using a `virtual environment`
112
+
113
+
```bash
114
+
$ # Virtualenv modules installation (Unix based systems)
115
+
$ virtualenv env
116
+
$ source env/bin/activate
117
+
$
118
+
$ # Virtualenv modules installation (Windows based systems)
119
+
$ # virtualenv env
120
+
$ # .\env\Scripts\activate
81
121
$
82
122
$ pip install -r requirements.txt
83
123
```
84
124
85
-
> **Step #3** - Start the APi Server
125
+
<br />
86
126
87
-
```
127
+
> **Step 3** - Setup the database
128
+
129
+
```bash
130
+
$ python manage.py makemigrations
88
131
$ python manage.py migrate
132
+
```
133
+
134
+
<br />
135
+
136
+
> **Step 4** - Start the API server (development mode)
137
+
138
+
```bash
89
139
$ python manage.py runserver 5000
90
140
```
91
141
92
-
The API server will start using the default port `5000`.
142
+
Use the API via `POSTMAN` or `Swagger Dashboard` at `localhost:5000`.
143
+
144
+
<br />
145
+
146
+
## Resources
93
147
94
-
With backend and frontend up & running, we can start using the product, register. and authenticate. The React UI will reveal the private pages once the users are authenticated.
148
+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
149
+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts
0 commit comments