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.
All the packages are included in package.json file. So you can run the project with out any other dependencies.
You can view a live demo over at `Link Here`
To get the frontend running locally:
- Clone this repo
npm installto install all req'd dependenciesnpm startto start the local server (this project uses npx create-react-app my-app)npm run prismto 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.
- Prism Mock Server.
- React+Redux.
- SCSS, HTML, CSS, ES6.
- Material UI
- Amcharts
- Jest and Enzyme(Unit Testing,Component Testing, Contract testing)
- RBAC(Role Based Access Control)
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.
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
| 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 (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.
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 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 init react-app my-appnpm init <initializer> is available in npm 6+
yarn create react-app my-app
you can create React project using below commands and follow upRedux 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.
npm install @reduxjs/toolkit react-redux
For more details, please see the Installation docs page.
Checkout the basic usage or example here.
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.
Material-UI is available as an npm package.
Amcharts are the JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. They are the most advanced javascript dataviz.
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 is a delightful JavaScript Testing Framework with a focus on simplicity.
Install Jest using yarn:
yarn add --dev jestOr npm:
npm install --save-dev jestEnzyme 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.
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.