📦 Product Management System

Create and manage your product inventory with ease

A modern web application for managing products with advanced filtering and organization features

📋 Project Overview

This project was developed as part of the Route Academy Full Stack Development Program, a 12-month intensive training program. It represents a JavaScript assignment in the curriculum, focusing on implementing CRUD operations in a web application.

💫 Interface Preview

✨ Features

• ➕ Add products with name, price, category, image, and description
• ✅ Validate inputs before submission with real-time feedback
• 🏷️ Categorize products (Phones, Screens, AirPods, Watches, Other)
• 🔍 Search functionality with term highlighting to quickly find products
• 🗂️ Filter products by category
• 📊 Sort products by date added, name, or price
• 🗑️ Delete products with confirmation dialog
• ✏️ Edit existing products
• 📱 Responsive design for all devices
• 💾 Local storage for data persistence
• ⬆️ Scroll to top button for easy navigation

🛠️ Technology Stack

🎨 Frontend Technologies

📚 Libraries & Frameworks

💻 Development Tools

📁 Project Structure

Product Management System/
├── css/
│   ├── all.min.css (Font Awesome)
│   ├── bootstrap.min.css
│   ├── main.css (Custom styles)
│   └── sweetalert-custom.css
├── images/
│   └── product-management.png
├── js/
│   ├── bootstrap.bundle.min.js
│   ├── index.js (Main application logic)
│   └── sweetalert-config.js
├── webfonts/ (Font Awesome icon fonts)
├── docs/
│   ├── project-requirements.md
│   └── ui-screenshots/
│       └── Hero.png
├── index.html
├── README.md
└── .gitignore

🚀 How to Use

1. Clone the repository

   git clone https://github.com/MohamedV0/product-management.git

2. Open index.html in your browser
3. Add products by filling out the form and clicking "Add product"
4. Search, filter, and sort your products using the controls
5. Click "Edit" to modify an existing product
6. Click "Delete" to remove a product

📊 Code Organization

The JavaScript code follows a modular pattern with separate objects for:

• DOM: References to HTML elements
• CONFIG: Constants and configuration values
• ProductManager: Core functionality for managing products
• UI: Handles rendering and display
• Validator: Input validation
• Utilities: Helper functions

✅ Requirements Fulfilled

This implementation meets and extends the original project requirements:

Requirement	Implementation
Create functionality	✅ Add new products with name, price, category, image, and description
Read functionality	✅ Display products in a responsive grid layout
Update functionality	✅ Edit existing products and update display
Delete functionality	✅ Remove products with confirmation
Data validation	✅ Regular expression pattern matching for all inputs
Clean UI	✅ Modern dark theme design with Bootstrap and custom CSS
Enhanced features	✅ Categories, search highlighting, sort, filter, scroll-to-top, and responsive design

---

Developed with ❤️ by Mohamed Ashraf as part of Route Academy Full Stack Program