1. Node >= 18.x
2. Git Bash (Windows users)
3. Redux Dev Tools Chrome extension

1. Fork and clone repo
2. Run npm install
3. Run npm run dev
4. Load app in http://localhost:3003

Link to a working prototype.

Welcome to your Module Project! In this module you learned to use RTK Query to sync the state of the server with the state of the client, all handled with Redux. Make sure to code alongside your Guided Project before attempting this challenge!

In this project you will keep working on the Quotes app. Right now the application is not fetching information from a server, but using information that's hard-coded on the frontend instead: it's up to you to get this Redux app talking to a real API!

❗ Preliminary notes about your tasks:

• Watch the first minutes of the Solution Video if you need help getting situated.
• There is no need to install any extra NPM dependencies.
• You will make changes to four files - roughly in this order:
  1. quotesApi.js
  2. store.js
  3. Quotes.js
  4. QuoteForm.js

The general functionality of the app will approximately match the one in this prototype. Note that the prototype is not using RTK Query. Your finished app will use Redux and RTK Query to sync its state with the server via GET, POST, PUT and DELETE requests, and also display messages informing the user when the requests are in progress or when they have errored.

When your app is running it exposes an API on http://localhost:9009/api/quotes with the endpoints below. You should test them out in Postman to understand how they work. If you delete all the quotes, you can reset your server by running npm run dev again.

1. GET /quotes returns all quotes from the server

   • Expects no parameters nor a request body

2. POST /quotes posts a new quote to the server

   • Expects a { "quoteAuthor": "example author", "quoteText": "example text" } as the request body
   • Both properties must be longer than two characters or a 422 error response is returned

3. DELETE /quotes/:id removes a quote from the server

   • Expects an actual quote ID at the end of the URL (instead of the ":id")

4. PUT /quotes/:id updates the apocryphal key of a given quote

   • Expects an actual quote ID at the end of the URL
   • Expects a { "apocryphal": true (or false) } as the request body

1. Inside quotesApi.js create a quotesApi containing 4 endpoints: a getQuotes query, and createQuote, toggleFake and deleteQuote mutations. Do not flesh these out completely yet. We just want to scaffold and export this API so we can plug it to Redux in the next step.

2. Inside store.js import the quotesApi and connect its reducer and its middleware to the existing Redux store.

3. Check the Redux tab of Chrome Dev Tools to make sure that RTK Query is working.

1. Inside quotesApi.js build the getQuotes endpoint completely. Make sure to set a "Quotes" tag on the data returned by the server.

2. Inside Quotes.js use the useGetQuotesQuery hook exposed by quotesApi to GET the quotes from the server and render the retrieved data, instead of the hard-coded quotes found in the module.

1. Inside quotesApi.js build the rest of the endpoints, which are all mutations as opposed to queries.

2. Inside QuoteForm.js use the useCreateQuoteMutation hook to POST a new quote to the server.

3. Inside Quotes.js build the functionality needed to DELETE a quote and PUT a change to its apocryphal status.

❗ Note that this task and the next ones can be done in parallel.

Inside Quotes.js and QuoteForm.js, render messages to the screen to inform the user that requests are in flight, and test them out by throttling the speed of the requests in the Network Tab in Chrome (by selecting Fast 3G or Slow 3G from the dropdown). Design and style these messages however you like!

Inside QuoteForm.js render an error message to the screen if the new quote does not pass server-side validation. This is the scenario that plays out when a user sends a POST request attaching a "quoteText" (or a "quoteAuthor") shorter than 3 characters in length. The frontend purposely lacks any validation other than preventing the submission of a totally empty form.

This step is only required if you need help getting started or get stuck at any point. HAVE FUN!