A modern, user-friendly web application for efficient product management, featuring full CRUD operations (Create, Read, Update, Delete), advanced search capabilities, and product status tracking with persistent storage via localStorage. Built with JavaScript, HTML, and CSS, it leverages Bootstrap for responsive design, Font Awesome for intuitive iconography, and Popper.js for interactive tooltips.
- JavaScript (ES6+) – Adds interactivity, logic, and dynamic functionality.
- HTML / HTML5 – Provides the structural foundation of the UI with semantic elements and accessibility features (e.g., ARIA).
- CSS / CSS3 – Handles styling, layout, responsiveness, animations, and theme customization (including dark mode).
- Bootstrap – Ensures a modern, mobile-first, and consistent UI design.
- Git – Manages version control for efficient tracking and collaboration.
- Supporting Tools & Libraries:
- Font Awesome – Professional, scalable icon set.
- Popper.js – Enables tooltips and popovers for improved usability.
- Google Fonts – Enhances typography and visual appeal.
- LocalStorage – Provides client-side data persistence across sessions.
Live Preview: https://ahmed-maher77.github.io/Product-Management-System\_\_CRUDS-Operations/
Watch Preview Video: https://www.linkedin.com/feed/update/urn:li:activity:7230217089851039745/
- CRUD Operations – Create, view, update, and delete products with full details (title, price, taxes, discount, category, etc.).
- Status Tracking – Mark products as Complete/Completed with persistent storage in localStorage; completed items are styled with a line-through and reduced opacity for clarity.
- Search & Filter – Quickly locate products using multiple search criteria.
- Responsive Design – Optimized for all screen sizes and devices.
- Performance & Accessibility – Fast load times with WCAG-compliant inclusive design.
- SEO-Friendly – Semantic HTML, meta tags, and descriptive elements for better search visibility.
- Modern UI/UX – Built with Bootstrap, Font Awesome, and interactive tooltips for a sleek and intuitive experience.
- Theme Options – Dark/Light mode support for comfort and personalization.
Follow these steps to set up the project locally on your machine:
- Clone the repository
git clone https://github.com/your-username/your-repository.git
- Navigate to the project directory
cd your-repository - Open the project
open theindex.htmlfile directly in your browser.
OR# Using VS Code Live Server Right-click index.html → "Open with Live Server"
- 🧑💻 Portfolio: https://ahmedmaher-portfolio.vercel.app/
- 🔗 LinkedIn: https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 Email: ahmedmaher.dev1@gmail.com
Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!