Inspiration
PetPals sprang from my love for pets and their ability to ease stress. I envisioned a platform blending pet adoption with mindfulness tools, helping users find furry friends and inner peace.
What it does
PetPals is a web app that lets users browse adoptable pets, submit detailed adoption applications, and access pet-inspired wellness tips. It fosters emotional connections through pet quotes and promotes mental wellness with mindfulness strategies.
How we built it
PetPals is a React-based app with:
Frontend: React with TypeScript, Framer Motion for animations, Tailwind CSS for styling. Authentication: Supabase for secure user login and management. Prompting: Bolt.ai to design intuitive UI and content. Features: Pet browsing on DashboardPage, adoption forms on PetDetailPage, and wellness tips on TipsPage with pet quotes. I designed wireframes, built pages, and used Bolt for UX ideas and Supabase for auth, creating a calming pink-to-purple interface.
Challenges we ran into
Supabase Auth: Setting up secured login was complex; Supabase docs helped fix session issues. Feature Balance: Combining adoption and mindfulness without clutter was tough. Bolt refined the flow. Responsive Design: Ensuring pet grids worked on all devices required Tailwind tweaks. Content Creation: Crafting pet-themed tips was hard; Bolt aided engaging quotes.
Accomplishments that we're proud of
Built a seamless React app with Supabase authentication. Designed an intuitive adoption form with fields like name, phone, and age. Created a TipsPage with pet-inspired mindfulness content. Used Bolt to craft a user-friendly, engaging UX. Achieved a cohesive, calming design with animations.
What we learned
React: Mastered hooks, TypeScript, and state management. Supabase: Learned secure authentication and session handling. Bolt: Used prompting to brainstorm and refine features. Design: Prioritized accessibility and user engagement. Resilience: Solved technical and creative challenges
What's next for Petpals
Add pet meet-and-greet scheduling for adoption realism. Expand mindfulness features with interactive exercises. Integrate user feedback for personalized tips. Enhance Supabase for user profiles and adoption tracking. Use Bolt to explore gamification, like wellness challenges.
Built With
- bolt
- netlify
- react
- supabase
- tailwindcss
Log in or sign up for Devpost to join the conversation.