Address Book UI

A modern, professional React TypeScript frontend for the Address Book API service.

Tech Stack

• React 19 - UI library
• TypeScript - Type-safe development
• Vite - Build tool and dev server
• Tailwind CSS - Styling with dark mode support
• React Router - Client-side routing

Features

• 📋 View all addresses in a responsive table
• ➕ Add new addresses with validation
• ✏️ Edit existing addresses
• 🗑️ Delete addresses with confirmation
• 🔍 Search addresses by name, city, or all fields
• 🌓 Light/Dark mode toggle with system preference detection
• 📱 Fully responsive design

Getting Started

Prerequisites

• Node.js 20+
• npm 9+
• Backend API running at http://localhost:8080

Installation

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Production Build

npm run build
npm run preview

Testing

Unit Tests (Jest)

npm run test
npm run test:coverage

Integration Tests (Vitest)

npm run test:integration
npm run test:integration:coverage

E2E Tests (Playwright)

# Install browsers first
npx playwright install

# Run tests
npm run test:e2e

# Run with UI
npm run test:e2e:ui

Environment Variables

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

Docker

Build Image

docker build -t addressbook-ui:latest .

Run Container

docker run -p 80:80 -e VITE_API_URL=http://api.example.com addressbook-ui:latest

Deployment

Helm (Kubernetes/AKS)

helm install addressbook-ui ./helm/addressbook-ui \
  --set image.repository=myregistry.azurecr.io/addressbook-ui \
  --set image.tag=latest \
  --set env.VITE_API_URL=http://addressbook-api:8080

Azure Container Apps

See .github/workflows/deploy-aca.yml or .azure-pipelines/deploy-aca-pipeline.yml

Project Structure

src/
├── components/
│   ├── Address/      # Address-related components
│   └── Layout/       # Layout components
├── context/          # React contexts
├── pages/            # Page components
├── services/         # API services
├── types/            # TypeScript types
└── __tests__/        # Unit tests

CI/CD

GitHub Actions

• ci.yml - Build, test, and lint
• deploy-aca.yml - Deploy to Azure Container Apps

Azure DevOps

• build-pipeline.yml - Build and test
• deploy-aca-pipeline.yml - Deploy to Azure Container Apps

License

MIT