Published on

Frozen Food Stock Opname System (Frozeria)

Authors
  • avatar
    Name
    Putra Zakaria Muzaki
Frozeria Dashboard Banner

Frozen Food Stock Opname System (Frozeria)

Frozeria is a web-based Stock Opname Management System specifically designed for a frozen food store to handle food items and their respective categories. This application was developed as a certification project for the BNSP Software Programming Certification (Full Stack Developer) in May 2026.

The system streamlines the stock-taking process by providing real-time data visibility, ensuring front-end performance optimization, and enforcing data integrity across the entire stock inventory.

Key Features

1. Interactive & Responsive Dashboard

The main dashboard serves as the central hub, displaying all food items with pagination, category filtering, and multi-criteria search. It includes Dynamic KPI Cards to automatically track:

  • Stok Menipis (Low Stock): Highlights items with critical inventory levels.
  • Stok Habis (Out of Stock): Automatically lists and tracks items with a stock level of 0.
Dashboard Stock Table Figure: The main dashboard interface showcasing the stock list and search utilities.

2. Stock and Product Management

Staff members can easily input new products or update existing stock levels whenever new items arrive.

  • Dropdown Category Mapping: Categories are dynamically loaded from the category database.
  • Asynchronous Image Upload: Seamless, non-blocking upload of product images to optimize performance.
  • Confirmation Dialogues: Modal-based confirmation prompts to prevent accidental deletions and ensure database integrity.
Add Product Form Figure: The product addition and stock edit form, featuring image upload support.

3. Category Management

Enables staff to organize products by handling the CRUD lifecycle of frozen food categories.

Category Management Figure: Category management dashboard.

4. Interactive Staff Help Guide

A dedicated help module designed to guide staff members through the stock opname workflow and help troubleshooting issues.

Help Guide Figure: Interactive guide page with instructions for staff.

Technical Stack & Architecture

The project follows a modern Full-Stack Architecture:

  • Front-End: Angular (delivering a highly responsive, single-page application experience with optimized state management and UI components).
  • Back-End: Express.js & Node.js (RESTful API endpoints handling stock operations, file uploads, and database transactions).
  • Database: Relational database managing the relations between items, categories, and audit logs.