Markdown Converter
Agent skill for markdown-converter
Welcome to the Breeder Management App codebase! This document provides essential guidelines for AI coding agents to be productive and aligned with the project's architecture, workflows, and conventions.
Sign in to like and favorite skills
Welcome to the Breeder Management App codebase! This document provides essential guidelines for AI coding agents to be productive and aligned with the project's architecture, workflows, and conventions.
The Breeder Management App is a comprehensive dog breeding management application built with React, TypeScript, Vite, and Firebase. It includes features like dog and litter management, customer CRM, health tracking, and more. The app uses Firebase for backend services (Authentication, Firestore, Storage) and Zustand for state management.
src/components/: Reusable React components (e.g., dialogs, forms, charts).src/pages/: Page-level components for routing.src/lib/: Utility functions and Firebase configuration.src/store/: Zustand-based state management.src/types/: TypeScript type definitions.src/data/: Static data (e.g., dog breeds).Start the development server:
npm run dev
This runs the app at
http://localhost:5173 using the development Firebase project.
Build for development:
npm run build:dev
Build for production:
npm run build:prod
Deploy to development:
npm run deploy:dev
Deploys to
https://expert-breeder-dev.web.app.
Deploy to production:
npm run deploy:prod
Deploys to
https://expert-breeder.web.app.
Ensurenpm run migrate
serviceAccountKey-dev.json and serviceAccountKey-prod.json are correctly configured in the scripts/ directory.src/store/.src/components/. Use ui/ for low-level UI components.src/types/.src/lib/firebase.ts for Firebase configuration and utilities.Dialog components (e.g.,
AddCustomerDialog.tsx, DeleteDogDialog.tsx) follow a consistent pattern:
Use
useState or Zustand for state management.
Include form validation using
react-hook-form.
Example:
import { useForm } from 'react-hook-form'; const AddCustomerDialog = () => { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name')} placeholder='Customer Name' /> <button type='submit'>Add</button> </form> ); };
Firebase utilities are centralized in
src/lib/firebase.ts. Always import from this file to ensure consistent configuration.
State management uses Zustand. Example:
import create from 'zustand'; const useStore = create((set) => ({ dogs: [], addDog: (dog) => set((state) => ({ dogs: [...state.dogs, dog] })), })); export default useStore;
.env files.For further details, refer to the README.md and other documentation files in the repository.