/feedback-log

Basic feecbacklog dashboard: https://feedbacklog.netlify.app/

Primary LanguageTypeScript

FeedbackLog Project

  • This project is a dashboard that managers customer feedback

Project is available on github

Hosted on: Netlify

NB: hosted version is developmnent branch

App Features

  • 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

Available Scripts

In the project directory, you can run:

yarn install

Install all app dependencies

yarn start

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.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

App structure

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 and Smart 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

Tests

  • Run test using: yarn test

  • Unit tests are written using react testing library React testing librady.

  • Each component has at least test case.

Things to improve on

  • 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 used any for typing my datatype, I would look deeper if I had more time to make sure I properly define the datatype.