Visit the deployed app on Netlify, with link in the About section of the Github repo
required for grading
Events
On the home page load, fetch and display a list of the first 20 or so beanie babies from supabase without errors.
1
On next page click, fetch and display a list of the next 20 beanie babies. This button should be disabled on page 1.
1
On prev page click, fetch and display a list of the previous 20 beanie babies.
1
When the user clicks on a beanie baby, navigate to that beanie baby's detail page
1
On detail page load, fetch and display the correct beanie baby based on the id in the URL
1
Components
App() : has routes to the BeaniesPage and BeanieDetail components, with appropriate exact path props
1
BeanieBany({ beanieBaby }) : takes in the correct props and renders Link components to the detail page
1
BeaniesList({ beanieBabies }) : takes in the correct props and renders a BeanieBaby for each item in the array
1
BeaniesPage : tracks beanieBabies and page state correctly, refetching whenever the page state changes, passes props correctly to BeaniesList
1
BeanieDetail : uses the correct react-router-dom hook to get the id from the URL, then uses that id to fetch the correct beanie baby
1
Stretch goal ideas
Add a search bar. Initially, just launch a new search on change using your useEffect. Ideally, though, this search should occur on submit. Ooooor you can look into throttling/debouncing your function call to limit the number of calls that are made on change!
Add search params to the URL on change. That way you can copy and paste link to the exact right search and send it to somebody else. You'll need to use the query params to set the initial state of your current page and search query
