This is a responsive inventory management website built using HTML, CSS, and modular JavaScript. It features three main dynamic pages that load content based on user interactions. The application allows users to manage categories and products in a streamlined dashboard interface.
Check out the live version here.
- Dashboard: View key metrics such as total price, quantity, number of categories, and an overview of all products in one place.
- Category Management: Add, edit, and manage product categories with descriptions. Changes to categories automatically update across the application.
- Inventory Management: Add, edit, and delete products in the inventory. Products are assigned categories from the Category Management page, and changes to categories dynamically affect inventory data.
- Search Functionality: Search for products by name using the built-in search bar.
- Responsive Design: The app is fully responsive, ensuring a great experience across all devices.
The design of the website was inspired by a Figma Inventory Management Dashboard UI. You can view the original design here.
- HTML: Structure of the web pages.
- CSS: Styling and responsive layout.
- JavaScript (Modular): Functionality, dynamic content loading, and interaction handling.
- Dashboard: Displays total price, quantity, categories, and other product metrics.
- Category Page: Allows users to create and manage categories. Changes here will update the products in inventory automatically.
- Inventory Page: Add, edit, and remove products. Categories are assigned from the Category Page.
- Clone this repository:
git clone https://github.com/arianimmen/Inventory-Management-Practice.git
- Navigate to the project directory:
cd Inventory-Management-Practice - Open
public/index.htmlin your browser to view the application.
Contributions are welcome! Feel free to fork the repository and submit pull requests.