59 lines
1.8 KiB
Markdown
59 lines
1.8 KiB
Markdown
# 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
|