Visit the deployed pages on GitHub pages, with link in the About section of the Github repo
2
Events
On load on the home page, see a list of <thing>s, fetched from supabase
4
On clicking a <thing>, user should be taken to that <thing>'s detail page.
2
Detail page should get the id from the URL and use that id to fetch that <thing> from supabase.
2
Detail page should show the user details about the <thing> with more details than on the list page
2
Functions
PURE: render<Thing>Card(dog) : return DOM node
2
PURE: render<ThingDetail(dog) : return DOM node
2
ASYNC: fetch<Things>() : return array of <thing>s from supabase
2
ASYNC: fetch<Thing>(id) : return single <thing> from supabase
2
Stretch goal ideas
Sort <thing>s by their name.
Add an input that lets the user filter <thing>s on the list page.
Add additional UI that lets the user sort <thing>s on the list page by different properties.
For practice, make a second supabase table with another <thing> and add a second list to the list page. If you did , now do , for example. Then, make a separate detail page for just that <thing>. Keep all the features from the original app as well.
If you're feeling ambitious, see if you can get it working so that when you click on an item, it deletes from supabase then re-renders the list
If you're feeling EVEN MORE ambitious, see if you can figure out how to let users create a <thing> in supabase and render it to the page.
If you are mega-ultra final-form ambitious: see if you can figure out letting a user update a thing from the detail page.
HTML Setup
List page
divs to hold the single plants
each plant should be a link to its detail page (anchor tag)
big div to hold the list of all plants
Events
on load
get plants from the database
display those plants (loop, render, and append)
Detail page
div to hold the plant details
Events
on load
figure out which plant to go fetch . . .
get THIS SINGLE plant from the database
display THIS SIGNLE plant (render, and append)
Step Zero:
Make a supabase table with a few rows based on the <thing> of your choosing :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent