L5: Implement a new product category

[bewildergeist]

In your fork of this repository, do a git pull upstream to get the latest changes. Then check out the lesson-05/remix-shopping-with-api project. Do an npm installand then npm run dev to start it up.

For the product category that you have been asked to implement, complete the following (with inspiration from what is already implemented for the luggage category) — and create commit for each item on the list:

• Create a new folder in the app/db folder named for your product category, that contains a db.json with your product data (in whatever "schema"/shape that you think makes sense) and a db.server.js.
• Create a new folder in the app/routes folder named with the "slug" of your product category (see the link on the frontpage) containing the relevant routes — start with an index.jsx.
• Create a new folder in the app/routes/api folder named for your product category, and implement resource routes that export the loader and action functions you need to create "API routes" for the data you need for your product category. Think of these as a JSON API that could also be accessed by other clients than the Remix app, e.g. a mobile app or another website. Start with an index.js that reads and returns your products from your "db". You can test these routes in e.g. the Postman app.
• Fetch data for your product list and your individual product pages by making fetch requests to your API routes.
• Style and layout your product list and product detail pages however you want, and define the "data model" for the products however you want.
• Implement delete functionality on the product detail pages (see example in luggage and from last week's exercise). For this you'll need to implement an action function in your API that handles request.method === "DELETE" (info on handling different request methods in actions) and removes the product from your "db" file. You can then make a fetch request to this API route using the DELETE method.
• Implement the ability to create a new product by submitting a form to an action on the same page, which then makes a fetch request (using the POST method) to an API route that creates the product in the database.
  • You'll want to use JSON.stringify to send the body of the request to the API route and set a Content-Type: application/json header.
  • And in the API route, you can use the Request.json() to parse the request body into a JS object that you can save to the db file
  • Your API route should respond with the same object it was given as a body and a 201 status code (the json() helper from Remix will come in handy).
• Implement the ability to edit a product — on a new page with a loader that fetches the data for the product and pre-fills the form, and with an action that sendes a fetch request using the PUT method (or PATCH if you're only updating parts of it) to an API route that takes the updated data and overwrites the existing product in the db with the new data.
• Expand your product model to include price, "in stock" information, star ratings, customer reviews and any other properties you can think of. Be sure that this information is both shown in the UI and handled in the API, both for reading, creating and updating data.