An educational website for young pet owners to learn about pet diets, health, and behaviors. Built as a collaborative project by a team of UCSD students.

Pet Hub provides kid-friendly, interactive content about cats and dogs — covering anatomy, personalities, breeds, diet, health, and behavior. It also features a local adoption section with real pets available from San Diego-area shelters.

• Interactive Anatomy — Clickable diagrams let users explore labeled body parts with descriptions
• Info Modals — Expandable sections covering personalities, breeds, diet, health, and behavior for each animal
• Light/Dark Mode — Theme switcher available on every page
• Adoption Links — Real shelter pets with direct links to their San Diego Humane Society profiles
• Local Shelter Info — Hours, addresses, and phone numbers for nearby shelters

• Next.js 15 (App Router)
• React 19
• CSS Modules (per-page stylesheets)
• Deployed on Vercel

npm install
npm run dev

Open http://localhost:3000 in your browser.

npm run build    # Production build
npm run start    # Start production server
npm run lint     # Run ESLint

app/
├── page.js              # Home page
├── layout.js            # Root layout
├── stylesHome.css
├── about/
│   └── page.js          # About page
├── pets/
│   ├── page.js          # Nearby pets & shelters
│   ├── stylesPets.css
│   ├── cats/
│   │   └── page.js      # Cat care guide
│   └── dogs/
│       └── page.js      # Dog care guide
└── ui/
    ├── nav.js            # Navigation bar
    ├── footer.js         # Footer
    ├── themeSwitcher.js  # Light/dark toggle
    ├── infoModal.js      # Expandable info sections
    └── interactiveAnatomy.js  # Clickable anatomy diagram
public/                  # Static images

Built by students at the University of California, San Diego.

Figma prototype: View on Figma