The frontend of the application for feedback analysis.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
npm - is used as the package manager to manage the dependencies. You will need npm on your machine inorder to install the required project dependencies.
node.js - the project is a react app so it uses node.
Firstly this is just the frontend of the app which needs a backend to communicate with (retrieve data from), so firstly you need to setup a backend and someway of adding feedback to the backend, this will be done by a feedback-component (although any method of posting data to the backend can work e.g. curl).
Once the backend is setup you will need:
- it's base url (e.g.
https://*your app name*.herokuapp.com/for a heroku deployment.)
Move into the feedback-frontend-app folder and then run npm install and the dependencies should be installed to your system.
$ npm install
You will need to add the base url to the config.js (in the src folder). This will allow the app to retrieve data from your backend and it can then display the data on this app.
once you are ready to launch it for development and testing you can start it locally using npm start
$ npm start
Congratulations! It should be installed and working now.
To deploy this to a live system you just need to build the app files using npm run build (inside the feedback-frontend-app folder).
$ nom run buildUsing the serve dependency you can serve these built files from a live system.
$ serve -s buildThis should be enough to get a live version of this app working.
| Dependency | Version | Description | Usage |
|---|---|---|---|
| antd | ^3.17.0 |
An enterprise-class UI design language and React-based implementation with a set of high-quality React components | Used to style most of appearance of the app. |
| axios | ^0.18.0 |
Promise based HTTP client for the browser and node.js | As a convenient tool to make requests to backend. |
| babel-plugin-import | ^1.11.0 |
A babel plugin for importing components on demand. | Used to import antd components on demand so as to reduce the size of the final built app. |
| moment | ^2.24.0 |
Parse, validate, manipulate, and display dates. | Used to parse the date object / timestamp sent from backend as formatted date string to be shown. |
| react | ^16.8.1 |
A JavaScript library for building user interfaces. | A base framework language to build our app. |
| react-app-rewired | ^1.6.2 |
One of create-react-app's custom config solutions. | Used to customize the webpack config so as to import style files on demand. |
| react-color | ^2.17.0 |
A Collection of Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter, Material Design & more. | Used to specify the colors of feedback labels. |
| react-countup | ^4.1.3 |
A React component wrapper around CountUp.js. | Used to animate numbers in dashboard. |
| react-dom | ^16.8.1 |
This package provides DOM-specific methods that can be used at the top level of app. | As a necessary peer dependency with react. |
| react-router-dom | ^4.3.1 |
Declarative routing for React. | Used to navigate between pages. |
| react-scripts | 2.1.1 |
This package includes scripts and configuration used by Create React App. | Used to run development and build the production of the react app. |
| recharts | ^1.4.2 |
A composable charting library built on React components. | Used to render graphs on dashboard. |
| serve | ^10.1.1 |
Static file serving and directory listing. | Used to serve the app on a server like Heroku. |
This project is licensed under the MIT License. See LICENSE.md