This project was built for a tech test. The time I had free to focus on this was limited so not all of the requirements were completed.
The requirements are listed below:
Your challenge is to build out an order summary screen using React and Tailwind with some design in the browser improvisation.
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Change the plan between an Annual & Monthly Plan
- Process a fake payment
- Cancel the order to display a list of products
- Good clean code
- The site is a mock-up focusing on the front end so it is fine to hardcode data
- The end result will look as close to the designs as possible
- You will use tailwind utility classes and a custom global config to achieve the styling
- While there are no designs for the payment and product listing options, this should be improvised to meet the requirements
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.\
Launches the Tailwindcss CLI build process See the section about Getting Started with Tailwind for more information.
The build process occurs when you make changes to Tailwind utility classes.
Runs the app in development mode and launches the Tailwindcss CLI build process
Create React App Tailwind CSS tailwindcss-classnames
If I was to add to this project in future, I would do the following:
- Add unit tests for components (Jest and React Testing Library)
- Add additional accessibility improvements and test thoroughly for accessibility criteria
- Add automated accessibility testing with a plugin such as cypress-axe or jest-axe
- Further refactor components to be more generic and reusable