owanturist/user-feedback

Tiny application with a user feedback table

User Feedback | Demo | Storybook

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Builds and runs optimised app locally at http://localhost:3000.

yarn dev

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

yarn test

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

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

yarn lint

Runs ESLint for every TypeScript and JavaScript file including TSX/JSX.
Prompts lint warnings and errors to console.

yarn prettify

Runs Prettier for everything.

yarn analyze

Runs source-map-explorer on build folder.
It shows you a treemap visualization to help you debug where all the code is coming from.

yarn storybook

Runs Storybook sandbox.
Open http://localhost:9009 to view it in the browser.

The page will reload if you make edits

yarn storybook:build

Builds the storybook sandbox for deploy to the storybook-static folder.

yarn cy:open

Opens the Cypress Test Runner.

yarn cy:run

Runs Cypress tests to completion.

Tech Stack

• TypeScript
• Webpack configured via Create React App
• Code linting with ESLint and Prettier
• Isolated React component development environment with Storybook
• Functional tests with Cypress
• Unit tests with Jest
• Bundle analyser source-map-explorer to keep the size
• Prepush/commit hooks with husky
• Layout with React
• State management with redux and redux-thunk for side effects
• Http requests via axios
• CSS-in-JS via Emotion

Features

• responsible layout
• greedy search to filter feedback by comment
• uses Json/Decode to validate and transform an api response. See handling of a decode error in action
• client side routing
• nice detailed feedback page
• 404 page
• save and restore filters to url query

Known issues

• Desktop Safary (V 13.1.2) slows down when dashboard scrolls to very top or bottom
• Device decodes a hardcoded string. User Agent parsing (user-agent-parse or ua-parser-js) does not provide any information for the majority of data.
• No scroll position restoration