US - Connect Database - Githubissues

Value proposition

As a user I want to have my app data stored in a database So I can have the same access to my products, stores and shopping list on any device.

This user story shouldn't lead to any big changes in appearance and UI of the app apart from some error handling that might occur when fetching data.

[ ] The list of products and their details stay the same when switching to another browser or device
[ ] The list of stores and their details stay the same when switching to another browser or device
[ ] The shopping list and its checked and unchecked products remain in the same state when switching to another browser or device
[ ] Products can still be created, edited and deleted
[ ] Stores can still be created, edited and deleted
[ ] Products can still be added to and (when checked) removed from the shopping list
[ ] Products on the shopping list can still change their state between checked and unchecked when clicking the product

[ ] Choose a person to create a MondoDB Database and connect it to the project (.env.local)
[ ] In mongoDB Atlas create a collection for products and another for stores and insert some initial data (json format)
[ ] In the project folder create a new folder db and inside of it
- [ ] create the connect.js file
- [ ] create a folder models that contains a Product.js and a Store.js file for the mongoose schemas for both the product and the store
[ ] Create api routes for products and stores that handle the CRUD operations with the http methods
- [ ] /api/products/index.js and /api/stores/index.js handle the methods "GET" and "POST" to read all the data or to create products and stores
- [ ] /api/products/[id].js and /api/stores/[id].js handle the methods "GET", "PUT" or "PATCH" and "DELETE" to read, edit and delete a single product or store
- [ ] handle errors that occur when fetching the data from your database

[ ] in the _app.js add:
- [ ] import { SWRConfig } from "swr";
- [ ] const fetcher = (url) => fetch(url).then((response) => response.json());
- [ ] <SWRConfig value={{ fetcher }}>....</SWRConfig>
[ ] replace the localStorage states for products and stores with the db data by fetching via SWR on the pages and in the components where the data is needed (remember to install SWR)
- [ ] rename the data you are fetching via SWR (e.g. const { data: products } = useSWR("/api/...."))
- [ ] remember to also use isLoading, error and if needed mutate of SWR
- [ ] handle errors in a way that let's the user understand why a problem occurs