Guidelines for developing the React/TypeScript/Firebase dog breeding management application. Covers architecture, state management, Firebase integration, and deployment workflows.
Expert guidance for developing and maintaining the Breeder Management App — a comprehensive dog breeding management application built with React, TypeScript, Vite, and Firebase.
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.
```
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)
```
Start the development server:
```bash
npm run dev
```
**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**:
```tsx
import create from 'zustand';
const useStore = create((set) => ({
dogs: [],
addDog: (dog) => set((state) => ({ dogs: [...state.dogs, dog] })),
}));
export default useStore;
```
**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
}
```
```tsx
// src/types/dog.ts
export interface Dog {
id: string;
name: string;
breed: string;
birthDate: Date;
}
```
```tsx
<div className="flex items-center justify-between p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">
{/* Content */}
</div>
```
**Development build**:
```bash
npm run build:dev
```
**Production build**:
```bash
npm run build:prod
```
**Deploy to development**:
```bash
npm run deploy:dev
```
**Deploy to production**:
```bash
npm run deploy:prod
```
Migrate data between Firebase environments:
```bash
npm run migrate
```
**Prerequisites**:
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
```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>
);
};
```
```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;
}
},
}));
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/breeder-management-app-development/raw