Product Management App

https://umutproductmanagement.netlify.app/

Project Purpose

The primary objective of this project is to develop a comprehensive product management system that allows users to add, edit, delete, and view products. This project aims to enhance my skills in React, React Router, Axios, and modular CSS by implementing CRUD operations and navigating between different pages.

Project Structure

|--Product_Management_App(folder)
|
├── public
│     └── index.html
├── src
│    
│    ├── assets
│    │       └──  [images] 
│    │
│    ├── components
│    │       ├── AboutContainer.jsx
│    │       ├── AboutContainer.module.css
│    │       └── MyNavbar.jsx
│    │       └── MyNavbar.module.css
│    │       └── ProductCard.jsx
│    │       └── ProductCard.module.css
│    │       └── ProductForm.jsx
│    │       └── ProductForm.module.css
│    │       └── TotalCard.jsx
│    ├── pages
│    │       ├── About.jsx
│    │       ├── About.module.css
│    │       └── Home.jsx
│    │       └── Home.module.css
│    │       └── NewProduct.jsx
│    │       └── ProductList.jsx
│    │       └── ProductList.module.css
│    │       └── UpdateProduct.jsx
│    │       └── UpdateProduct.module.css
│    ├── router
│    │       └── AppRouter.jsx
│    │       
│    ├── App.js
│    ├── index.js
│    └── index.css
│
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

Project Features

• Add Products: Users can add new products with a name, price, quantity, and image URL.
• Edit Products: Users can edit existing products by clicking on the product image.
• Delete Products: Users can delete products from the list.
• Update Product Quantity: Users can change the quantity of products.
• React Router: Implemented for navigating between different pages (Add Product, Edit Product, Home).
• Modular CSS: Used module.css files to apply scoped styles to components.
• Axios: Used for making GET, POST, PUT, and DELETE requests to a mock API.
• Responsive Design: The app is styled using CSS to ensure it is responsive and user-friendly.

Outcome

Technologies Used

• HTML: Used for structuring the content and layout of the application.
• CSS: Employed for styling and enhancing the visual aspects of the app.
• ReactJS: Utilized for building the user interface. Key React features include:
  • State management using React hooks
  • Event handling (onClick, onChange)
  • Routing using React Router
• Axios: Used for making HTTP requests to the mock API.
  • GET: Retrieve the list of products from the mock API.
  • POST: Add a new product to the mock API.
  • PUT: Update an existing product in the mock API.
  • DELETE: Remove a product from the mock API.
• React Bootstrap: Used for responsive design and UI components.
• Modular CSS: Utilized module.css files for component-level styling.

At the end of the project, will be able to;

This project has significantly enhanced my understanding and mastery of React state management, routing with React Router, handling HTTP requests with Axios, and applying modular CSS. By developing the "Product Management System" application, I have gained practical experience in:

• Managing state with React hooks in a scalable application.
• Navigating between different views using React Router.
• Performing CRUD operations with Axios to interact with a mock API.
• Implementing modular CSS for scoped component styles.

These skills are essential for developing more complex and user-interactive applications in the future.

💻 Happy Coding! 🛠️