You can check how application works on this video
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 --
-
I used simple prop passing with callbacks. Example of such doing can be User Card component
-
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.
-
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
-
Cypress E2E tests;
yarn test:e2eI also uses pre-commit hook doing linting + formatting running via husky and lint-staged
In the project directory, you can run:
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 cypress test runner
lints everything (css + js) and after that prettier does its job.