# Person and Pet CRUD UI

This is a simple CRUD (Create, Read, Update, Delete) application for managing persons and their pets, built with SolidJS and using the `api-client-backend` package for API communication.

## Features

### Person Management
- **Create** new persons with first name, last name, gender, and plan (free/premium)
- **Read/List** all persons with their details
- **Update** existing person information
- **Delete** persons

### Pet Management
- **Create** new pets with name, species (dog/cat), and owner assignment
- **Read/List** all pets with their owners
- **Update** existing pet information
- **Delete** pets

## Running the Application

1. **Start the backend server** (must be running on `http://localhost:3000`):
   ```bash
   cd apps/backend
   pnpm run dev
   ```

2. **Start the frontend development server**:
   ```bash
   cd apps/frontend
   pnpm run dev
   ```

3. Open your browser and navigate to the URL shown in the terminal (typically `http://localhost:5173`)

## Tech Stack

- **SolidJS** - Reactive UI framework
- **api-client-backend** - Type-safe API client generated from OpenAPI spec
- **Vite** - Build tool and dev server

## Application Structure

- `src/app.tsx` - Main application component with tab navigation
- `src/person-crud.tsx` - Person management CRUD component
- `src/pet-crud.tsx` - Pet management CRUD component
- `src/api.ts` - API client configuration
- `src/index.tsx` - Application entry point

## API Configuration

The API client is configured to connect to `http://localhost:3000`. To change this, edit [src/api.ts](src/api.ts#L4-L6).

## Notes

- You must create at least one person before you can create a pet (pets need an owner)
- All form validations are in place to ensure data integrity
- The UI features inline editing and creation forms
- Real-time updates after create, update, or delete operations