Inventory Management System
A browser-based application for managing inventory — covering product listings, stock levels, supplier information, and a complete admin control panel.
This application uses seeded sample data and browser storage. Its role controls demonstrate local workflows; a shared backend is not connected.
Inventory workflow
The interface keeps product movement, stock checks, and reporting in one traceable browser-based flow.
- Set upAdd products, categories, and suppliers
- RecordLog stock-in and stock-out transactions
- MonitorReview quantities and low-stock warnings
- ReportFilter activity and export records
Frontend Screenshots
Features
- Admin, Manager, and Staff registration with role-based dashboards and permissions
- Local demo login, persistent sessions, password recovery, and account activation controls
- Inventory dashboard with product totals, stock alerts, valuation, charts, and recent activity
- Complete product management with SKU, barcode, pricing, stock levels, supplier, category, and images
- Add, view, edit, archive, and restore product records with validated form inputs
- Stock-in and stock-out transactions with automatic inventory quantity updates
- Negative-stock prevention, duplicate SKU protection, and clear validation messages
- Automatic low-stock and out-of-stock alerts based on configurable reorder levels
- Supplier directory with contact information, linked products, and active or inactive status
- Category management with product counts, unit totals, inventory values, and color coding
- Product and transaction search with category filters, stock filters, sorting, and pagination
- Detailed inventory transaction history with references, notes, before-and-after quantities, and users
- Current inventory, stock movement, and low-stock reports with Philippine peso valuation
- CSV report export, print-to-PDF support, and a user-attributed audit log for every action
Tech Stack
The application is built with React 18 and TypeScript, using reusable components and strongly typed inventory models throughout the codebase. Tailwind CSS provides the responsive interface, while React Router handles protected pages and role-aware navigation. A dedicated service layer implements authentication, product validation, stock calculations, reporting, and audit rules using reliable local persistence through the Web Storage API. The main workflows are covered by Vitest and Testing Library, and the optimized Vite production build is deployed on Vercel.
My Role
Application Developer — Solo Build
I designed and developed the Inventory Management System from the ground up as a solo project, covering product planning, interface design, domain modeling, business rules, automated testing, and deployment preparation.
On the frontend, I built a responsive React and Tailwind CSS interface with reusable cards, tables, filters, charts, forms, modal dialogs, alerts, loading states, and mobile navigation. I created dedicated experiences for the dashboard, products, stock transactions, suppliers, categories, reports, users, and audit records.
For the application logic, I designed a typed service layer that separates the user interface from data persistence. It handles product creation and archiving, duplicate SKU validation, automatic stock-in and stock-out updates, negative-stock prevention, low-stock detection, supplier and category records, and detailed transaction history.
I implemented authentication and authorization for Admin, Manager, and Staff roles, including registration, persistent or session-only login, password recovery, protected routes, user account management, and audit attribution. The project currently uses seeded local data and browser storage, with the architecture prepared for a future REST API and database backend.
I also built reporting and quality assurance features, including inventory valuation in Philippine pesos, stock-movement and low-stock reports, CSV exports, print-to-PDF support, and automated tests for authentication, permissions, product creation, stock adjustments, search, filters, alerts, registration, and password recovery. Finally, I optimized the Vite production build for deployment on Vercel.