Inventory Frontend Service

Minimal React frontend for inventory management. Focus: DevOps/CI-CD demo, not UI complexity.

Features (Minimal by Design)

• Display items in simple table
• Add new item form (name, quantity, price)
• Basic error handling
• That's it! No edit, delete, pagination, or filters

Tech Stack

• React 19 + Vite
• Axios for API calls
• Basic CSS (no framework)
• Nginx for production serving

Local Development

Prerequisites

• Node.js 20+
• Backend service running at http://localhost:3000

Quick Start

# 1. Install dependencies
npm install

# 2. Create .env file
cp .env.example .env

# 3. Start development server
npm run dev
# Frontend runs on http://localhost:5173

Testing

# Run tests
npm test

# Run linter
npm run lint

# Build for production
npm run build

Environment Variables

Variable	Default	Description
VITE_API_URL	http://localhost:3000	Backend API URL

Docker Build

# Build image
docker build -t frontend-service:latest .

# Run container
docker run -d -p 80:80 frontend-service:latest

CI/CD Pipeline

Gitea Actions workflow:

1. Checkout → Install → Lint → Test → Build
2. SonarQube scan + quality gate
3. Build multi-stage Docker image (React build + nginx)
4. Push to Gitea registry with tags: {branch}-{sha}, {branch}, latest
5. Update k8s-manifests repo

Component Structure

Single component (App.jsx) with:

• Items list table
• Add item form
• Loading/error states
• API integration via axios

~80 lines total - intentionally minimal!

Project Structure

frontend-service/
├── src/
│   ├── App.jsx            # Single component (~80 lines)
│   ├── api.js             # Axios API calls (~15 lines)
│   ├── App.css            # Basic styling
│   └── main.jsx           # Entry point
├── tests/
│   └── App.test.jsx       # Basic component tests
├── .gitea/workflows/
│   └── ci.yaml            # CI/CD pipeline
├── Dockerfile             # Multi-stage build
├── nginx.conf             # Production web server config
├── package.json
└── README.md

Total: ~8 files - focus on DevOps, not application!

Production Deployment

Built as static files served by nginx:

• React app compiled to /usr/share/nginx/html
• Non-root nginx user (nginx-app:1001)
• Security headers enabled
• Gzip compression
• Asset caching with cache-busting
• SPA routing support

API Integration

Frontend calls backend endpoints:

• GET /api/items - Fetch all items
• POST /api/items - Create new item

Backend URL configured via VITE_API_URL environment variable.