Inventory Manager

A simple Inventory Management Web App built with React on the frontend and FastAPI on the backend.
This project was my first experience learning FastAPI, and it demonstrates basic CRUD operations (Create, Read, Update, Delete) for managing products.

---

Table of Contents

• Project Description
• Features
• Technologies Used
• Setup Instructions
• FastAPI Basics Learned
• API Endpoints
• Screenshots

---

Project Description

This project is a basic inventory management system that allows users to:

• Add new products
• View a list of products
• Edit existing products
• Delete products
• Filter and sort products by ID, name, price, and quantity

The frontend is built with React, including features like form validation, search, sorting, and auto-dismiss messages.
The backend is built with FastAPI and uses SQLAlchemy with PostgreSQL for database management.

---

Features

• Full CRUD operations for products
• Search by product ID, name, or description
• Sorting by ID, name, price, or quantity
• Responsive UI with React
• Auto-dismiss success/error messages
• Persistent storage with PostgreSQL and SQLAlchemy
• CORS enabled for local frontend-backend communication

---

Technologies Used

• Frontend: React, CSS
• Backend: FastAPI, Python, SQLAlchemy
• Database: PostgreSQL
• Other: Axios for HTTP requests

---

Setup Instructions

Backend (FastAPI)

1. Create and activate a virtual environment:

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

2. Install dependencies:

   pip install fastapi uvicorn sqlalchemy psycopg2 pydantic
   

3. Set up PostgreSQL and configure your database in database.py.

4. Run the FastAPI server:

   uvicorn main:app --reload
   
   

5. Open API docs at http://localhost:8000/docs

Frontend (React)

1. Navigate to the frontend folder:

   cd frontend
   
   

2. Install dependencies:

   npm install
   
   

3. Start the React app:

   npm start
   
   

4. The app should open at http://localhost:3000

FastAPI Basics Learned

Creating a FastAPI app: app = FastAPI()

Defining routes: @app.get(), @app.post(), @app.put(), @app.delete()

Request validation: Using Pydantic models for request data

Dependency Injection: Using Depends() to manage DB sessions

CORS Middleware: To allow requests from React frontend

CRUD with SQLAlchemy: Creating, reading, updating, and deleting database records

Automatic API docs: Available at /docs with Swagger UI

API Endpoints

Screenshots

List of products with sorting and search

Form to add or edit a product

Success message after CRUD operations

Database - PostgreSQL

This project was a great hands-on introduction to FastAPI, React, and building full-stack web applications.