Foster Dog Tracker

A React application for managing foster dog records. The app allows users to add dogs, store detailed information such as breed and intake date, upload photos, filter dogs by size, and persist data using localStorage.

Technologies Used: React, JavaScript, CSS, localStorage, Git, GitHub

Key Features

  • Add new foster dogs with detailed information

  • Display dogs using reusable React components

  • Filter dogs by size (Small, Medium, Large)

  • Persist data using localStorage

  • Delete dog entries dynamically

  • Display dog photos within card-based UI

Architecture

The application follows a component-based architecture using React.

App.jsx

  • Serves as the main container

  • Manages global state for the list of dogs using `useState`

  • Handles core logic such as adding, deleting, and filtering dogs

  • Persists data using `useEffect` and the browser's localStorage API

Dogform.jsx

  • Controlled form component for adding new dogs

  • Receives state and setter functions as props from App

  • Handles user input for all dog attributes (name, breed, age, size, intake date, notes, photo)

DogCard.jsx

  • Reusable presentational component

  • Displays individual dog information in a card layout

  • Receives data via props and renders UI accordingly

  • Handles delete actions through callback functions passed from App

Challenges & Solutions

  • Fixed missing UI data in components by properly passing props from parent to child components, improving data flow and rendering accuracy.

  • Stabilized form behavior using controlled components, ensuring reliable state synchronization and consistent user input handling.

What I learned

  • Managing application state using `useState`

  • Using `useEffect` to persist data with localStorage

  • Designing reusable components for scalability and maintainability

  • Passing data between components using props

  • Rendering dynamic lists using `Array.map()`

  • Building controlled forms for user input

  • Debugging React applications using the browser console

Future Improvements

  • Add edit functionality to update existing dog records

  • Implement image upload instead of using external URLs

  • Add a statistics dashboard such as total dogs fostered or size breakdown

  • Sort dogs by intake date or name

  • Add search functionality for filtering by name or breed

  • Improve UI/UX with animations and responsive design enhancements

  • Deploy the application and integrate a backend for persistent storage

Links

Github