Khappa Inventory System

A modern inventory management system for businesses

---

Features

• Product & Category Management - Full CRUD operations for products and categories
• Real-time Stock Tracking - Monitor inventory levels with live updates
• Modern UI/UX - Responsive design with smooth Framer Motion animations
• Cloud Image Hosting - Product images stored on Cloudinary

---

Tech Stack

Frontend	Backend	Services
React 19	Node.js + Express 5	NeonDb
Vite	pg (node-postgres)	Cloudinary
Tailwind CSS 4	CORS	Vercel (Frontend)
Framer Motion	dotenv	Render (Backend)
React Router DOM
Axios

---

Preview

---

Project Structure

khappa-inventory-system/
├── backend/
│   └── src/
│       ├── controller/     # Request handlers
│       ├── db/             # Database config & queries
│       ├── routes/         # API route definitions
│       ├── app.js          # Express configuration
│       └── server.js       # Entry point
├── frontend/
│   └── src/
│       ├── components/     # UI components (Forms, Layout, Modals)
│       ├── pages/          # Page components
│       ├── services/       # API service layer
│       └── App.jsx         # Main app component
└── ER-diagram.png          # Database schema

---

Getting Started

Backend

cd backend
npm install
# Configure .env with DATABASE_URL
npm run dev

Frontend

cd frontend
npm install
# Configure .env with VITE_API_URL
npm run dev

---

API Endpoints

Method	Endpoint	Description
GET/POST	/api/products	List / Create products
GET/PUT/DELETE	/api/products/:id	Get / Update / Delete product
GET/POST	/api/categories	List / Create categories
GET/PUT/DELETE	/api/categories/:id	Get / Update / Delete category

---

Learning Outcomes

This project helped me understand:

• Backend Development - Building RESTful APIs with Express, database transactions, and error handling
• Frontend-Backend Communication - Using Axios for HTTP requests, handling async data, and managing loading states
• Database Design - PostgreSQL schema design, relationships, and writing optimized SQL queries
• Full-Stack Architecture - Structuring a project with separation of concerns (routes → controllers → queries)
• Deployment - Deploying frontend to Vercel, backend to Render, and configuring CORS for production

---

License

MIT License