WarmPaws is a cozy, winter-themed Single Page Application (SPA) designed to help pet owners ensure their furry friends stay warm and healthy during the cold season. From professional winter grooming to custom coat fittings, WarmPaws provides a one-stop platform for all winter pet care needs.
WarmPaws focuses on a minimalist and modern design, providing a seamless user experience. The application allows users to explore various pet care services, book them via a secure portal, and manage their personal profiles. It is built using React and secured with Firebase Authentication, ensuring that pet data and bookings are handled safely.
- ❄️ Winter-Themed Hero Slider: A beautiful, responsive carousel using Swiper.js showcasing pets in winter outfits.
- 🐕 Dynamic Service Booking: Users can browse 6+ unique winter services (Clothing, Grooming, Treatments) and book them through a protected details page.
- 🔐 Secure Authentication: Complete login and signup system including Google Social Login and strict password validation (Uppercase, Lowercase, 6+ chars).
- 🛡️ Protected Routes: Service details and booking features are restricted to authenticated users, with a smooth redirect logic after login.
- 👤 Profile Management: Users can view their profile info and use the Update Profile feature to change their name and photo URL dynamically.
- 🔑 Password Recovery: A functional "Forgot Password" feature that pre-fills the email and redirects users to their Gmail for password resetting.
- 📱 Fully Responsive: Optimized for Mobile, Tablet, and Desktop views using Tailwind CSS and DaisyUI.
- ✨ Smooth Animations: Subtle and approachability-focused animations powered by the AOS (Animate On Scroll) package.
- React.js (Vite)
- Tailwind CSS & DaisyUI
- Firebase (Authentication & Hosting)
- React Router DOM (SPA Navigation)
- React Hot Toast (Notifications)
The following npm packages were essential in building this project:
firebase: For secure authentication and hosting.react-router-dom: For handling SPA routes without reload errors.swiper: For the winter-themed hero slider.aos: For implementing smooth scroll animations.react-hot-toast: For beautiful success and error notifications.react-icons: For the password toggle (eye icon) and social links.
Follow these steps to set up the project on your local machine:
1. Clone the repository:
git clone https://github.com/ALA22min22/Pet-Care-in-Winter-A-9.git
2. Navigate to the project directory:
cd WarmPaws-client
3. Install dependencies:
npm install
4. Set up Environment Variables:
Create a .env.local file in the root folder and add your Firebase configurations:
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_project.firebaseapp.com
VITE_projectId=your_project_id
VITE_storageBucket=your_project.appspot.com
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_id
5. Start the development server:
npm run dev
- Live Site: warmpaws-petcare.web.app
- React Docs: react.dev
- AOS Documentation: michalsnik.github.io/aos/
