Welcome to the React Inventory Project!

This project is a web application built using React, a popular JavaScript library for building user interfaces. The purpose of this project is to create a simple inventory management system where users can manage and track their inventory of products.

Features

  • Product Listing: View a list of products currently in the inventory.
  • Add Product: Add new products to the inventory.
  • Edit Product: Update the information on existing products
  • Delete Product: Remove products from the inventory.

Installation

Before running the application, ensure you have Node.js and npm (Node Package Manager) installed on your system. Then, follow these steps:

The first step is to create a folder

mkdir folder-name

To select that folder, run this command

cd folder-name

Vite will assist you in creating a React.jsx application.

npm create vite@latest

Select React

Then, select Javascript

Select the folder using this command

cd vite-project

Now, Install the project dependencies by running:

npm install

Usage

To start the application, use the following command:

npm run dev + Press H + Press O

This will launch the development server, and the application will be accessible at http://localhost:3000 in your web browser.

Project Structure

The project's file structure is organised as follows:

vite-project/
  ├── src/
  │   ├── components/
  │   │   ├── ProductCard.jsx
  │   ├── App.jsx
  │   ├── App.css
  │   └── InventorySystem.jsx
  │   └── main.jsx
  ├── index.html
  ├── package.json
  ├── package-lock.json
  └── ...
  • src/: Contains the source code for the application.
  • src/components/: Contains React components used in the application.
  • App.jsx: The main component that serves as the entry point of the application.
  • main.jsx: The entry point of the React application

Dependencies

The main dependencies used in this project are:

  • ReactJS: A JavaScript library for building user interfaces.
  • React DOM: Provides DOM-specific methods that can be used at the top level of your application.
  • Other minor dependencies (check the package.json file for the full list).

Contributing

You are welcome to contribute to this project! If you find any issues or have ideas for improvements, feel free to create a pull request or open an issue.

License

This project is licensed under my ownership. You can, however, freely use it.

Thank you for using the React Inventory Project! Happy managing your inventory! 🚀 If you have any more questions or need further assistance, feel free to ask! ❤️

Love and Regards,

Abdullah Jaffrey