Overview

This is a simple Product Management System "CRUD operations": (Create, Read, Update, Delete) project with MySQL database , frist integration with the Front-end and Back-end the skills used are :

HTML , CSS , Bootstrap , JS , Jquery , Regex validation -> for the FE (client) section

Node.js , MySQL , express , basics api -> for the BE (server) section

---

Details

API Endpoints:

[GET] /

        {
            "message": "done",
            "data": [...]
        }  
        

[POST] /products

Request Body:

        {
            "name": "Product Name",
            "price": 999.99,
            "description": "Product Description"
        }
        

Response:

        {
            "message": "done"
        }                  
        

[PUT] /products

Request Body:

        {
            "id": 1,
            "name": "Updated Product",
            "price": 999.99,
            "description": "Updated Description"
        }      
        

Response:

        {
            "message": "done"
        }                  
        

[DELETE] /products

Request Body:

        {
            "id": 1
        }  
        

Response:

        {
            "message": "done"
        }                  
        

[GET] /products/:id

Response:

        {
            "message": "done",
            "data": [...]
        }                 
            

Front-End Features:

The front-end uses Bootstrap for styling and jQuery for making API requests to the backend. Key features include:

• Add Product: A form where users can input product details (name, price, description) and add it to the system.
• Search Functionality: Users can search for products by name, description, or price.
• Update Product: Users can click an "Update" button to modify an existing product.
• Delete Product: Users can delete products with the "Delete" button.
• Real-Time Updates: The product list is updated in real-time after adding, updating, or deleting a product.

Main Functions:

• addProduct(): Handles adding new products to the database.
• deleteProduct(id): Deletes a product based on the provided id
• updateProduct(id): Prefills the form with the product details for updating.
• fetchData(): Fetches and displays all products from the database.
• searchProduct(): Filters the product list based on the user's search input.

Database Schema:

• id [INT] Primary key, auto-incremented
• name [VARCHAR(50)] Name of the product
• price [decimal(10,0)] Price of the product
• description [varchar(150)] Product description

Validation:

• Product name: Start with upper-case min(3) max(10) [validateProductName()]
• Product price: 5 digits number [validateProductPrice()]
• Product description: 200 characters max [validateProductDesc()]