https://github.com/rano-mal/add-products-by-import-excel-file
📦 Inventory Management App (React + Excel Import) A simple and efficient React-based inventory system that lets you add items manually or import in bulk from Excel files. Built with MUI, Axios, XLSX, and json-server for local API testing.
https://github.com/rano-mal/add-products-by-import-excel-file
axios axios-react javascript json json-server mui-icons npm react react-material-ui reactjs
Last synced: 6 months ago
JSON representation
📦 Inventory Management App (React + Excel Import) A simple and efficient React-based inventory system that lets you add items manually or import in bulk from Excel files. Built with MUI, Axios, XLSX, and json-server for local API testing.
- Host: GitHub
- URL: https://github.com/rano-mal/add-products-by-import-excel-file
- Owner: Rano-mal
- Created: 2025-04-19T17:40:00.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-23T19:22:26.000Z (6 months ago)
- Last Synced: 2025-04-23T20:29:35.622Z (6 months ago)
- Topics: axios, axios-react, javascript, json, json-server, mui-icons, npm, react, react-material-ui, reactjs
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 Inventory Management App (React + Excel Import)
A modern React-based Inventory Management Tool that allows users to:
- ✅ Add inventory items manually via a modal form
- 📁 Import bulk data from Excel (.xlsx) files
- 📊 View all items in an interactive DataGrid
- 💾 Store data using `json-server` as a mock API (for local testing)
- 🚀 Built with MUI, Axios, and XLSX
---
## 📸 Screenshots
| Add Item Modal | Excel Upload & Table View |
|----------------|---------------------------|
|  |  |
|  |  |
---
## 🧠 Features
- 📥 **Import Excel Files:** Upload `.xlsx` files and auto-populate the inventory table
- ✍️ **Manual Entry Form:** Add items individually via a clean and user-friendly modal form
- 🔁 **Live Data Table:** View and scroll through real-time inventory in a MUI `DataGrid`
- ⚡ **API Integration:** Uses Axios to send/receive data to/from `json-server`
- 🔔 **Notifications:** Success & error alerts via MUI Snackbar
- 🧪 **Testable API:** Simulate backend functionality using `json-server`
---
## 🛠 Tech Stack
| Technology | Description |
|---------------|--------------------------------|
| React.js | Frontend JavaScript library |
| Material UI | Pre-built UI components |
| Axios | Promise-based HTTP client |
| XLSX | Parse and read Excel files |
| json-server | Mock REST API for local testing|
---
## 🚀 Getting Started
### 1️⃣ Clone the Repo
```bash
git clone https://github.com/your-username/inventory-app.git
cd inventory-app
```
### 2️⃣ Install Dependencies
```bash
npm install
```
### 3️⃣ Start JSON Server
```bash
npx json-server --watch db.json --port 4000
```
### 4️⃣ Start React App
```bash
npm start
```
📁 Project Structure
```arduino
📦 inventory-app
├── public/
├── src/
│ ├── components/
│ │ └── InventoryOverview.jsx
│ ├── App.js
│ └── ...
├── db.json <-- JSON Server DB
├── package.json
└── README.md
```
Made with ❤️ by Rano Mal
---
Let me know if you'd like this customized with your name, GitHub repo link, or want a markdown version copy in a file!