*WareHouse Project is a full-featured inventory & warehouse management SPA built by Erfan Ahmadi. It helps teams search, index, add, update and track components across different locations (warehouses and positions). The project blends real-world workflows with React patterns (routing, custom hooks, and modular components).

• Component catalog with search & filters
• Create / Edit / Delete items with validation and confirmations
• Locations & placements handling (warehouse / shelf / position)
• Requirement List (collect missing parts for procurement)
• Sidebar navigation with clean UX
• Reusable useFetch hook for data fetching
• Loading skeletons and polished alerts

git clone https://github.com/er4Nxz/WareHouse-project.git cd WareHouse-project/Code

npm install

npx json-server --watch db.json --port 3000

npm run dev

// Fetch items via custom hook const { state: components, loading } = useFetch('http://localhost:3000/Components');

// Create a new component await axios.post('http://localhost:3000/Components', payload);

• React (Hooks, modular components, routing)
• React Router DOM
• Axios
• SweetAlert2
• React Icons
• React Loading Skeleton
• Custom Hook: useFetch
• Data Sources: JSON Server (db.json) and MockAPI

WareHouse-project/ ├── Code/ │ ├── src/ │ │ ├── App/ │ │ ├── Components/ │ │ │ ├── Create/ │ │ │ ├── Header/ │ │ │ ├── Home/ │ │ │ │ ├── Index/ │ │ │ │ ├── Edit/ │ │ │ │ ├── Delete/ │ │ │ ├── Inventory/ │ │ │ ├── RequirementList/ │ │ │ ├── SideBar/ │ │ │ └── NotFound/ │ │ ├── Hooks/ │ │ │ └── useFetch/ │ │ ├── index.css │ │ └── main.jsx │ ├── db.json │ └── index.html └── README.md

• Designing multi-view CRUD for real warehouse workflows
• Building reusable hooks and decoupled data layer
• Managing UI state across forms, lists and detail pages

MIT License — free for personal and educational use.

WareHouse Project یک اپلیکیشن تک‌صفحه‌ای برای مدیریت انبار و قطعات است که توسط عرفان احمدی ساخته شده. با این ابزار می‌توانید قطعات را جستجو، ثبت، ویرایش و حذف کنید و برای هر قطعه محل نگهداری (انبار/قفسه/جایگاه) مشخص نمایید. این پروژه ترکیبی از چالش‌های واقعی انبارداری با الگوهای استاندارد React است (روتینگ، کامپوننت‌های ماژولار و هوک اختصاصی).

• کاتالوگ قطعات با جستجو و فیلتر
• ایجاد/ویرایش/حذف با اعتبارسنجی و تاییدیه‌ها
• مدیریت مکان‌ها (warehouse / shelf / position)
• لیست نیازمندی‌ها* برای قطعات موردنیاز خرید
• ناوبری سایدبار با تجربه کاربری تمیز
• هوک اختصاصی useFetch برای فراخوانی داده
• اسکلت‌لودینگ و پیام‌های حرفه‌ای

git clone https://github.com/er4Nxz/WareHouse-project.git cd WareHouse-project/Code

npm install

npx json-server --watch db.json --port 3000

npm run dev

// واکشی آیتم‌ها با هوک اختصاصی const { state: components, loading } = useFetch('http://localhost:3000/Components');

// ایجاد یک قطعه جدید await axios.post('http://localhost:3000/Components', payload);

ا

• *React (Hooks، کامپوننت‌های ماژولار، Routing)
• React Router DOM
• Axios
• SweetAlert2
• React Icons
• React Loading Skeleton
• هوک سفارشی: useFetch
• منابع داده: JSON Server (db.json) و MockAPI

WareHouse-project/ ├── Code/ │ ├── src/ │ │ ├── App/ │ │ ├── Components/ │ │ │ ├── Create/ │ │ │ ├── Header/ │ │ │ ├── Home/ │ │ │ │ ├── Index/ │ │ │ │ ├── Edit/ │ │ │ │ ├── Delete/ │ │ │ ├── Inventory/ │ │ │ ├── RequirementList/ │ │ │ ├── SideBar/ │ │ │ └── NotFound/ │ │ ├── Hooks/ │ │ │ └── useFetch/ │ │ ├── index.css │ │ └── main.jsx │ ├── db.json │ └── index.html └── README.md

• طراحی CRUD چندصفحه‌ای برای سناریوهای واقعی انبار
• ساخت هوک‌های قابل استفاده مجدد و لایه داده مستقل
• مدیریت state رابط کاربری بین فرم‌ها، لیست‌ها و جزئیات

مجوز MIT* — آزاد برای استفاده شخصی و آموزشی.