StockFlow

StockFlow keeps a list of products and how many of each are in stock. You can add a product, raise or lower its stock, delete it, and find things with a search box, an in-stock / out-of-stock filter and sorting by name or quantity. Three counters at the top update with every change, and the list is saved in the browser.

I built it while learning JavaScript, to practise on something that behaves like a real app. An inventory is a small problem with a lot of moving parts: every click changes the data, and the screen has to keep up. It’s an important project for me because it’s where the basics started to connect.

How the code is organised. One array of products is the only source of truth. Every change goes through syncApp(), which saves, updates the counters and redraws the list.

HTML, CSS, JavaScript, LocalStorage

No framework, no libraries and no build step: just the three files a browser can open.

1. 01

   One array, one sync function

   Every change — plus, minus, delete or add — edits the products array and then calls syncApp(). Saving, the counters and the list all update from the same place, so they can’t drift apart.

2. 02

   Search, filter and sort as one step

   applyFilters() starts from the full list, keeps the names that match the search, applies the stock filter, then sorts what’s left. All three controls call the same function.

3. 03

   Check the input before saving

   The add form rejects an empty name or an invalid quantity with a message, instead of adding a broken product. A new product gets the next free id.

“How to keep data and the screen in sync with plain JavaScript: the DOM, events, state and LocalStorage working together.”

• The data lives in one browser. There are no accounts and no server.
• Stock status is either in stock or out of stock; there are no low-stock levels.
• There’s no live demo yet. The repository has the code and a screenshot.