I started by laying out all the html for the project planner.
I wanted it to feel more like an actual app instead of just a bunch of dashboard cards, so I added the sidebar, top search bar and separate pages for everything.

The pages i added are:

• Dashboard
• Projects
• New project form
• Project overview
• Tasks and milestones
• BOM / parts list
• Journal, files and notes
• Ideas board
• Shopping list
• Activity and settings

Once the html was laid out i started on the javascript.
I put all the demo projects, tasks, parts and ideas into a seed object instead of writing the data directly into every html section.

The site uses hash routing, so changing pages doesnt refresh the browser. I made a render function for every page and the navigation just swaps between them.

Then i added local storage so projects, completed tasks, purchased items, settings and dark mode dont reset every time the page is refreshed.

I also added:

• New project wizard
• Task drawer
• Add task and BOM forms
• Complete and reopen tasks
• BOM quantity controls
• Idea to project flow
• Search menu with ctrl/cmd + k
• Toast messages
• Reset demo data button
• Lucide icons

The Lucide files are included locally instead of using a cdn, so it should still work without internet.

Next

• Test all the buttons and forms again
• Make the mobile navigation work properly
• Start the css

I started the css and decided to keep it pretty simple instead of trying to make another “ai” looking site because thats basically what everyone complained about.

I went with a more tool/workshop type design with mostly square borders, a basic colour palette and some small grid details inspired by a printer bed.

The calculator is split into the inputs on the left and the live price on the right. I made the result sticky on desktop so you can always see the price while changing stuff.

I also made sure large prices wrap and scale down instead of going outside the box because someone found that problem while reviewing it.

I finished styling:

• Light and dark mode
• All the calculator inputs
• Cost breakdown bars
• Calculation explanation
• Saved calculation history
• Buttons and error states
• Tablet and phone layouts
• The footer and about section

I was going to use GSAP, anime.js, motion and some of them React animation sites but then realised they all basically do the same thing and React Spring would need me to rebuild everything in React.

I just used Motion for a couple small animations when the page loads, when the result changes and when a button is clicked. I didnt want to go crazy with it because its meant to be a calculator not some massive animated website.

I also added reduced motion support so the animations turn off if someone has that setting enabled.

Next

• test every input and currency
• check saving and loading calculations
• test it properly on my phone
• fix anything broken
• update the readme and ship it again

I finished up the html with a history section and a short about section.

Then i started the javascript, this time instead of embeding the default values into the html i just put them into the js, i figure this would make it easier and cleaner.

Once i had all the variables set, i built the storage system.
Im just using local storage because i think a database is a bit over kill unless i add accounts…

Then i setup the currency selection functions, theme functions and all the helpers.
I set the default currency as euros as thats what i would be using when i use this, i also set dark mode as the default because that last thing you want at 3 am is a flashbang.

Then I setup all the calculations and the default values.

Next

• test everything
• write css
• imma try to use things like skipper ui or those other sites with them animations

Ok so everyone says this is ai, idk why tbh but i decided i just fully redesign/build.
I was gonna do more logs after shipping anyway to add some suggested features but i didnt want to redesign 🥀.
Anyway ive got the first half of the html complete, the features i added:

• Currency selector (i just google top 10 currencies and add those)
• Dark mode
• save calculation and copy results buttons

I changed the “calculator” from being a div into an actual form element, this is suppose to be better for lighthouse score as ive heard.

Next

• Imma finish the full html
• then write js
• test that all works
• write css until i get too tired or complete

PrintPrice

Journal17/8/2026 - Built the full calculator

Total Time

2h 55m

I made PrintPrice, which is a calculator for finding the real cost of a 3D print.

I wanted to make it because only checking the filament price leaves out electricity, printer wear, failed prints and the time spent preparing everything. I also wanted it to give a suggested selling price instead of only showing the production cost.

I started by making the HTML structure. I split the calculator into three parts: information about the print, printer and material costs, and the final results.

For the print information, I added filament weight, print hours, minutes and quantity. I then added spool price, spool weight, printer wattage, electricity price, printer price and expected lifetime. I also included labour time, hourly rate, failed print allowance and profit markup.

After finishing the HTML, I started the CSS. I used a light cream background, orange accent colour and a dark blue results panel. I made a small logo and a layered shape using only CSS because I wanted it to look related to 3D printing without needing any images.

The calculator had a lot of inputs, so the first layout looked crowded. Some labels, inputs and units were sitting too close together. I fixed this by putting every input inside a bordered box and placing the units on the right side. I also grouped the inputs into material, printer and power, and time and risk.

I made the main calculator use a grid, with the inputs on the left and the results on the right. The results section shows the suggested price, production cost, estimated profit and a breakdown of every cost. I also added coloured bars to show how much each part adds to the total.

I added media queries so the results move underneath the inputs on smaller screens. The input grids also change to one or two columns so they do not become too narrow.

After the design was mostly finished, I started the JavaScript. I made it calculate filament, electricity, machine wear, labour and failed print costs. These are added together before the profit markup is applied.

I added event listeners to every input so the results update immediately without needing a calculate button. I also formatted the results as euro prices.

The biggest problem I had was that every result stayed at €0.00. At first I thought one of the formulas was wrong, but the real problem was that the JavaScript expected a profit markup input and I had accidentally left it out of the HTML.

Because it could not find that input, the JavaScript stopped before running the calculations. I added the missing input and the calculator started working properly.

I then added local storage so the save button remembers the current settings. I also added a reset button that clears the saved settings and returns everything to the defaults.

Finally, I tested different weights, print times, quantities and profit markups. I checked that the totals updated, the cost bars changed, saved settings stayed after refreshing and the reset button worked.

The default settings give a suggested price of €7.88, with a production cost of €6.06 and an estimated profit of €1.82.I am happy with how it turned out, especially since I made the whole project in one go. It is simple, but it solves an actual problem and does not need an account, database or any setup.

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!!!