Project Overview

PawHaven is a fully responsive, multi-page pet care booking web application built using React and Tailwind CSS.
The platform allows users to explore pet services, book appointments, contact the pet care center, and navigate seamlessly between pages without reloading.
It includes a dynamic booking system, form validation, toast notifications, responsive navigation, and a modern UI design.

Screenshots

Key Features

• Multi-page Single Page Application (Home, Services, About, Booking, Contact)
• Appointment booking with pre-selected service
• Contact form with validation
• Custom toast notification system
• Fully responsive design (Mobile and Desktop)
• Mobile hamburger navigation menu
• Modern UI built with Tailwind CSS
• Dynamic page switching without React Router
• Form validation using custom logic
• Business information and emergency contact section
• Sticky navigation with scroll effect
• Clean and reusable component structure

Functionality

• Navigation System
  • Uses React state (page) to control component rendering
  • Smooth scroll reset on page change
  • Mobile-responsive navigation with toggle menu
• Booking System
  • Users can select a service
  • Pre-selected service is passed via state
  • Confirmation message is displayed using toast notification
  • Appointment details are dynamically shown
• Contact Form
• Fields:
  • Name
  • Email
  • Phone
  • Subject
  • Message
• Validation:
  • Name is required
  • A valid email format is required
  • A message is required
• Additional Behavior:
  • Error messages appear below input fields
  • Success toast appears after submission
  • Form automatically resets after successful submission
• Toast Notification System
  • Global toast state managed in App component
  • Displays success messages
  • Includes auto-close functionality
• UI Enhancements
  • Sticky navigation bar on scroll
  • Smooth hover transitions
  • Google Fonts integration
  • Custom CSS animations
  • Fully mobile-friendly layout

Technology Used

• React (useState, useEffect)
• Tailwind CSS
• JavaScript (ES6+)
• HTML5
• Custom CSS animations
• Custom Toast Component System

Why This Project Is Useful

• Helps pet owners easily book grooming, veterinary, and other services
• Provides quick emergency contact access
• Improves customer communication through a structured contact form
• Demonstrates a real-world business website structure
• Showcases strong frontend development skills
• Can be upgraded into a full-stack production system
• This project simulates a commercial booking platform rather than being only a UI design demonstration

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.