Redux dashboard

React + Redux codebase containing (CRUD, RABC, Open Api V3, Amcharts etc) that 🌐 Hosted at: [https://dashboard-react-dun.vercel.app/].

This is React project is based on CRUD Model built with Redux, Prism , Material Design, amcharts and is equipped with RBAC.

Prerequisites

All the packages are included in package.json file. So you can run the project with out any other dependencies.

Getting Started

You can view a live demo over at `Link Here`

To get the frontend running locally:

• Clone this repo
• npm install to install all req'd dependencies
• npm start to start the local server (this project uses npx create-react-app my-app)
• npm run prism to start serving the mock data for our project

React project would be running on port 3000 and our Prism would be working on 4010 port so make sure respective ports are free of any other process.

Technological stack

1. Prism Mock Server.
2. React+Redux.
3. SCSS, HTML, CSS, ES6.
4. Material UI
5. Amcharts
6. Jest and Enzyme(Unit Testing,Component Testing, Contract testing)
7. RBAC(Role Based Access Control)

Prism Mock Server

Prism is an HTTP mock server that can mimic your API’s behavior as if you already built it. In this project Mock HTTP servers are generated from your OpenAPI v3 documents. I have used Yaml configuration files to serve prism. You can check the files in PrismFiles folder from Project Dir.

npm run prism

Helps to start the prism server. You can check the response from the execution script of the prism using Postman or any of your favorite browner or API testing app.

Changing roles for administrator privileges.

Navigate to role.yaml file which is located at Here and change it to any of the below clients with the permissions provided.

• Client READ UPDATE
• Administrator CREATE READ UPDATE DELETE
• Executive READ only for Dashboard and Overview Pages
• READONLY Only READ Permissions

For Detailed Role operations take a look at below table.

Permissions	Dashboard	Overview	CRUD Pages
Administrator	All	All	All
Client	Read	Read	Read & Update
Executive	Read	Read	Read & Update & Create
READONLY	Read	Read	Read

React + Redux

React (also known as React.js or ReactJS) is an open-source, front end, JavaScript library for building user interfaces or UI components. we are using React 16.13.1 in this project.

Getting started and Creating an App in React

You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app
you can create React project using below commands and follow up

Redux

Redux is a predictable state container for JavaScript apps. (Not to be confused with a WordPress framework – Redux Framework)

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

Installation

npm install @reduxjs/toolkit react-redux

For more details, please see the Installation docs page.

Checkout the basic usage or example here.

Material UI

In a nutshell, Material-UI is an open-source project that features React components that implement Google's Material Design. It helps for faster and easier web development by making us of already builded React Components.

Installation

Material-UI is available as an npm package.

Amcharts

Amcharts are the JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. They are the most advanced javascript dataviz.

Installation

amCharts 4 is available through a number of channels. Below we'll outline a few.

You can use our official npm package @amcharts/amcharts4 to grab V4 and install into your application. It will even grab all the required dependencies.

npm install @amcharts/amcharts4

Yarn For those of you using Yarn, you can use its add command to install our official npm package:

yarn add @amcharts/amcharts4

For more information check out the demos by Amcharts Here

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Installation and Getting Started

Install Jest using yarn:

yarn add --dev jest

Or npm:

npm install --save-dev jest

Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Installation

RBAC

RBAC Stands for Role Based Access control. Its a type of authorization by which we can restrict the user to visit the pages which require authorization.

Look out the table above for the detailed Permissions for each user.