Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/app-generator/react-soft-ui-dashboard-pro
React Dashboard - Soft UI Dashboard PRO | AppSeed
https://github.com/app-generator/react-soft-ui-dashboard-pro
appseed fullstack react soft-ui-dashboard
Last synced: 2 months ago
JSON representation
React Dashboard - Soft UI Dashboard PRO | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/react-soft-ui-dashboard-pro
- Owner: app-generator
- License: other
- Created: 2021-10-24T08:21:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-03T10:49:24.000Z (about 2 years ago)
- Last Synced: 2024-10-11T04:43:59.115Z (3 months ago)
- Topics: appseed, fullstack, react, soft-ui-dashboard
- Homepage: https://appseed.us/product/soft-ui-dashboard-pro/full-stack/
- Size: 7.81 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [Full-Stack Soft Dashboard PRO](https://appseed.us/product/soft-ui-dashboard-pro/full-stack/)
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. The product comes with a simple JWT authentication flow: **login/register/logout** powered by a [Node JS API Server](https://github.com/app-generator/api-server-nodejs).
- 👉 [Full-stack Soft Dashboard PRO](https://appseed.us/product/soft-ui-dashboard-pro/full-stack/) - product page
- 👉 [Full-stack Soft Dashboard PRO](https://fullstack-react-soft-dashboard.appseed-srv1.com/) - LIVE Demo
> Features
- ✅ Innovative MUI Design - Crafted by [Creative-Tim](https://bit.ly/3fKQZaL)
- ✅ React, Redux, Redux-persist
- ✅ Authentication: JWT Login/Register/Logout
- ✅ Full-stack ready using **[Node JS API Server](https://github.com/app-generator/api-server-nodejs)** (open-source project)
- Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - `passport-jwt` strategy.
> Tested with:
| NodeJS | NPM | YARN | Status |
| --- | --- | --- | --- |
| `v16.13.0` | `v8.1.0` | `v1.22.5` | ✔️ |
| `v14.15.0` | `v6.14.8` | `v1.22.5` | ✔️ |
| `v12.22.0` | `v6.14.11` | `v1.22.5` | ✔️ |
## How to use it
To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository.
> 👉 **Step 1** - Download the product from the official page
```bash
$ unzip react-soft-ui-dashboard-pro.zip
$ cd react-soft-ui-dashboard-pro
```
> 👉 **Step 2** - Install dependencies via NPM or yarn
```bash
$ npm i
// OR
$ yarn
```
> 👉 **Step 3** - Edit the `.env` using the template `.env.sample`.
```env
REACT_APP_BACKEND_SERVER='http://localhost:5000/api/'
```
> 👉 **Step 4** - Start in development mode
```bash
$ npm run start
// OR
$ yarn start
```
## Backend Integration
> The backend API server address is saved in `src/config/constant.js`.
```javascript
export const API_SERVER = "http://localhost:5000/api/";
```
> Frontend api has been created at `src/api/auth.js`.
```javascript
const axios = Axios.create({
baseURL: `${baseURL}/api`,
headers: { "Content-Type": "application/json" },
});
```
> Register implementation:
- Frontend method with call to backend
- Form validation
- Error handling
> Login implementation:
- Frontend method with call to backend
- Form validation
- Error handling
> Logout implementation:
- Frontend method with call to backend
> User Context:
- The user account is now saved both to the React.Context wrapper and localStorage
> Protected routes:
- The user cannot access protected routes like /admin, /rtl without being logged in.
- Example of 3 different routes:
```javascript
```
> **API Server Descriptor** - POSTMAN Collection
The API Server definition is provided by the [Nodejs API Server](https://github.com/app-generator/api-server-nodejs)
- [API POSTMAN Collection](https://github.com/app-generator/api-server-nodejs/blob/master/media/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework.
## Node JS API Server
The product is also open-source and cis already configured to work with Berry Dashboard Template - product features:
- Nodejs / Express server
- JWT authentication (`passport-jwt` strategy)
- Persistence: MongoDB
> Links
- [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code
- [Node JS API](https://appseed.us/boilerplate-code) - product page
---
[Full-Stack Soft Dashboard PRO](https://appseed.us/product/soft-ui-dashboard-pro/full-stack/) - Provided by [Creative-Tim](https://bit.ly/3fKQZaL/) and `AppSeed`.