PetPal: About the Project

Inspiration

As a passionate pet owner, I wanted to create a tool that makes pet care effortless and delightful. The booming pet care industry—$147 billion in the U.S. in 2023 (APPA)—inspired me to build an AI-powered solution for pet owners to manage their pets’ health and happiness. A stunning pet care website design on Behance (Pet Care Website Design) caught my eye with its vibrant orange-blue palette and clean, modern layout. This drove me to develop PetPal, a user-friendly app for the World’s Largest Hackathon, blending emotional appeal with cutting-edge design.

What it does

PetPal is a mobile-first web app that empowers pet owners to care for their pets with AI-driven insights and a stunning interface. Users can:

• Create Pet Profiles: Input details like name, breed, and health conditions.
• Receive AI Care Tips: Get personalized daily advice (e.g., diet, exercise) powered by Bolt.new’s AI.
• Track Health: Log symptoms and weight, with AI suggestions for vet visits.
• Find Vets: Access a mock list of nearby veterinarians.
• Set Reminders: Schedule care tasks and earn “Paw Points” for completion, gamifying the experience. A vibrant landing page welcomes users, showcasing features with rounded cards and a pet-friendly aesthetic, followed by an email-based login for personalized data storage.

How we built it

PetPal was crafted entirely with Bolt.new, leveraging its no-code vibe coding to transform natural language prompts into a functional app. The process included:

• Core Functionality: Built screens (Landing, Login, Home, Pet Profile, Care Tips, Health Tracker, Vet Finder, Reminders) using Bolt.new’s AI to generate personalized tips and manage user interactions.
• UI Design: Adopted a Behance-inspired palette (rich orange #F28C38, soft blue #4A90E2, clean white #FFFFFF) with rounded cards (border-radius: 12px) for a modern, sophisticated look. Added animations (confetti, zoom-in pet images, wagging tails) for delight.
• Authentication: Implemented a lightweight email-based login system using localStorage to store user-specific data (profiles, logs, points), ensuring data separation.
• Landing Page: Designed a welcoming page with a high-resolution pet image, bold Poppins typography, and feature cards, directing users to the Login Screen.
• Navigation: Added a bottom navigation bar (soft blue #4A90E2) and top-scrolling transitions (window.scrollTo(0, 0)) for seamless UX.
• Deployment: Deployed to a public URL via Bolt.new, including the “Built with Bolt.new” badge linking to https://bolt.new.

Challenges we ran into

• Supabase Integration Issues: Integrating Supabase for database and Google OAuth authentication hit roadblocks due to connection issues and setup complexity in Bolt.new, forcing a pivot to localStorage to meet the deadline.

Accomplishments that we're proud of

• Stunning UI: Crafted a Behance-inspired, vibrant interface with rounded cards and a cohesive orange-blue palette, earning PetPal a premium, user-friendly feel.
• Functional MVP: Delivered a fully functional app with AI-driven features and gamified elements (Paw Points) in days, showcasing Bolt.new’s power.
• User-Centric Design: Achieved a seamless UX with top-scrolling transitions and intuitive navigation, enhancing accessibility and engagement.
• Hackathon Alignment: Successfully targeted the Most Beautiful UI prize while meeting all requirements, including the Bolt.new badge.
• Community Engagement: Shared progress on X (#WorldsLargestHackathon), gaining feedback and boosting visibility for the Top Build-in-Public Journey prize.

What we learned

• No-Code Development: Mastered Bolt.new’s vibe coding to build a complex app without traditional coding.
• Modern UI/UX: Learned to apply 2025 design trends (rounded cards, vibrant palettes) to create a sophisticated, pet-centric interface.
• Rapid Prototyping: Discovered the importance of prioritizing high-impact features under tight deadlines.
• Community Value: Building in public on X taught me how to leverage feedback for iterative improvements.

What's next for PetPal

PetPal has the potential to become a leading pet care app. Next steps include:

• Database Integration: Transition from localStorage to Supabase for scalable, cloud-based data storage and cross-device persistence.
• Advanced Authentication: Add Google OAuth for seamless, secure logins, enhancing user experience.
• Expanded Features: Integrate real-time vet directories, wearable device syncing for health tracking, and voice-guided tips via ElevenLabs.
• Mobile App: Develop native iOS/Android apps to reach a broader audience.
• Monetization: Explore subscription models (e.g., premium care plans) and partnerships with pet brands to drive growth.

PetPal is a love letter to pets and their owners, blending AI innovation with a beautiful UI. I’m thrilled to share it with the #WorldsLargestHackathon community!

Built With

• bolt.new
• netlify
• react
• tailwindcss