Petopia - Pet Wellness & Service Marketplace

Petopia is a pet wellness web app that helps guardians browse premium seasonal care services, vet visits, grooming sessions, accessories, and more. Users can authenticate with Firebase, explore curated service details, and book the right support for their companions.

- Live URL: https://petopia-pet-wellness.web.app/

• Tech stack: React 19, Vite 7, Tailwind CSS 4 (with DaisyUI), Firebase Authentication & Firestore-ready config.

---

Table of Contents

1. Purpose
2. Key Features
3. Architecture Overview
4. Packages & Tooling
5. Environment Variables
6. Getting Started
7. Available Scripts
8. Testing Checklist
9. Folder Structure
10. Roadmap Ideas

---

Purpose

Seasonal weather, grooming needs, and emergency vet visits can be overwhelming. Petopia centralizes trusted services, educates owners through rich descriptions, and offers authentication-gated features so every pet receives consistent care across devices.

---

Key Features

• Curated Service Catalog: 12+ winter-focused services sourced from public/data.json, surfaced on Home and Service pages with lazy-loaded cards.
• Service Detail View: Individual service pages (/services/:id) with protected routing, ensuring only authenticated users can see provider contacts, pricing, and booking CTA.
• Authentication Hub: Email/password registration plus Google and GitHub OAuth flows powered by Firebase. Context-based Auth provider exposes sign-in, profile updates, and logout.
• Profile Dashboard: Personalized profile screen showing the signed-in user’s metadata (display name, avatar, email) with room for future bookings/history.
• Responsive Experience: Tailwind + DaisyUI theming with utility-first components, a hero slider (Swiper), expert vet highlights, CTA sections, and custom Footer/Hero blocks.
• Toast Notifications: Consistent feedback for auth flows and errors using react-hot-toast.
• Client-side Routing: React Router v7 for nested layouts, protected routes, and loader-based data fetching.

---

Architecture Overview

• Routing: src/routes/Routes.jsx defines the Root layout, Auth layout, loaders for home/services, and a ProtectedRoute HOC to guard sensitive pages.
• State Management: Lightweight React Context (src/auth/AuthContext.jsx) with provider wrapping the entire router. Firebase’s onAuthStateChanged syncs auth state.
• Styling: Tailwind CSS 4 via the new @tailwindcss/vite plugin plus DaisyUI themes. Global styles live in src/index.css.
• Data Layer: Sample data served statically via Vite’s dev server (public/data.json); loaders fetch this file at runtime.
• Deployment: Configured for SPA hosting; _headers and _redirects.txt ensure correct COOP/COEP policies and history API fallback.

---

Packages & Tooling

Category	Packages
Core UI	react, react-dom, react-router
Styling	tailwindcss, @tailwindcss/vite, daisyui
UI Enhancements	react-icons, lucide-react, swiper
State/Auth	firebase
UX	react-hot-toast
Tooling	vite, @vitejs/plugin-react, eslint (+ React hooks/refresh plugins)

---

Environment Variables

Create .env.local with your Firebase credentials:

VITE_apiKey=your-key
VITE_authDomain=your-domain.firebaseapp.com
VITE_projectId=your-project-id
VITE_storageBucket=your-bucket.appspot.com
VITE_messagingSenderId=sender-id
VITE_appId=app-id
VITE_measurementId=G-xxxxxxx   # optional

---

Getting Started

# 1. Install dependencies
npm install

# 2. Add environment variables (.env.local)
# 3. Run dev server
npm run dev

Visit http://localhost:5173/.

For production builds:

npm run build
npm run preview    # optional smoke test locally

Deploy the contents of dist/ to your host (Firebase Hosting, Netlify, Vercel, etc.). Remember to include _headers and _redirects.txt for proper SPA behavior and popup auth compatibility.

---

Available Scripts

Script	Description
npm run dev	Start Vite dev server with HMR.
npm run build	Generate optimized production build.
npm run preview	Serve the build locally for QA.
npm run lint	Run ESLint with the project config.

---

Testing Checklist

• Authentication: email/password registration, login, logout.
• Social auth: Google popup, GitHub popup (requires enabling providers in Firebase console).
• Protected route redirect logic (try opening /services/:id while signed out).
• Responsive layout (mobile, tablet, desktop breakpoints).
• Toast notifications for success/error states.
• SPA navigation after deployment (no 404s when refreshing deep links).

---

Folder Structure (trimmed)

petopia/
|-- public/
|   |-- data.json           # service catalog
|   |-- petopia-logo.png
|   |-- _headers            # COOP/COEP for popup auth
|   |-- _redirects.txt      # SPA fallback rules
|-- src/
|   |-- auth/               # AuthContext, AuthProvider, ProtectedRoute
|   |-- components/         # HeroSlider, ServiceCard, ResetPassword, etc.
|   |-- config/firebase/    # Firebase initialization
|   |-- layouts/            # Root layout, Auth layout
|   |-- pages/              # Home, Service, Profile, Login, Register
|   |-- routes/             # Central router + loaders
|   |-- index.css
|   |-- main.jsx
|-- package.json
|-- vite.config.js
|-- README.md

---

Roadmap Ideas

1. Bookings API Integration: Connect to a backend to store confirmed appointments and display them on the profile page.
2. Service Filtering/Search: Allow users to filter by category, rating, budget, and availability.
3. User Reviews & Ratings: Enable authenticated users to leave service feedback.
4. In-app Notifications: Surface booking reminders and seasonal tips.
5. Accessibility Enhancements: Add better focus states, keyboard navigation, and ARIA labels for all interactive elements.

---

Built with love for pet parents who want stress-free wellness planning. Contributions, issues, and feature requests are welcome! Feel free to fork the project or open a pull request.