Breeder Management App Development

Expert guidance for developing and maintaining the Breeder Management App — a comprehensive dog breeding management application built with React, TypeScript, Vite, and Firebase.

What This Skill Does

Provides architectural guidelines, coding conventions, and workflow instructions for AI agents working on the Breeder Management App. Ensures consistency across components, proper Firebase integration, state management patterns, and deployment procedures.

Project Architecture

Technology Stack

Directory Structure

```

src/

├── components/ # Reusable React components (dialogs, forms, charts)

├── pages/ # Page-level components for routing

├── lib/ # Utility functions and Firebase configuration

├── store/ # Zustand state management stores

├── types/ # TypeScript type definitions

└── data/ # Static data (e.g., dog breeds)

```

Development Instructions

Step 1: Local Development Setup

Start the development server:

```bash

npm run dev

```

Step 2: Follow Component Patterns

**Dialog Components** (AddCustomerDialog.tsx, DeleteDogDialog.tsx):

```tsx

import { useForm } from 'react-hook-form';

const AddCustomerDialog = () => {

const { register, handleSubmit } = useForm();

const onSubmit = (data) => {

// Handle form submission

console.log(data);

};

return (

<form onSubmit={handleSubmit(onSubmit)}>

<input {...register('name')} placeholder='Customer Name' />

<button type='submit'>Add</button>

</form>

);

};

```

**Key Patterns**:

Step 3: State Management with Zustand

```tsx

import create from 'zustand';

const useStore = create((set) => ({

dogs: [],

addDog: (dog) => set((state) => ({ dogs: [...state.dogs, dog] })),

}));

export default useStore;

```

Step 4: Firebase Integration

**Always import from centralized config**:

```tsx

import { db, auth, storage } from '@/lib/firebase';

```

**Error handling is mandatory**:

```tsx

try {

await addDoc(collection(db, 'dogs'), dogData);

} catch (error) {

console.error('Failed to add dog:', error);

// Show user-friendly error message

}

```

Step 5: TypeScript Conventions

```tsx

// src/types/dog.ts

export interface Dog {

id: string;

name: string;

breed: string;

birthDate: Date;

}

```

Step 6: Styling with Tailwind

```tsx

<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">

{/* Content */}

</div>

```

Step 7: Building and Deployment

**Development build**:

```bash

npm run build:dev

```

**Production build**:

```bash

npm run build:prod

```

**Deploy to development**:

```bash

npm run deploy:dev

Deploys to https://expert-breeder-dev.web.app

```

**Deploy to production**:

```bash

npm run deploy:prod

Deploys to https://expert-breeder.web.app

```

Step 8: Data Migration

Migrate data between Firebase environments:

```bash

npm run migrate

```

**Prerequisites**:

Important Constraints

1. **Never hardcode Firebase credentials** — always use `.env` files

2. **All Firebase calls must handle errors gracefully** — show user-friendly messages

3. **Follow strict TypeScript typing** — no `any` types

4. **Use Zustand for global state only** — local state stays in components

5. **Import Firebase from centralized config** — `src/lib/firebase.ts` only

6. **Write tests for utilities and components** — Jest + React Testing Library

External Dependencies

Examples

Complete Dialog Component

```tsx

import { useForm } from 'react-hook-form';

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';

import { Button } from '@/components/ui/button';

import { Input } from '@/components/ui/input';

import { addDoc, collection } from 'firebase/firestore';

import { db } from '@/lib/firebase';

interface AddDogDialogProps {

open: boolean;

onOpenChange: (open: boolean) => void;

}

export const AddDogDialog = ({ open, onOpenChange }: AddDogDialogProps) => {

const { register, handleSubmit, reset } = useForm();

const onSubmit = async (data) => {

try {

await addDoc(collection(db, 'dogs'), data);

reset();

onOpenChange(false);

} catch (error) {

console.error('Failed to add dog:', error);

}

};

return (

<Dialog open={open} onOpenChange={onOpenChange}>

<DialogContent>

<DialogHeader>

<DialogTitle>Add New Dog</DialogTitle>

</DialogHeader>

<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">

<Input {...register('name')} placeholder="Dog Name" required />

<Input {...register('breed')} placeholder="Breed" required />

<Button type="submit">Add Dog</Button>

</form>

</DialogContent>

</Dialog>

);

};

```

Zustand Store with Firebase

```tsx

import create from 'zustand';

import { collection, getDocs, addDoc } from 'firebase/firestore';

import { db } from '@/lib/firebase';

import { Dog } from '@/types/dog';

interface DogStore {

dogs: Dog[];

loading: boolean;

fetchDogs: () => Promise<void>;

addDog: (dog: Omit<Dog, 'id'>) => Promise<void>;

}

export const useDogStore = create<DogStore>((set) => ({

dogs: [],

loading: false,

fetchDogs: async () => {

set({ loading: true });

try {

const snapshot = await getDocs(collection(db, 'dogs'));

const dogs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Dog));

set({ dogs, loading: false });

} catch (error) {

console.error('Failed to fetch dogs:', error);

set({ loading: false });

}

},

addDog: async (dog) => {

try {

const docRef = await addDoc(collection(db, 'dogs'), dog);

set((state) => ({

dogs: [...state.dogs, { id: docRef.id, ...dog }]

}));

} catch (error) {

console.error('Failed to add dog:', error);

throw error;

}

},

}));

```