Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/12pavani/inventory_management_project

An efficient Inventory Management App built with FastAPI for the backend and React.js for the frontend. This application provides users with a seamless interface to manage inventory, featuring real-time updates, intuitive CRUD operations, and streamlined navigation.
https://github.com/12pavani/inventory_management_project

crud fastapi inventory-management reactjs real-time web-development

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/12pavani/inventory_management_project
Owner: 12pavani
Created: 2024-10-24T04:29:08.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-10-24T07:30:48.000Z (3 months ago)
Last Synced: 2024-10-24T22:24:56.361Z (3 months ago)
Topics: crud, fastapi, inventory-management, reactjs, real-time, web-development
Language: JavaScript
Homepage: https://inventory-management-frontend-5bio.onrender.com
Size: 241 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

📦 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 protected]

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

Create a new Web Service on Render

Connect your GitHub repository

Configure environment variables:
- DATABASE_URL
- EMAIL
- PASS

Set build command: pip install -r requirements.txt

Set start command: uvicorn app:app --host 0.0.0.0 --port $PORT

Frontend Deployment

Create a new Static Site on Render

Connect your GitHub repository

Set build command: npm install && npm run build

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

Fork the repository

Create your feature branch

Commit your changes

Push to the branch

Create a Pull Request

📄 License

This project is licensed under the MIT License.

Made with ❤️ using FastAPI and React by Vislavath Pavani