Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/app-generator/react-soft-ui-dashboard
React Dashboard - Soft UI Dashboard | AppSeed
https://github.com/app-generator/react-soft-ui-dashboard
appseed fullstack react soft-ui-dashboard
Last synced: 3 days ago
JSON representation
React Dashboard - Soft UI Dashboard | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/react-soft-ui-dashboard
- Owner: app-generator
- License: other
- Created: 2021-10-08T06:36:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-11T10:40:42.000Z (about 1 year ago)
- Last Synced: 2024-12-23T06:27:14.402Z (11 days ago)
- Topics: appseed, fullstack, react, soft-ui-dashboard
- Language: JavaScript
- Homepage: https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/
- Size: 5.81 MB
- Stars: 206
- Watchers: 4
- Forks: 80
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/)
Start your Development with an Innovative Admin Template for **Material-UI** and **React**. [Soft UI Dashboard React](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. The product comes with a simple JWT authentication flow: login/register/logout.
The **React** Design is crafted by [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200) on top of `MUI` Library.
- 👉 [React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) - product page
- 👉 [React Soft Dashboard](https://node-js-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - LIVE Demo
## Features
- ✅ Innovative **[Soft UI Design](https://www.creative-tim.com/product/soft-ui-dashboard-react?AFFILIATE=128200)** from `Creative-Tim`
- ✅ React, Redux, Redux-persist
- ✅ Authentication: `JWT Token`
- 🆕 `OAuth` for **Github**
- 🆕 `Full-stack` ready using servers:
- [Nodejs API Server](https://github.com/app-generator/api-server-nodejs): `JWT` Auth, `OAuth` for **Github**
- [Django API Server](https://github.com/app-generator/api-server-django): `JWT` Auth, `OAuth` for **Github**
- [Flask API Server](https://github.com/app-generator/api-server-flask): `JWT` Auth, `OAuth` for **Github**
## Tests
> `Compatibility matrix` using Ubuntu `18.04 LTS` as reference.
| NodeJS | NPM | YARN |
| --- | --- | --- |
| `v14.0.0` | ✅ | ❌ |
| `v15.0.0` | ✅ | ❌ |
| `v16.15.0` | ✅ | ✅ |
## `Video Presentation`
> This material explains how to **deploy the product LIVE** using the [Drag & Drop Deployer](https://appseed.us/go-live/).
[](https://www.youtube.com/watch?v=YdAKP6ianfQ)
## ✨ 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** - Clone the project
```bash
$ git clone https://github.com/app-generator/react-soft-ui-dashboard.git
$ cd react-soft-ui-dashboard
```
> 👉 **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/'
REACT_APP_GITHUB_OAUTH_CLIENT_ID = ... # Github OAuth Client
REACT_APP_GITHUB_OAUTH_CLIENT_SECRET = ... # Github OAuth Secret
REACT_APP_GITHUB_OAUTH_REDIRECT_URL = ... # Github OAuth Callback URL
```
> 👉 **Step #4** - Start the app using `HTTPS` (used bu AOuth Callback)
```bash
$ export HTTPS=true # bash
$ set HTTPS=true # Windows/CMD
$env:HTTPS = "true" # Windows/Powershell
```
> 👉 **Step #5** - Start in development mode
```bash
$ npm run start
// OR
$ yarn start
```
## ✨ Configure the backend server
The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register.
> 👉 **API Server URL** - `src/config/constant.js`
```javascript
const config = {
...
API_SERVER: 'http://localhost:5000/api/' // <-- The magic line
};
```
> 👉 **API Server Descriptor** - POSTMAN Collection
The API Server signature is provided by the [Unified API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition)
- [API POSTMAN Collection](https://github.com/app-generator/api-server-unified/blob/main/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 is already configured to work with Berry Dashboard Template - product features:
- Typescript / Node js / Express server
- JWT authentication (`passport-jwt` strategy)
- Persistence: SQLite
> Links
- [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code
- [Node JS API](https://appseed.us/boilerplate-code/nodejs-starter) - product page
### Compile the API Server
> 👉 **Step #1** - Clone the project
```bash
$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs
```
> 👉 **Step #2** - Install dependencies via NPM or Yarn
```bash
$ npm i
// OR
$ yarn
```
> 👉 **Step #3** - Run the SQLite migration via TypeORM
```
$ yarn typeorm migration:run
```
> 👉 **Step #4** - Start the API server (development mode)
```bash
$ npm dev
// OR
$ yarn dev
```
The API server will start using the `PORT` specified in `.env` file (default 5000).
---
[React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) - Provided by **[AppSeed](https://appseed.us/app-generator)**.