📦 Inventory Management System

A full-stack inventory management application built with FastAPI and React, deployed on Render. This system helps businesses manage their inventory, track products, and communicate with suppliers efficiently.

🌐 Live Demo

• Frontend: https://inventory-management-frontend-5bio.onrender.com
• Backend API: https://inventory-management-backend-ppyt.onrender.com

✨ Features

Product Management

• Add, edit, and delete products
• Track quantity in stock and quantity sold
• Automatic revenue calculation
• Real-time product search
• Product count display

Supplier Management

• Manage supplier information
• Email communication system
• Link products to suppliers

User Interface

• Responsive Bootstrap design
• Navigation bar with product counter
• Search functionality
• Interactive forms with validation

🛠️ Tech Stack

Backend

• FastAPI
• Tortoise ORM
• PostgreSQL
• FastAPI-Mail
• Python 3.8+
• CORS enabled for cross-origin requests

Frontend

• React
• React Bootstrap
• React Router
• Context API for state management
• React Hooks

💻 Components Structure

Context Components

- ProductContext.js  // Manages global product state
- SupplierContext.js // Manages supplier information
- UpdateContext.js   // Handles product updates

UI Components

- NavBar.js       // Navigation with search and product counter
- AddProducts.js  // Product addition form
- ProductRows.js  // Display and manage products
- ProductsTable.js  // Displays the table of products
- SupplierPage.js   // Manages supplier interactions
- UpdateProducts.js // Form for updating product information

Backend Components

- app.py          // Application entry point
- models.py       // Defines database models

🚀 Local Development Setup

Backend Setup

1. Clone the repository

git clone
cd inventory-management

2. Create virtual environment

python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

3. Install dependencies

pip install fastapi uvicorn tortoise-orm fastapi-mail python-dotenv

4. Set up environment variables (.env)

EMAIL=your-email@gmail.com
PASS=your-email-password
DATABASE_URL=postgresql://username:password@localhost:5432/dbname

5. Run development server

uvicorn app:app --reload --port 8000

Frontend Setup

1. Navigate to frontend directory

cd frontend

2. Install dependencies

npm install

3. Set up environment variables (.env)

REACT_APP_API_URL=http://localhost:8000

4. Start development server

npm start

📡 API Endpoints

Products

GET /product         - List all products
GET /product/{id}    - Get product details
POST /product/{supplier_id} - Create product
PUT /product/{id}    - Update product
DELETE /product/{id} - Delete product

Suppliers

GET /supplier        - List suppliers
POST /supplier       - Add supplier
PUT /supplier/{id}   - Update supplier
DELETE /supplier/{id}- Delete supplier

Email

POST /email/{product_id} - Send supplier email

📊 Data Models

Product Model

{
    id: number;
    name: string;
    quantity_in_stock: number;
    quantity_sold: number;
    unit_price: number;
    revenue: number;
    supplied_by: number;
}

Supplier Model

{
    id: number;
    name: string;
    company: string;
    email: string;
    phone: string;
}

🔄 State Management Example

// Product Context Usage
const [Products, setProducts] = useContext(ProductContext);
// Update Product
const updateForm = (e) => {
setProductInfo({
...productInfo,
[e.target.name]: e.target.value
});
};

🚀 Deployment

Backend Deployment

1. Create a new Web Service on Render
2. Connect your GitHub repository
3. Configure environment variables:
   • DATABASE_URL
   • EMAIL
   • PASS
4. Set build command: pip install -r requirements.txt
5. Set start command: uvicorn app:app --host 0.0.0.0 --port $PORT

Frontend Deployment

1. Create a new Static Site on Render
2. Connect your GitHub repository
3. Set build command: npm install && npm run build
4. Set publish directory: build

🔐 Security Features

• CORS configuration for specified origins
• Environment variables for sensitive data
• Email authentication
• Input validation

🐛 Troubleshooting

Common issues and solutions:

• CORS errors: Check if your domain is added to the allowed origins
• Database connection: Verify PostgreSQL connection string
• Email sending failures: Check email credentials

📱 Responsive Design

The application is fully responsive and tested on:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📄 License

This project is licensed under the MIT License.

Made with ❤️ using FastAPI and React by Vislavath Pavani