Skip to content

README.md

Latest commit

 

History

History
91 lines (63 loc) · 4.2 KB

README.md

File metadata and controls

91 lines (63 loc) · 4.2 KB

Product Management System - CRUD Operations

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.

💻 Technologies Used

  • 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.

🌐 Demo (Live Preview):

Live Preview: https://ahmed-maher77.github.io/Product-Management-System\_\_CRUDS-Operations/

🎥 Watch Video on LinkedIn:

Watch Preview Video: https://www.linkedin.com/feed/update/urn:li:activity:7230217089851039745/

✨ Key Features

  • 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.

👀 Website Preview:

website preview - UI Mockup

📥 Installation Instructions (Local Setup)

Follow these steps to set up the project locally on your machine:

  1. Clone the repository 
    git clone https://github.com/your-username/your-repository.git
  2. Navigate to the project directory 
    cd your-repository
  3. Open the project
    open the index.html file directly in your browser.
    OR 
    # Using VS Code Live Server
Right-click index.html → "Open with Live Server"

📬 Contact & Contribution

Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.

⭐ Support

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!