May 30, 2024 2 min read Exercises

Build a notes app with React Query and json server - starting from failing unit tests!

Build a Google Keep inspired Notes app using React Query for fetching the data and json-server as the backend API.

To allow for a smooth user experience, take note of these points as well:

Show a loading indicator when saving a note is in progress (add/edit/delete) - by disabling the form button and changing its label (e.g. "Delete note" -> "Deleting note")
Show "toast" messages for success and error

The boilerplate already has the backend server setup and a full test suite to make sure all the requirements are covered.

Clone the repo and see if you can get the tests to pass!

Notes:

Styling doesn't matter for the purpose of this exercise, so it's ok to keep things very barebones.
Recommended libraries: axios for data fetching, react-icons for the icons, react-hot-toast for the "toast" messages
When sorting the notes to show the latest one on top, assume the backend always returns them in a chronological order (since we don't have a "created date" to sort by).
Use Chrome's Network tab > throtling to delay requests, so you can see the loading messages in development.
If you want to learn more about using json-server as a backend API, check out this article that goes over it in detail.

Implementation notes

for the note form - add aria-label to the form fields - Title and Content respectively
for the notes list - use an ul for the notes (i.e. each note should be wrapped in an li element); use a heading (e.g. h3) for the note title

The unit tests expect a certain component structure, so it helps if you follow it. The boilerplate already contains the empty components.

Good luck and don't hesitate to add any questions or share your solution in the comments below!

Use React 19 form features to refactor a Newsletter Subscribe form