Frontend Live URL: https://pet-link-client.vercel.app/
PetLink is a full-featured pet adoption platform where users can explore and adopt pets, start donation campaigns, manage pets, and perform other pet and donation-related activities. It aims to bridge the gap between pet givers and pet seekers through an easy-to-use, visually engaging platform.
This repository contains the frontend/client-side code for the PetLink platform.
- Beautiful, responsive design using TailwindCSS and Material Tailwind
- Authentication with Firebase (Email/Password + Social logins)
- JWT Authentication
- Role-based dashboard: Admin and User
- Infinite scroll for Pet and Donation listings
- Protected routes with JWT authentication
- Donation with Stripe Payment Integration
- Adoption request and donation refund system
- Modern editor support (TipTap)
- TanStack React Query for efficient data fetching
- Recharts for data visualization
- Fully responsive on all screen sizes
- Dark & Light theme toggle
- React 19
- Vite
- Tailwind CSS
- Material Tailwind
- Firebase Authentication
- React Router v7
- React Hook Form
- TanStack Query
- React Select
- React Day Picker
- Lucide React
- Swiper
- TipTap & Slate (WYSIWYG Editors)
- Axios
- Stripe (Payment Integration)
- React Hot Toast
- Recharts
- Logo, navigation, and profile dropdown
- Banner, pet categories, call-to-action, about us
- Custom sections related to adoption and donation
- Infinite scroll for pet cards
- Filter by name and category
- Adoption modal with user & pet info autofilled
- Sidebar + top navbar layout
- Role-based views and permissions
- Add/Update Pets with image upload
- Donation Campaign creation
- My Donations, My Pets, Adoption Requests
- Donation campaigns listing with infinite scroll
- Payment with Stripe modal
- Campaign editing, pausing, and donator lists
- Email/password + social login (e.g., Google)
- JWT tokens stored securely
- Firebase profile updates & role management
- View & manage all users, pets, and donations
- Make users admin
- Force update/delete records
- Firebase keys are securely stored in environment variables
- Responsive design for mobile/tablet/desktop
- All GET requests use TanStack Query
- Reusable UI with component-based structure
- Commit messages are meaningful and descriptive
- Client hosted on Vercel
- Ensure routes do not throw 404/CORS on reload
- Firebase auth domains configured for Vercel
- Private routes persist after reload (JWT validated)
@material-tailwind/react, @stripe/react-stripe-js, @stripe/stripe-js, @tanstack/react-query, @tanstack/react-table,
@tiptap/*, axios, date-fns, firebase, ldrs, lucide-react, react, react-countup,
react-day-picker, react-dom, react-hook-form, react-hot-toast, react-intersection-observer,
react-router, react-select, recharts, slate, swiper, tiptapDevDependencies include: eslint, tailwindcss, vite, postcss, autoprefixer, etc.
⚡ Built with love to connect pets to their forever families.
Follow these steps to run the PetLink project on your local machine.
- Node.js (v16 or higher recommended)
- npm or yarn
- Git
-
Clone the repository
git clone https://github.com/ArunRoy404/PetLink-Client.git cd petlink-Client -
Set up environment variables Create a .env file in the root directory and add the following variables with your own credentials:
VITE_apiKey=YOUR_FIREBASE_API_KEY VITE_authDomain=YOUR_FIREBASE_AUTH_DOMAIN VITE_projectId=YOUR_FIREBASE_PROJECT_ID VITE_storageBucket=YOUR_FIREBASE_STORAGE_BUCKET VITE_messagingSenderId=YOUR_FIREBASE_MESSAGING_SENDER_ID VITE_appId=YOUR_FIREBASE_APP_ID VITE_imgbb_apiKey=YOUR_IMGBB_API_KEY VITE_payment_key=YOUR_STRIPE_PUBLIC_KEYYou'll need to:
- Create a Firebase project at https://firebase.google.com/
- Get an ImgBB API key at https://imgbb.com/
- Set up Stripe at https://stripe.com/
-
Install dependencies
npm install # or yarn install -
Run The Development Server
npm run dev # or yarn dev -
Access the application Open your browser and visit: http://localhost:5173
