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

Start the backend server (must be running on http://localhost:3000):
```
cd apps/backend
pnpm run dev
```
Start the frontend development server:
```
cd apps/frontend
pnpm run dev
```
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.

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

1.8 KiB Raw Blame History