Smart Household Grocery & Budget Tracker
Sife Mahmud Simon
esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
—_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
Smart Household Grocery & Budget Tracker
Static Inventory & Consumption Prediction App
Tech Stack
Frontend
HTML5
CSS3
JavaScript (Vanilla)
Backend
None (fully client-side application)
Tools
Netlify CLI
Browser DevTools
Local Storage (optional extension)
Company: Monthly Grocery Tracker
Type:
Status:
Year:
Duration:
Overview
Monthly Grocery Tracker is a client-side household inventory management tool that helps users track grocery items, monitor remaining stock, predict consumption rates, and manage monthly budgets. The system uses in-memory data structures and pure JavaScript logic to calculate usage trends, alert low stock items, and estimate restocking needs. It is designed as a fully static application with no backend, making it fast, portable, and easy to deploy.
Features
- Track grocery items with quantity, cost, and expiry information
- Real-time budget calculation and monthly spending overview
- Low-stock and expiry alerts based on configurable thresholds
- Consumption history tracking with usage logs
- Automatic prediction of item depletion dates
- Smart notifications for restocking needs
- Daily usage tracking for selected grocery items
- Simple and fast UI with no framework dependencies
- Fully static deployment with zero backend requirements
- Netlify CLI support for local development server
Challenges
- Managing state consistently in a fully client-side environment without persistence
- Implementing consumption prediction logic using usage history data
- Handling budget calculations in real-time across multiple item updates
- Structuring logic separation between data, business rules, and UI rendering
- Dealing with hardcoded UI constraints such as fixed dropdown items
- Simulating real-world inventory behavior using in-memory data only
Results
- Delivered a fully functional offline-capable grocery tracking system
- Enabled predictive insights for household consumption patterns
- Improved budgeting visibility through real-time calculations
- Created a lightweight and fast-loading static web application
- Demonstrated clean separation of logic, data, and UI layers
Technologies Used
- Vanilla JavaScript for all application logic and state handling
- HTML5 for semantic structure and accessibility
- CSS3 for responsive and clean UI design
- Custom calculation functions for budget and inventory tracking
- Browser runtime for full client-side execution
Responsibilities
- Built full UI using semantic HTML and responsive CSS
- Implemented core business logic for budget and inventory tracking
- Developed consumption prediction algorithms in vanilla JavaScript
- Managed state using in-memory data structures
- Created dashboard rendering and event-driven UI updates
- Integrated local development workflow using Netlify CLI
Architecture
Type: fully client-side static application
Pattern: three-layer architecture (data → logic → UI)
Data Flow: data.js (state) → logic.js (calculations) → script.js (DOM rendering & events)
Integrations
- Netlify CLI for local development server
- Browser-based storage execution model
- Optional localStorage extension for persistence (not implemented by default)
Performance Optimizations
- Zero dependency architecture ensures instant load time
- Lightweight vanilla JS execution with no framework overhead
- Efficient DOM re-rendering on state changes
- Minimal memory footprint due to static data model
Testing
- Manual testing across modern browsers
- Validation of budget calculation logic
- Inventory update and deletion scenario testing
- Edge case testing for consumption prediction functions
- UI interaction and form handling verification
User Roles
User: Manage groceries, track consumption, and monitor budget