Structured inventory
Create companies, storage locations, shelves, folders, and equipment records. Adjust equipment quantities and navigate a company’s storage hierarchy.
Graduation project / Jazan University / 2024–2025
Network Storage Management System
A web-based system for organizing physical equipment across companies, storage locations, and shelves—with inventory history, statistics, and a 3D layout simulator.
My rolePrimary Co-Developer & Designer
TeamFour-student team · two primary contributors
DeliverableWeb application prototype
01 / Overview
The problem.
The approach.
The problem
Equipment tracked through spreadsheets or paper records can be difficult to locate and keep up to date. The project explored how a shared web interface could make inventory structure, quantities, and storage locations easier to understand.
Our solution
We developed a graduation prototype that groups equipment under companies, storage locations, and shelves. Users can maintain quantities, review activity, explore charts, and experiment with physical storage layouts in a separate 3D simulator.
Project focus
This application organizes physical equipment and inventory. Its storage locations and shelves represent physical spaces.
02 / Inside the application
A closer look at the original work.
Explore the screens from the submitted project. Select a view or expand it for a closer look.
Inventory statistics
A company-level overview of equipment types, item quantities, and recorded activity. Figures shown are project demonstration data.
Original application screenshots extracted from the graduation report and presentation.
03 / My contribution
My part
in the project.
Primary Co-Developer & Designer
The official team consisted of four students. Salman and I were the two primary contributors, working across most areas of the project.
My contribution spanned application development, UI and interface design, feature implementation, Supabase integration, testing, troubleshooting, documentation, the final presentation, and general development decisions.
04 / Implementation
What the prototype implements.
The application brings inventory, account access, activity history and storage planning into a single graduation prototype.
Account-based access
Supabase email/password registration and login, session handling, and authenticated application routes. The archive includes policies intended to restrict records by ownership.
History & CSV export
A history page with text search, action and date filters, and CSV export. The application and migrations include recording of equipment creation and quantity changes.
Inventory statistics
Company selection, equipment-type charts, quantity totals, and recent activity. The statistics page includes a Supabase change subscription to request refreshed data.
Manual 3D layout exploration
Define a storage space, add dimensioned boxes, drag them within the floor boundaries, and inspect volume totals using Three.js.
Storage summary PDF
Export the simulator’s volume totals and timestamp to PDF with jsPDF. This is a numerical summary; saved 3D scenes are outside the prototype’s scope.
A browser application connected directly to Supabase.
React application
Inventory · company view
History · statistics
Supabase clientAuthentication & data requests
Supabase
Authentication · data
Ownership policies · change events
Separate browser-side simulatorThree.js scene → manual box placement → jsPDF volume summary
The simulator is not connected to persisted inventory records.
Technology used in the project
ReactTypeScriptTailwind CSSSupabaseThree.jsRechartsjsPDFVite
The frontend uses Supabase for authentication and data access. The 3D simulator runs separately in the browser. The supplied deployment configuration targets Netlify.
How the inventory is organized
Company records connect to storage locations, shelves, and equipment. Folders belong to storage locations; equipment history records activity. Profiles link application users to their company records.
CompanyStorage locationShelfEquipment
Authentication and ownership policies support account-based access. Advanced multi-role permissions remained outside the completed scope.
05 / Challenges & reflection
Working through the details.
01
Connecting accounts and inventory
Authentication, user profiles, and company records needed to work together. Testing these relationships helped us understand integration across the interface and its data.
02
Handling related records
Equipment, shelves, and activity history depend on one another. Keeping these relationships consistent during quantity changes and record deletion required testing and troubleshooting.
03
Setting a realistic access-control scope
Admin, staff, and viewer roles proved more difficult than planned. The report and presentation explicitly identify role-based permissions as incomplete; authentication and ownership policies are a narrower part of the implementation.
Prototype scope & future work
The prototype established the core workflow, with further scope for access control and storage-planning features.
- Admin, staff, and viewer permissions were planned but not fully implemented.
- Barcode and QR scanning, AI placement recommendations, a mobile app, and offline access remained future work.
- The simulator supports manual placement; automatic packing, collision-aware optimization, and saved scene persistence are not implemented.
Presented from the submitted application, report and presentation; this is an academic prototype.
Outcome
From concept to prototype.
The submitted project includes a React application, Supabase migrations, a final report, presentation, and screenshots of the working prototype. It demonstrates an end-to-end inventory workflow alongside a separate 3D storage-planning interface.
What I learned
Integration is part of the work.
The work connected interface design with structured data, authentication, and integration. It also made the difference between a feature appearing in an interface and working reliably across related records much more concrete.
Let’s connect
Good systems start
with good people.
For opportunities in IT support, networking, systems, and infrastructure, get in touch.
Download ResumePDFView Resume