Skip to content

Commit 32ebf57

Browse files
app-generatorapp-generator
committed
UPD React Starters
1 parent 4854f98 commit 32ebf57

File tree

4 files changed

+378
-270
lines changed

4 files changed

+378
-270
lines changed

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

Lines changed: 146 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,212 @@
11
---
2-
title: NodeJS React Datta Able - Open-Source Starter
3-
sidebar_label: NodeJS React Datta Able
2+
title: NodeJS React Berry - Open-Source Starter
3+
sidebar_label: NodeJS React Berry
44
---
55

6-
# React Node JS Berry
6+
# [React Node JS Berry](https://appseed.us/product/berry-dashboard/api-server-nodejs/react/)
77

8-
<SubHeading> Open-source Full Stack seed project built in React and Node JS on top of Berry Dashboard </SubHeading>
8+
<SubHeading> Open-source Full Stack seed project built in React and Django on top of Berry Dashboard (MUI Design)</SubHeading>
99

10-
Open-source full-stack seed project coded in **React** and **Node JS** on top of a modern **Material UI** design from **CodedThemes**. The React / NodeJS codebase is already configured with a SQLite database, API, JWT authentication flow powered by `Passport` library.
10+
Open-source full-stack seed project coded in [**React** and **Django**](https://appseed.us/product/berry-dashboard/api-server-nodejs/react/) on top of a `MUI Design` from **[CodedThemes](https://codedthemes.com/?ref=appseed)**.
11+
The **React** / **NodeJS** codebase is already configured with an SQLite database, API, and JWT token-based authentication flow.
1112

12-
> Features
13+
- 👉 [React Node JS Berry](https://appseed.us/product/berry-dashboard/api-server-nodejs/react/) - `Product Page`
14+
- 👉 [React Node JS Berry](https://react-node-js-berry-dashboard.appseed-srv1.com/) - `LIVE Demo`
1315

14-
- Modern aesthetics UI design - Designed by _CodedThemes_
16+
![React Berry Dashboard - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/174480640-e0b450b1-07a8-4cc7-84bc-287bb9c45773.png)
17+
18+
<br />
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+
## ✨ `React` Berry Dashboard
26+
27+
- `M-UI` based design
28+
- Modern aesthetics UI design - Designed by *[CodedThemes](https://codedthemes.com/?ref=appseed)*
1529
- React, Redux, Redux-persist
16-
- Authentication: JWT Login/Register/Logout
17-
- Full-stack ready using a **Node JS API Server** (open-source project) - Server Features
18-
- `Typescript` / SQLite Persistence / TypeORM / Joy (validation)
19-
- Passport library - `passport-jwt` strategy.
2030

21-
> Links
31+
<br />
32+
33+
> `Tests` (compatibility matrix)
34+
35+
| NodeJS | NPM | YARN |
36+
| --- | --- | --- |
37+
| `v14.0.0` | ✅ | ✅ |
38+
| `v16.0.0` | ✅ | ✅ |
39+
| `v18.0.0` | ❌ | ❌ |
40+
41+
42+
<br />
43+
44+
## ✨ `NodeJS API` Features
45+
46+
- Stack: `NodeJS` / `Express` / **SQLite**
47+
- `TypeScript`, Joy for validation
48+
- **DB Layer**: `TypeORM`, `SQLite` persistence
49+
- **Auth**: Passport / `passport-jwt` strategy
50+
- [API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) - the unified API structure implemented by this server
51+
52+
<br />
2253

23-
- [React Node JS Berry](https://appseed.us/product/react-node-js-berry-dashboard) - product page
24-
- [React Node JS Berry](https://react-node-js-berry-dashboard.appseed-srv1.com/) - LIVE Demo
25-
- Free Support via Github (issues tracker) and [Discord](https://discord.gg/fZC6hup).
26-
- Related Products:
27-
- **PRO Version**: [Full-Stack React Berry PRO](https://appseed.us/full-stack/react-berry-dashboard)
28-
- Django API Backend - [Django React Berry](https://appseed.us/product/django-react-berry-dashboard) - `open-source` project
29-
- Flask API Backend - [Flask React Berry](https://appseed.us/product/flask-react-berry-dashboard) - `open-source` project
54+
> `Tests` (compatibility matrix)
3055
31-
![React Node JS - Berry Dashboard.](../../../static/assets/react-node-js-berry-dashboard.png)
56+
| NodeJS | NPM | YARN |
57+
| --- | --- | --- |
58+
| `v18.0.0` | ❌ | ✅ |
59+
| `v17.0.0` | ❌ | ✅ |
60+
| `v16.13.0` | ❌ | ✅ |
61+
| `v16.0.0` | ❌ | ❌ |
3262

33-
## How to use the App
3463

35-
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 all private pages are accessible. Here are the steps to compile the product.
64+
<br />
3665

37-
> Dependencies
66+
## ✨ How to use it
3867

39-
To use the product, a decent version of **Node JS** (>= 12.x) is required, and **GIT** command-line tool to clone/download the project from the public repository.
68+
Being a full-stack product, the backend and the frontend should be compiled and started separately.
69+
Before starting to compile the product, make sure you have the following tools installed in the environment:
4070

41-
> **Step #1** - Clone the project
71+
- [NodeJS](https://nodejs.org/en/) - version `14.x` or higher
72+
- [GIT](https://git-scm.com/) - used to clone tjhe sources from Github
73+
- [Python3](https://www.python.org/) - used in many tools
74+
75+
<br />
76+
77+
### 👉 Start the Frontend
78+
79+
> **Step 1** - Once the project is downloaded, change the directory to `react-ui`.
4280
4381
```bash
44-
$ git clone https://github.com/app-generator/react-berry-dashboard.git
45-
$ cd react-berry-dashboard
82+
$ cd react-ui
4683
```
4784

48-
> **Step #2** - Install dependencies via NPM or yarn
85+
<br />
86+
87+
> **Step 2** - Install dependencies via NPM or yarn
4988
5089
```bash
5190
$ npm i
5291
// OR
5392
$ yarn
5493
```
5594

56-
> **Step #3** - Start in development mode
95+
<br />
96+
97+
> **Step 3** - Start in development mode
5798
5899
```bash
59-
$ npm run start
100+
$ npm run start
60101
// OR
61102
$ yarn start
62103
```
63104

64-
> **Step #4** - Configure the backend - `src/config.js`
65-
66-
```javascript
67-
const config = {
68-
...
69-
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
70-
};
71-
```
72-
73-
## API Server
74-
75-
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:
76-
77-
- Compile and start a [Node JS API Server](https://github.com/app-generator/api-server-nodejs) already built to work with this frontend
78-
- Mock a test server using the [API Interface](https://github.com/app-generator/api-server-nodejs/blob/master/media/api.postman_collection.json) definition
79-
80-
Here, we will use the first version and build a real API server coded in Node JS/Express and SQLite persistence.
105+
<br />
81106

82-
> API Server Description
107+
At this point, the app is available in the browser `localhost:3000` (the default address).
83108

84-
Express / Nodejs Starter with JWT authentication, MongoDB where authentication is based on [json web tokens](https://jwt.io/). `passport-jwt` strategy is used to handle the Email/Password authentication. After a successful login, the generated token is sent to the requester.
85109

86-
> Dependencies
110+
<br />
87111

88-
- [Node.js](https://nodejs.org/) >= 12.x
89-
- GIT: `command-line` utility
112+
### 👉 Start the Backend Server
90113

91-
> **Step #1** - Clone the API Server from Github
114+
> **Step 1** - Change the directory to `api-server-nodejs`
92115
93116
```bash
94-
$ git clone https://github.com/app-generator/api-server-nodejs.git
95117
$ cd api-server-nodejs
96118
```
97119

98-
> **Step #2** - Install dependencies via NPM or yarn
120+
<br />
121+
122+
> **Step 2** - Install dependencies via NPM or yarn
99123
100124
```bash
101125
$ npm i
102126
// OR
103127
$ yarn
104128
```
105129

106-
> **Step #3** - Run the SQLite migration via `TypeORM`
130+
<br />
131+
132+
> **Step 3** - Run the SQLite migration via TypeORM
107133
108134
```bash
135+
$ npm run typeorm migration:run
136+
// OR
109137
$ yarn typeorm migration:run
110138
```
111139

112-
> **Step #3** - Start in development mode
140+
<br />
141+
142+
> **Step 4** - Start the API server (development mode)
113143
114144
```bash
115-
$ npm dev
145+
$ npm run dev
116146
// OR
117147
$ yarn dev
118148
```
119149

120-
The API server will start using the `PORT` specified in `.env` file, default value `5000`, same as the one expected by the front end.
150+
The API server will start using the `PORT` specified in `.env` file (default 5000).
151+
152+
<br />
153+
154+
## 👉 Codebase Structure
155+
156+
```bash
157+
< ROOT / src >
158+
|
159+
|-- config/
160+
| |-- config.ts # Configuration
161+
| |-- passport.ts # Define Passport Strategy
162+
|
163+
|-- migration/
164+
| |-- some_migration.ts # database migrations
165+
|
166+
|-- models/
167+
| |-- activeSession.ts # Sessions Model (Typeorm)
168+
| |-- user.ts # User Model (Typeorm)
169+
|
170+
|-- routes/
171+
| |-- users.ts # Define Users API Routes
172+
|
173+
|
174+
|-- index.js # API Entry Point
175+
|-- .env # Specify the ENV variables
176+
|
177+
|-- ************************************************************************
178+
```
179+
180+
<br />
181+
182+
## 👉 SQLite Path
183+
184+
The SQLite Path is set in `.env`, as `SQLITE_PATH`
185+
186+
<br />
187+
188+
## 👉 Database migration
189+
190+
> Generate migration:
191+
192+
```bash
193+
$ yarn typeorm migration:generate -n your_migration_name
194+
```
195+
196+
> run migration:
121197
122-
From this point, the React Product should be able to authenticate and register new users.
198+
```bash
199+
$ yarn typeorm migration:run
200+
```
123201

124-
![React Node JS Berry - Login Page.](../../../static/assets/react-dashboard-berry-login.jpg)
202+
<br />
125203

126204
## Resources
127205

128-
- [React Apps](https://appseed.us/apps/react) - seed projects provided by AppSeed
129-
- Free [Support](https://appseed.us/support) via eMail and [Discord](https://discord.gg/fZC6hup)
206+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
207+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts
208+
- 🚀 [Full-Stack React Berry PRO](https://appseed.us/product/berry-dashboard-pro/full-stack/) - `PRO Version`
209+
- ✅ `Enhanced UI` - more pages and components
210+
- ✅ `Priority` on support
211+
212+
![React Berry Dashboard PRO - Full-Stack Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/174492378-280b6de6-df58-4df7-865d-f86f6e9b1dd0.png)

0 commit comments

Comments
 (0)