• Create React App
• TailwindCSS
• Emotion
• SWR
• Formik
• Reach Router
• date-fns
• react-loading-skeleton
• Jest
• Cypress
• Storybook
• Font Awesome

yarn install

yarn start

Fake login: admin/admin

yarn test

yarn cypress

The app consists of a Create React App boilerplate tweaked with babel-plugin-macros to some customization, like tailwind as my CSS framework. Tailwind provides useful css classes to improve productivity, and everything is based on a configuration file that may be tweaked to the user needs. With the tailwind.macro I can use Tailwind together with emotion and classnames library.

This project uses React Context API and useReducer hooks to handle state management.

Data fetching is made using swr hooks. SWR is library that orchestrates and handle many important things about data fetching. It optimizes our rendering and perform cache invalidation/revalidation, making the application more responsive.

All unit and integration tests are made using Jest.
E2E tests were developed with the cypress library.

The application is split in many components and each component has a dedicated Storybook file.

The application uses Reach Router to handle routing. All routes are lazy loaded with React Lazy and React Suspense to improve application performance and decrease the initial bundle downloaded by the browser.

Andreo Vieira @ [email protected]