Scribd
Upload
4 views4 pages

Product Inventory

The document outlines the development of a React application for managing product inventory in a small store, including functionalities for viewing, adding, editing, and deleting products, as well as tracking stock availability. It specifies the use of React Router for navigation, controlled components for forms, Context API for state management, and async operations with a JSON server for data handling. Additionally, it provides a folder structure and details on the components involved in the application, such as Navbar, Home, ProductList, and ProductForm.

Uploaded by

starlord19op2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

Product Inventory

The document outlines the development of a React application for managing product inventory in a small store, including functionalities for viewing, adding, editing, and deleting products, as well as tracking stock availability. It specifies the use of React Router for navigation, controlled components for forms, Context API for state management, and async operations with a JSON server for data handling. Additionally, it provides a folder structure and details on the components involved in the application, such as Navbar, Home, ProductList, and ProductForm.

Uploaded by

starlord19op2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Case Study: Product Inventory Management

System
Objective
Build a React application to manage product inventory for a small store:

• View all products


• Add new products
• Edit product details
• Delete products
• Track stock availability
• Use routing, context, hooks, and API integration

Functional Requirements
1. Navigation (React Router)

The application should include:

• / → Home (Inventory Summary)


• /products → Product list
• /add-product → Add product form
• /edit-product/:id → Edit product

2. Forms (Controlled Components)

Add/Edit Product Form Fields:

• Product Name
• Category (Electronics / Grocery / Clothing)
• Price
• Quantity
• Availability (In Stock / Out of Stock)
All form inputs must be controlled using React state.

3. Context API (State Management)

Use Context API to:

• Store global product data


• Share state across components
• Handle CRUD operations centrally

4. Async Operations (json-server)


• Fetch products from API
• Add new product
• Update product
• Delete product

5. React Hooks

Use:

• useState → Form handling


• useEffect → API calls
• useContext → Global state
• useNavigate → Redirect after operations

🗂 Folder Structure (Simple)

product-inventory/
│── public/
│── src/
│ │── components/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │
│ │── context/
│ │ ├── [Link]
│ │
│ │── services/
│ │ ├── [Link]
│ │
│ │── [Link]
│ │── [Link]
│
│── [Link]
│── [Link]

JSON Server Data

{
"products": [
{
"id": 1,
"name": "Wireless Mouse",
"category": "Electronics",
"price": 799,
"quantity": 25,
"availability": "In Stock"
},
{
"id": 2,
"name": "Rice Bag 5kg",
"category": "Grocery",
"price": 350,
"quantity": 10,
"availability": "In Stock"
},
{
"id": 3,
"name": "Men T-Shirt",
"category": "Clothing",
"price": 499,
"quantity": 0,
"availability": "Out of Stock"
},
{
"id": 4,
"name": "Bluetooth Speaker",
"category": "Electronics",
"price": 1499,
"quantity": 8,
"availability": "In Stock"
}
]
}

Components
1. Navbar

• Navigation links to all pages

2. Home (Inventory Summary)

• Display:
◦ Total products
◦ In-stock products
◦ Out-of-stock products

3. ProductList (READ + DELETE)

• Display all products


• Show:
◦ Name
◦ Category
◦ Price
◦ Quantity
• Actions:
◦ Edit
◦ Delete

4. ProductForm (CREATE + UPDATE)

• Used for both Add & Edit


• Controlled form
• On submit:
◦ Add product OR
◦ Update product

CRUD Mapping
Operation Component
CREATE ProductForm
READ ProductList
UPDATE ProductForm
DELETE ProductList

You might also like