Instock Web App

Inventory Management System

The InStock project was developed during a web development bootcamp as a collaborative group project. The goal was to deliver a modern and scalable Inventory Management System for a client. The project required working as an Agile team, following Scrum methodologies and using tools like JIRA, Figma, and Git/GitHub for efficient collaboration and project management.

Skills Used

React.js ・
Node ・
Express ・
MySQL ・
Figma ・

View Site

When a new warehouse is added, the UI automatically updates if the list is rendered dynamically (e.g., using .map()). The new warehouse appears in the list as soon as it’s added to the data source, such as a state variable or database, without needing to reload the page.

Warehouse & Inventory Management System built with Agile/Scrum: React (Router, BEM/SASS) Front-End, Node.js/Express & MySQL (Knex) back end, RESTful API , offering CRUD, dynamic search/filter, responsive design, and real-time validation.

When a new warehouse is added, the UI updates dynamically, showing the new warehouse once it's added to the data source. This triggers state changes, re-renders, and actions like form resets. If the data is incomplete or invalid, validation errors may occur. When using MySQL, an API call stores the data, and the UI fetches the updated list.

When you edit a product, the form updates the local state with the new input. On submit, a PUT or PATCH request is sent to the backend with the updated data. If the request is successful, the backend responds with the updated product, and the UI state is refreshed, showing the changes instantly.

When deleting a product, a common visual error is that the item still appears in the UI even after it is been removed from the backend. This usually happens when the frontend state is not updated correctly after the delete action, or if the product list is not re-fetched to reflect the latest data.