|
1 | | -# react-soft-ui-dashboard-pro |
| 1 | +# [Full-stack Soft Dashboard PRO](https://appseed.us/product/full-stack/react-soft-dashboard) |
| 2 | + |
| 3 | +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-pro) (PRO version). |
| 4 | + |
| 5 | +<br /> |
| 6 | + |
| 7 | +> Features |
| 8 | +
|
| 9 | +- Premium Material UI design - Crafted by [Creative-Tim](https://bit.ly/3fKQZaL/) |
| 10 | +- React, Redux, Redux-persist |
| 11 | +- Authentication: JWT Login/Register/Logout |
| 12 | +- [Node JS API server](https://github.com/app-generator/api-server-nodejs-pro) for a complete full-stack experience |
| 13 | + |
| 14 | +<br /> |
| 15 | + |
| 16 | +> Links |
| 17 | +
|
| 18 | +- [Full-stack Soft Dashboard PRO](https://appseed.us/product/full-stack/react-soft-dashboard) - product page |
| 19 | +- [Full-stack Soft Dashboard PRO](https://fullstack-react-soft-dashboard.appseed-srv1.com/) - LIVE Demo |
| 20 | +- [Node JS API Server](https://github.com/app-generator/api-server-nodejs-pro) (PRO version) - the backend server |
| 21 | +- Support via **Github** (issues tracker) and [Discord](https://appseed.us/support) - LIVE Assistance |
| 22 | + |
| 23 | +<br > |
| 24 | + |
| 25 | + |
| 26 | + |
| 27 | +<br /> |
| 28 | + |
| 29 | +## How to use it |
| 30 | + |
| 31 | +To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository. |
| 32 | + |
| 33 | +**Step #1** - Clone the project |
| 34 | + |
| 35 | +```bash |
| 36 | +$ git clone https://github.com/app-generator/priv-react-soft-ui-dashboard-pro.git |
| 37 | +$ cd priv-react-soft-ui-dashboard-pro |
| 38 | +``` |
| 39 | + |
| 40 | +<br > |
| 41 | + |
| 42 | +**Step #2** - Install dependencies via NPM or yarn |
| 43 | + |
| 44 | +```bash |
| 45 | +$ npm i |
| 46 | +// OR |
| 47 | +$ yarn |
| 48 | +``` |
| 49 | + |
| 50 | +<br /> |
| 51 | + |
| 52 | +**Step #3** - Start in development mode |
| 53 | + |
| 54 | +```bash |
| 55 | +$ npm run start |
| 56 | +// OR |
| 57 | +$ yarn start |
| 58 | +``` |
| 59 | + |
| 60 | +<br /> |
| 61 | + |
| 62 | +## Backend Integration |
| 63 | + |
| 64 | +> The backend API server address is saved in `src/config/constant.js`. |
| 65 | +
|
| 66 | +```javascript |
| 67 | +export const API_SERVER = "http://localhost:5000/api/"; |
| 68 | +``` |
| 69 | + |
| 70 | +<br /> |
| 71 | + |
| 72 | +> Frontend api has been created at `src/api/auth.js`. |
| 73 | +
|
| 74 | +```javascript |
| 75 | +const axios = Axios.create({ |
| 76 | + baseURL: `${baseURL}/api`, |
| 77 | + headers: { "Content-Type": "application/json" }, |
| 78 | +}); |
| 79 | +``` |
| 80 | + |
| 81 | +<br /> |
| 82 | + |
| 83 | +> Register implementation: |
| 84 | +
|
| 85 | +- Frontend method with call to backend |
| 86 | +- Form validation |
| 87 | +- Error handling |
| 88 | + |
| 89 | +<br /> |
| 90 | + |
| 91 | +> Login implementation: |
| 92 | +
|
| 93 | +- Frontend method with call to backend |
| 94 | +- Form validation |
| 95 | +- Error handling |
| 96 | + |
| 97 | +<br /> |
| 98 | + |
| 99 | +> Logout implementation: |
| 100 | +
|
| 101 | +- Frontend method with call to backend |
| 102 | + |
| 103 | +<br /> |
| 104 | + |
| 105 | +> User Context: |
| 106 | +
|
| 107 | +- The user account is now saved both to the React.Context wrapper and localStorage |
| 108 | + |
| 109 | +<br /> |
| 110 | + |
| 111 | +> Protected routes: |
| 112 | + |
| 113 | +- The user cannot access protected routes like /admin, /rtl without being logged in. |
| 114 | +- Example of 3 different routes: |
| 115 | + |
| 116 | +```javascript |
| 117 | + <ProtectedRoute path="/admin" component={AdminLayout} /> |
| 118 | + <ProtectedRoute path="/rtl" component={RtlLayout} /> |
| 119 | + <Route path="/auth" component={AuthLayout} /> |
| 120 | +``` |
| 121 | + |
| 122 | +<br /> |
| 123 | + |
| 124 | +> **API Server Descriptor** - POSTMAN Collection |
| 125 | +
|
| 126 | +The API Server definition is provided by the [Nodejs API Server](https://github.com/app-generator/api-server-nodejs) |
| 127 | + |
| 128 | +- [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. |
| 129 | + |
| 130 | +<br /> |
| 131 | + |
| 132 | +## Node JS API Server |
| 133 | + |
| 134 | +The product is also open-source and cis already configured to work with Berry Dashboard Template - product features: |
| 135 | + |
| 136 | +- Nodejs / Express server |
| 137 | +- JWT authentication (`passport-jwt` strategy) |
| 138 | +- Persistence: MongoDB |
| 139 | + |
| 140 | +> Links |
| 141 | +
|
| 142 | +- [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code |
| 143 | +- [Node JS API](https://appseed.us/boilerplate-code) - product page |
| 144 | + |
| 145 | +<br /> |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | +<br /> |
| 150 | + |
| 151 | +--- |
| 152 | +[Full-stack Soft Dashboard PRO](https://appseed.us/product/full-stack/react-soft-dashboard) - Provided by [Creative-Tim](https://bit.ly/3fKQZaL/) and **AppSeed [App Generator](https://appseed.us/app-generator)**. |
0 commit comments