PetBound - Animal Adoption Platform

Connecting shelter animals with loving forever homes

Note: This website is currently inactive and no longer deployed.

📋 Overview

PetBound is a full-stack web application designed to streamline the pet adoption process by connecting prospective adopters with animals from shelters across the country. Created with a mission to save lives and create lasting bonds between pets and families, PetBound provides a centralized platform for searching, discovering, and adopting shelter animals.

Key Features

• 🔍 Advanced Search: Browse hundreds of adoptable pets with filtering by species, breed, age, size, and location
• 🏠 Shelter Partnerships: Integration with vetted animal shelters nationwide
• 📱 Responsive Design: Seamless experience across desktop, tablet, and mobile devices
• 👤 User Authentication: Secure account management with Clerk authentication
• 🗺️ Location-Based Search: Find animals near you using geolocation features
• ⭐ Saved Favorites: Save and track animals you're interested in
• 📊 Shelter Dashboard: Comprehensive tools for shelters to manage their animal listings
• 🖼️ Image Management: Upload and manage pet photos with UploadThing integration
• 🎨 Modern UI: Clean, accessible interface built with Radix UI components

🛠️ Technology Stack

Frontend

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI, shadcn/ui
• Icons: Lucide React, Font Awesome
• State Management: React Server Components

Backend

• Database: PostgreSQL with Vercel Postgres
• ORM: Drizzle ORM
• Authentication: Clerk
• File Upload: UploadThing
• API: Next.js API Routes & Server Actions

Infrastructure & DevOps

• Deployment: Vercel
• Rate Limiting: Upstash Redis
• Development Tools: ESLint, Storybook
• Type Safety: TypeScript, Zod validation

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn
• PostgreSQL database
• Clerk account for authentication
• UploadThing account for image uploads

Installation

1. Clone the repository

   git clone https://github.com/yourusername/petbound.git
   cd petbound

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Database
   POSTGRES_URL=your_postgres_url
   POSTGRES_PRISMA_URL=your_postgres_prisma_url
   POSTGRES_URL_NON_POOLING=your_postgres_url_non_pooling
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   
   # UploadThing
   UPLOADTHING_SECRET=your_uploadthing_secret
   UPLOADTHING_APP_ID=your_uploadthing_app_id
   
   # Upstash Redis
   UPSTASH_REDIS_REST_URL=your_upstash_redis_url
   UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token

4. Run database migrations

   npm run db:push

5. Start the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000

📁 Project Structure

PetBound/
├── app/                          # Next.js App Router
│   ├── (storefront)/            # Public-facing adoption pages
│   ├── shelter/                 # Shelter management dashboard
│   ├── auth/                    # Authentication pages
│   └── api/                     # API routes
├── components/                   # Reusable React components
│   ├── storefront/              # Public components
│   ├── admin/                   # Admin dashboard components
│   └── ui/                      # Base UI components
├── db/                          # Database configuration
│   ├── schema.ts                # Drizzle schema definitions
│   └── db.ts                    # Database connection
├── lib/                         # Utility functions and constants
├── server-actions/              # Next.js Server Actions
├── styles/                      # Global styles
└── public/                      # Static assets

💻 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run storybook - Launch Storybook component explorer

Database Management

This project uses Drizzle ORM for type-safe database operations. The schema includes:

• Stores (Shelters): Animal shelter information with location data
• Products (Animals): Adoptable animals with detailed attributes
  • Species, breed, age, gender, size
  • Images and descriptions
  • Euthanization risk tracking
  • Active/inactive status

🎯 Key Features in Detail

For Adopters

• Search and filter through extensive animal listings
• View detailed animal profiles with photos and descriptions
• Save favorite animals for later review
• Contact shelters directly through the platform
• Location-based search to find nearby animals

For Shelters

• Dedicated dashboard for managing animal listings
• Upload and manage animal photos
• Track adoption status
• Update animal information in real-time
• Manage shelter profile and contact information

🔒 Security & Performance

• Server-side rendering for improved SEO and performance
• Rate limiting with Upstash Redis to prevent abuse
• Secure authentication with Clerk
• Type-safe database queries with Drizzle ORM
• Input validation with Zod schemas

👨‍💻 Developer Skills

This project demonstrates proficiency in:

• Modern full-stack web development with Next.js and TypeScript
• Database design and ORM implementation
• Authentication and authorization
• Responsive UI/UX design
• Third-party API integration
• Server-side rendering and optimization
• Component-driven development

🙏 Acknowledgments

• Thanks to all animal shelters working tirelessly to save lives
• Built with the goal of making pet adoption more accessible
• Inspired by the belief that rescued animals save their humans just as much as we save them

---

Made with ❤️ for animals in need