To run the client and server locally, follow these step to get up and running:
- In the terminal, clone the repository using the command
git clone https://github.com/whenmoon/react-take-home.git - Change directory to the cloned repository using by running
cd react-take-home - Install the server and client dependencies:
npm i && cd client && npm i - While in the client directory, you can run the tests with the command
npm run test - To start the application,
cdback to the root of the repository and runnpm run dev. The client and server should start and you can interact with the frontend in the browser by navigating to http://localhost:3000/
The app is suited to all screen sizes and devices. Tailwind utility classes are used to maintain responsiveness, affecting typography and layout.
- Data fetching and server state syncronisation - React Query
- Styling - Tailwind
- Form and form validation - React Hook Form
- Component libraries - Daisy UI, React Select and React Modal
- There is basic unit test coverage of the "util" functions in the client application. I would like to increase the coverage to components, hooks and other business logic.
- The API is abstracted to a client implementation to allow for reusable and extendable fetch methods. These have been easily integrated with a caching and synchronization layer.
- Reusable UI components have been built are far as possible within the time constraints.
- Client-side form validation is implemented to match product updates with data schemas and prevent unnecessary network requests.
- The app uses
ModalContextto avoid re-rendering the product list when the modal is opened and closed. The Product list is then programmatically re-fetched when necessary. - Ideally there would be less data parsing to populate the Select component options but I think achieving both this and persisting server-side data are a matter for the API.