Fullstack React Material Dashboard (App framework)

ashkank83 — Wed, 10 Jul 2019 19:00:50 +0000

A fullstack React Material-UI dashboard

demo

or U: "admin" P: "test" for more accessible app

Note the database is in readonly mode so any attempt to change will fail

Setup

Server

Git clone https://github.com/logipro/Dashboard-API.git
npm install
npm start

Client

git clone https://github.com/logipro/logi-dashboard.git
yarn install
yarn start

What is it?!

A Work In Progress fullstack micro framework (is framework the right word?!) which will give you basic authorization, authentication, routing and some general functionalities out of the box. So you can concentrate on developing your Apps and widgets and deliver them to your end users.

Main features

Add/disable users, change users password, give/take Roles to users
Add/Remove Roles with access to different sets of apps and widgets
Create Widgets and add them to the framework to be shown on the dashboard (Maybe share the nice ones 😀)
Create Apps (React components)
Have Public Apps and Widgets (No need for login to see these)
Each user can save his/her dashboard layout
Lazy loading of apps using react.lazy and suspense. Apps will only be loaded for users who have access to them.

What has been used?

Frontend

Reactjs

Material-UI

React-Router
for dynamic routing magic happening client side

TypeScript not 100% typescript as you will see some js files and a lot of js code but on it's way there!

logi-table: We looked for a good Material table and failed to find one that had everything I needed! So decided to develop my own. This table component lacks a lot of features at the moment and that's why it's not a npm package yet. Maybe one day when it covers more and is tested better we will publish this as it's own package, For now it will stay in a separate folder inside the dashboard!

Backend

Nodejs

Express

Passport for authenticating together with express-jwt for giving tokens to logged in users and guests

Sqlite to be free from any DBMS installation we decided to use sqlite. of course for your app you can add connections to any other databases for the main business whilst the framework related persistence like Users, Roles, Apps,... are using the sqlite.

Adding a new app

A. Any react component can be an app and Logi-dashboard will load them for users with access. for an example look at User.tsx which is the app that manages the users.

B. Add your App from Administration/Apps management

You have to set the following for each app:

Application:Name of the App to be shown in the sidebar

ParentID:If you want your App to be shown under a group set this

RouteName:Set the relative Route for this App, Logi-dashboard will use this to load your component

Component:Relative path to App's component (relative from App.tsx)

Props:Send props to the app from here, for example let's say I want to have two different versions of Users app one readonly and the other one full access. I create the same App twice in this table and set Props for one of them to {"Readonly":"true"} then the users.tsx can check for this at load and perform the required operations (in this case hide edit icons)

IsPublic: set it to true if you want your app to be available before login. Dashboard must stay public

Icon: A material UI icon to be shown in the sidebar.

Adding a new Widget

Widgets are shown on the dashboard and you can add your own widget to the collection of available widgets:

A. Create your widget and copy it to framework/Dashboard/Cards (or wherever!). see a sample here

B. Add your new Widget to widget.tsx with preferred sizing. (Dashboard layout uses a grid layout)

C. Add your Widget to the Widgets table from Administration/Widgets

Component : Widget component name
Properties : Send any properties required in the widget from here.

hint: Try to create generic and reusable widgets and customize them with the props from here. for example if you have a chart which should fetch data in x minute intervals send the URl path for data and also the timer interval from here.

IsPublic : Public widgets are accessible before login on the dashboard. Logged in users can hide the widget

Give access to Apps and Widgets

Access to Apps and widgets is managed via Roles.

Choose a role and expand he details for it to see the available Apps and Widgets for the Role. Select or deselect any item to modify the access.

After tuning Roles access you can assign roles to users from the Users app. Each user can have one to many roles and her/his access is the union of all the accessable apps.

Forem: ashkank83