- This project is a dashboard that managers customer feedback
Project is available on github
Hosted on: Netlify
NB: hosted version is developmnent
branch
-
User can add new customer
-
Customer can add new feedback
-
User can click on a customer to see all feedback
-
Feedback input can be cancelled using
Escape
Key or clicking outside input field before submitting feecback -
Customer input can be cancelled using
Escape
Key or clicking outside input field before submitting feecback -
User can search for a customer feedback and see highlighted texts of searchTerm
In the project directory, you can run:
Install all app dependencies
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Data source
location: src > data > customerData
- There is an array of objects responsible for holding customer data.
Components
-
There are two kinds of components:
Presentational components
andSmart components
-
The main functionality is and most of the state management exists in
src > components > smart > FeedbackLog.tsx
styles
-
I used styled component for then styling.
-
For bigger styling(like the styling for FeedbackLog component), I created a new directory for them to make the project more readable and modular.
-
Find in
src > styles
-
Run test using:
yarn test
-
Unit tests are written using react testing library React testing librady.
-
Each component has at least test case.
-
Styling:
I would most likely invest more time in styling and maybe painting the page. -
Tests:
I would write more tests on the FeedbackLog and write more indepth tests if I had more time. -
Types:
There are some places where I usedany
for typing my datatype, I would look deeper if I had more time to make sure I properly define the datatype.