React Inventory System

English | Deutsch

A simple inventory management system built with React, TypeScript, and Vite.

The application manages medicines and their stock levels. json-server is used as a local REST API for development.

Features

• Display inventory items
• Search medicines
• Sort inventory data
• Display current stock and minimum stock levels
• Automatic low-stock warnings
• CSV export
• Local REST API using json-server

Project Structure

│── public/
│
│── src/
│   ├── assets/
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── Header.css
│   │   ├── Footer.tsx
│   │   ├── Footer.css
│   │   └── NewMedicineForm.tsx
│   │
│   ├── pages/
│   │   ├── Inventory.tsx
│   │   └── Inventory.css
│   │
│   ├── hooks/
│   ├── context/
│   ├── services/
│   ├── styles/
│   ├── utils/
│   │
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
│
├── .gitignore
├── db.json
├── DOKUMENTATION.md
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── README.de.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Requirements

The following software is required:

• Node.js
• npm

Installation

Clone the repository and navigate to the project directory.

Install all dependencies:

npm install

Running the Application

The application requires two terminals: one for the React frontend and one for the local REST API.

Terminal 1 – React Frontend

Start the Vite development server:

npm run dev

The frontend is available by default at:

http://localhost:5173

Terminal 2 – REST API

Start the local json-server API:

npm run api

The API is available at:

http://localhost:5000

The inventory endpoint can be accessed directly at:

http://localhost:5000/inventory

Available Scripts

npm run dev

Starts the Vite development server.

npm run api

Starts the local json-server REST API.

npm run build

Creates a production build.

npm run lint

Runs ESLint.

npm run preview

Starts a local server for previewing the production build.

Stock Status

Each inventory item contains a current stock level and a minimum stock level.

Example:

{
  "stock": 34,
  "minimumStock": 40
}

The application automatically determines the stock status:

Condition	Status
stock > minimumStock	Available
stock <= minimumStock	Low Stock
stock === 0	Out of Stock

API Data

Inventory data is stored in:

db.json

Example inventory item:

{
  "id": "5",
  "orderNumber": "ORD-1005",
  "name": "Amoxicillin",
  "stock": 34,
  "minimumStock": 40,
  "sold": 15,
  "weight": "1000 mg",
  "price": 28.59,
  "discount": 10
}

Production Build

Create a production build with:

npm run build

The generated files are stored in the dist directory.