> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Build a notes app with React Query and json server - starting from failing unit tests!
- URL: https://reactpractice.dev/exercise/build-a-notes-app-with-react-query-and-json-server/
- Published: 2024-05-30T17:51:57.000Z
- Updated: 2026-06-01T01:56:54.000Z
- Author: Corina Udrescu
- Tags: Intermediate, #corina-2, Exercises, #Import 2026-06-09 12:07

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

- Users can add notes with a title and text content
- Notes are shown on top of each other, with the latest one on top
- Users can "pin" notes; pinned notes are always shown on top
- Users can delete notes by clicking a trash icon next to the note
- Users can edit notes by clicking them

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](https://github.com/reactpractice-dev/notes-app-react-query?ref=reactpractice.dev) already has the backend server setup and a full test suite to make sure all the requirements are covered.

[GitHub - reactpractice-dev/notes-app-react-queryContribute to reactpractice-dev/notes-app-react-query development by creating an account on GitHub.![](https://github.com/fluidicon.png)GitHubreactpractice-dev![](https://opengraph.githubassets.com/7076ce7e251433940b1c193c1cdec819c36686b6b0c6c34242a80804e963990a/reactpractice-dev/notes-app-react-query)](https://github.com/reactpractice-dev/notes-app-react-query?ref=reactpractice.dev)

Clone [the repo](https://github.com/reactpractice-dev/notes-app-react-query?ref=reactpractice.dev) 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](https://reactpractice.dev/articles/how-to-use-json-server-as-a-backend-for-your-practice-apps/) 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.

![](https://storage.ghost.io/c/7c/fc/7cfc444f-a1c9-4dd3-a87e-8dcc2f1180be/content/images/2024/05/notes-components-breakdown.jpg)

Good luck! 

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-how-to-build-a-notes-app-with-react-query/) and the comments section for feedback and discussion.