The aim of NPS score application is to help users create their own survey just by embedding our open source code in their software also being able to analyze and access the NPS feedback.
Used technologies: HTML, CSS, Javascript, React, Redux, MUI, MySQL, Node.js.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Note: this is a one-way operation. Once you eject, you can’t go back!
It will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
- npm install @mui/material @emotion/react @emotion/styled
- npm install @mui/icons-material
- npm install react-router-dom
- npm install @mui/material @mui/styles
By clicking "Home" on the left side bar you will navigate to the Home page. You can also click "READ MORE" on each card to find out more about NPS score system and surveys. In the upper left corner there is a switch – you can choose dark or light mode.
http://localhost:3000/MySurveys
By clicking "My Surveys" on the leftside bar you will navigate to My Surveys page which shows all the listed surveys that hav been created and are in use. The search line allows you to search for the survey based on its name. By clicking "OPEN" button you can navigate to the surveys's data page. (See more information in the Data Page section).
By clicking "Data" on the leftside bar you will navigate to the Data page where you can find both visual and numerical NPS score representation as well as comments left by the users.
Each part of the pie chart is coloured and it corresponds with the data of the NPS score and is reflected in the table on the right. If you click in the center of the pie chart you will get the overall data of the whole survey.
You can also the date picker: pick the starting date of the survey (left side date picker) and ending date (right side date picker) for checking the NPS score data of the designated period.
In "Total Responses" section the total number of the responses to your survey will appear based on the chosen timeframe.
The NPS score is shown in the middle of the pie chart. The amount of promoters is shown in green color while the amount of detractors and passives is shown in blue and yellow respectively.
By hovering over a green section, you can see the amount of promoters. By clicking on the green section all the promoters' data will show up in the table on the right side. The table includes the date when the user answered a survey, the score the user gave and the comments left by the user. By clicking on the right arrow icon you can navigate back to older data. The red and yellow sections of the pie chart work the same way as described previously.
The Line Chart (located below the pie chart) shows the trend of the NPS scores of all time.
The Response Volume Chart shows the volume of detractors, passives, promoters and total responses in each volume. Based on the total responses showed a line chart will show the response trend.
The Embed page generates the direct link (on the left) which opens up a web page where a user can fill in the survey. However embed script (on the right) allows users to copy the HTML snippet and embed it into their own web application. The direct link survey's design and code can be modified (go to survey folder in PS-Dashboard).
http://localhost:3000/CreateNewSurvey
By clicking on "Create new survey page" on the left side bar you will navigate to a single survey creation page. Fill in the survey name and leave a survey question in order to finalize the survey description.
