If you wonder what this should do

You can check how application works on this video

If you want to know how I proceeded in this project

Whole project is in typescript - apart from Cypress E2E tests; these uses pure js. I've taken the Inspiration for user cards from ui design. background was generated by eggradients. Whole project took around 4 hours. Biggest junk of time took styling tweaking. API simulates user responses --

1. State management

   I used simple prop passing with callbacks. Example of such doing can be User Card component

2. Components and accessibility

   All components are self-made and responsive - apart from loading placeholders during data fetching. I applied techniques that should ensure that this app provides very good results regarding accessibility. During development I used react-axe for most precise guideline following with eslint plugin: jsx-a11y/recommended.

3. Styling

   I used styled-components for styling. I've provided an example of the theme To improve the power of css-in-js solution, I've decided to re-use some helpful ideas from sass world via package polished

4. Testing & Project Development tweaks

   Cypress E2E tests; yarn test:e2e I also uses pre-commit hook doing linting + formatting running via husky and lint-staged

Available Scripts

In the project directory, you can run:

things I learned new

• react-placeholder - here
• react-async-hook - here

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:e2e

Launches the test cypress test runner

yarn lint

lints everything (css + js) and after that prettier does its job.