Database intergration.
I started by making all my tables in supabase.

• item
• categories
• shopping_list
• activity

and then linked it to my project (I removed my api and url)

const SUPABASE_URL =  "";

const SUPABASE_KEY = "";

const supabase = window.supabase.createClient(    SUPABASE_URL,    SUPABASE_KEY

);

Once this was done i start inventory page
The inventory is basically just a copy and paste of my dashboard as i only had to write the <main></main> which is just the search bar and example.
i did switch the active class from home to inventory.
Once the html was done i used similar styling for the example piece and search bar.

Now for the harder part…
inventory.js
I embed the inventory example layout into the js and then made the quantity control and search.

Instead of calling loadInventory() after every + or -, I made it so the the number on the page updates immediately, then send the change to Supabase in the background.
This should keep things running smoothly.

I also made the cards have more info instead of just showing the item and quantity.
I added info into my database to see how everything looks.

But for some reason it wasnt loading.
after about 20mins of debugging I figured out it was because there was no policy setup in the database.

So I quickly made the policies and it worked!