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