@JasonC9

fixed small bugs and errors and shipped to github, made actual website and added a duckdns domain

I started with an activity tracker on the dashboard.

The goal was to make the app show what has changed recently instead of just displaying inventory. I created an activity table in Supabase to store actions like adding items, changing quantities, restocking, and deleting items.

This time I created the database policies first so I didn’t run into the same RLS problems from earlier. After that I made activity.js to handle adding activity logs and connected it to the other features.

Then I created notifications.js.

Notifications check the inventory and show things like low stock items and products that are expiring soon. I added an ID to the notification button in the header and created a notification panel that works similarly to the side menu by sliding out.

I created notifications.css and tested it. At first it didn’t work because I forgot to add id="notification-list" to the HTML, so JavaScript had nowhere to display the notifications.

Edit/Delete

I wanted users to manage their inventory properly, so I added editing and deleting.

I created edit-item.html, which is similar to the add item page but loads existing data and updates it instead. I made inventory cards clickable so selecting an item opens the edit page, while keeping the +/- buttons working normally.

I also added delete functionality which removes the item and cleans it from the shopping list. Activity tracking was added so these changes appear on the dashboard.

Barcode History

Next I added barcode history.

I created a new barcode_history table to save scanned products. I updated addItem.js so it checks if a barcode already exists before searching OpenFoodFacts. This means repeated products can be added faster.

I can’t fully test this until the app is live because camera permissions work differently on mobile.

Receipt Scanner

I added receipt scanning using Camera OCR and Tesseract.

I added a scan button to the add item page and used OCR to read the receipt image. The text is cleaned by removing prices, store information, and other receipt details.

I created a product dictionary so common products can be recognised even if OCR makes small mistakes.

It works, but it is not perfect because every receipt layout is different and OCR can struggle with blurry images.

Household Mode

This changes Stocked from a personal app into something anyone can use.

I wanted my own private version while also making a demo for Hack Club, so I added household support.

I renamed index.html to dashboard.html and created a new login page with:

• Login
• Create account
• Try demo

I created setup.html where users can create a household or join an existing one. Each household has its own data so users don’t affect each other.

Settings

I created a settings page where users can manage their household and copy their household code to invite others.

Recipes

I added a recipe section that connects with inventory.

Recipes can check which ingredients are available, what is missing, and what needs to be added to the shopping list.

Analytics

I added consumption analytics to track how items are used.

The system records stock changes and can show things like most used items, weekly usage, and consumption patterns.

PWA

The final major feature was turning Stocked into a Progressive Web App.

I added:

• manifest.json
• Service worker
• App icons
• Offline caching

This allows Stocked to be installed like a normal app on phones and computers.

AUTOMATIC SHOPPING LIST!!!!!!!
This will prob be the most useful part of the whole project.
Itll fetch from inventory and read if an item is below you set minimum it adds it to the shopping list, and when youre shopping you go to inventory and add it and the shopping list updates.

I started by creating a foreign key for my shopping_list table.
Then i did basically the same thing for the rest of the html pages, copy everything except <main></main>
and my main is just gonna be loaded from the database.

I made the shopping list work from the database at first to test if it works and looks nice, and it does.
then I wrote all the javascript and of course forgot to add polices but once they were all done everything worked.

Then I added the barcode feature, i start by just adding a button into the add form and updated my js to make the actual button work, i used world.openfoodfacts.org for the barcode database.

I was trying to figure out why the button wouldnt work on my phone but its because its on localhost, so ill have to test later.

Until then, I updated my tables so i added barcode to my items table.

I added expiry tracking also into the inventory page.

The Next thing i did was make the dashboard actually display live info.

I started by making the progress bar and +/- buttons actually work and live.
This only took a few mins

Afterwards I started the add page
I created add.html addItem.js
for the html, I copied the same head/header/footer and just did the <main></main>
I made sure to have addable categories cause i thought that would be useful.

I made the whole thing wrapped in a form.

• Item Name
• Category w/+ button
• Quantity
• Unit w/Custom option
• Minimum Stock
• Expiry Date

Even though i didnt type any new styles yet this form still look good, however not good enough.
So I then wrote all the styling for add.css

Then I made addItem.js,
I made it so you can upload your own category and add an emoji to it but when i started testing everything it didnt work.

I suspected it was policy issue so i tried creating some and that fixed it but then there was another problem.

once i made an item and go to inventory i wouldnt see although it was in my database, it was because i changed my table around from category to category_id so the relationships werent assigned.

the stock levels werent updating but it was just a simple fix.

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!

I started by figuring out my plan.
and made the file structure.

Stocked/
|
| – index.html
| – inventory.html
| – shopping.html
| – add.html
| – settings.html
|
| – css/
│ – style.css
│ – variables.css
│ – mobile.css
|
| – js/
│ – app.js
│ – inventory.js
│ – shopping.js
│ – database.js
| – dashboard.js
│
| – assets/
│ – icons/
│ – images/
│ – logo.svg
│
–– manifest.json

Once i had this made I did the full html but without any css, execpt for the embed ones from my icons
So this meant i had a “working” dashboard execpt for a database connected.
I checked that the hamburger and navs worked and then I created all the css.
For styling i made sure to make vars with my colors and so if i choose to change themes i dont have to go one by one and change them.

:root {    
--bg-color: #f8f9fB;    --cards-bg: #ffffff;    --accent: #3cb371;    --warning: #f5a623;    --danger: #e74c3c;    --text-main: #1e1e1e;    --text-secondary: #6b7280;    --border: #e5e7eb;    --radius: 16px;    --touch-target: 44px;    --shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.05),                 0px 4px 8px -2px rgba(0, 0, 0, 0.05);    --shadow-hover: 0px 12px 24px -8px rgba(0, 0, 0, 0.12);
}

The rest of the styling is pretty simple just laid out each section how i wanted it to be and once it was done i called it a day.

If you’re curious the mobile preview is just a vscode extension and you link your live preview, so localhost:5500 for me

• I made the Overlay Popup
• Made it semi transparent
• added pause, skip, prev buttons
• styled it to look a lot better
• added fades
• added to system tray
• added icon.ico for tray

I also uploaded everything to github and made the readme

Goal

Build a desktop app to show what music is playing and detect its genre in real time, in a clean overlay-style UI.

Setup

• Created a WPF app using .NET
• Confirmed blank window worked

UI

• Added basic dark UI in XAML
• Showed song title, artist, and genre
• Started with fake test data

Song Detection

• Used Windows media session API
• App now detects Spotify, YouTube, etc.
• Updates when song changes

Genre System

• Integrated Last.fm API
• Fetches genre from artist name
• Returns “Unknown” if no data

Current State

Working MVP:

• Live song detection
• Artist + title display
• Genre lookup working
• Auto-updates on song change

To Do

• Overlay popup UI (FluentFlyouts style)
• Album art(maybe)
• Skip, back, pause buttons
• Caching + performance improvements

• Made checklist page
  • similar as edit page
  • download json and upload to website root to save globally
• Made mobile Friendly
• Made github

• made editor have journal/bom buttons
• edit links
• edit status
• dashboard display from json
• projects page displays from json
• filled info for blueprint/flavortown in .json

To Do

• Make checklist page
• Add Database(mightnt do, downloading and uploading the json fill would be easier)
• Make Github Page!!!

• uploaded boms and journals for blueprint/flavortown
• Worked on Upload/Edit Page

Current Features

• Edit Projects on right panel and hit save.
• download the json and replace with current one to save changes outside of local
• 4 items in the center are editable
• Add Programs/Projects buttons (Save Locally ATM)

To Do

• Add image upload/change
• change local storage to database(last thing)
• make projects in projects and dashboard pages load from projects.json instead of static
• make checklist page
• Add rest of info for blueprint/flavortown in .json

Completed

• Made Header
• Cleaner Dashboard
• Cleaner Projects Page
• Collapse button for each section
• Filter between project status and cost
• stats display at top of dashboard
• Fixed journal/bom box sizes
• made links next to eachother at the bottom
• Changed Global font to inter
• Changed color scheme to match and look nicer

To Do

• links for hackatime/lapse
• upload boms/journals for blueprint and flavortown
• make upload/edit section
• make checklist page

I added a view BOM using a similar system but i ran in to some bugs of course, like the BOM not showing at all, styles not working.

At first i was gonna type all the BOMs in as tables one by one but i remembered you can export your BOMs or just use the ones that would of been put in the GitHub.

Once everything was looking nice and how i wanted it i did the slower part and copied and pasted it for each and every project and filled in their info.

I filled in everything except for the pricing and times on the blueprint and flavortown projects. Additionally i have to upload the BOMs and journals for those projects as well.

To Do List:

• Upload BOMs, Journals, Time, and Prices to Blueprint and Flavortown Projects
• Possibly make a “frontend” upload control so if others want to use this they can easy add in their own projects into their own copy of the site
• Possibly Filter option for completed and in progress projects
• Links section, for lapse or hackatime
• Cleaner Dashboard, collapse button for projects*(each program its own button)*
• Stats in the dashboard
• header to move between hackclub.html and index.html

Made the project list, and added a Status bar, links to github and hackclub sites, when you click on the project itself it takes you to its own page.
I made the stasis page but only with the stopwatch on it so far.
its the same setup but i added a total time, cost and the journals.
For the journals i used zero-md.
Heres the code for that if you wanna use it yourself:

<head>
script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
</head>
<body>
<div class="journal">
                <details>
                    <summary>View Journal</summary>
                    <zero-md src="journals/Desktop-Stopwatch-JOURNAL.md">
                        <template data-append>
                            <style>
                                img {
                                    max-width: 20% !important;
                                    width: 100% !important;
                                    height: auto !important;
                                    display: block !important;
                                    margin: 10px 0 !important;
                                }
                            </style>
                        </template>
                    </zero-md>
                </details>
            </div>
</body>