Pet World

Pet World isn't just another photo sharing app; it’s a global digital sanctuary built on the only universal language left, " The pure love of animals".

Comment

Inspiration:

In a world where division and tension often overshadow the simple joys of life, I wanted to build something that reminds people of what brings us together rather than what pulls us apart. One of the most universal sources of joy, comfort, and shared emotion is pet. Pets don’t care about race, background, religion, or status — their love is unconditional. And when people share stories of their pets—funny moments, emotional memories, celebrations of their lives—it creates an instant bond. This inspired me to create PetWorld: A web application that connects people around the world through shared pet memories, cute photos, lost-pet tributes, and friendly pet competitions.

What it does:

Core Features Upload pet images & stories Memorial posts for lost pets Cute/funny moments gallery Community-driven "Cutest Pet" competition with upvotes

How it was built

Frontend Built using React + Vite Styled with TailwindCSS for speed and consistency Component-based architecture for scalability Real-time updates on posts & competitions using Supabase's onSnapshot/realtime API

Backend / Database Supabase for: Authentication Storage buckets for images Database (PostgreSQL) Real-time features Database tables include: users pets posts (photos, memories, moments) competitions votes

Challenges I Faced

  1. Vite Server Issues Setting up Vite gave me serious headaches, especially: Incorrect path resolution Hot-reload breaking unexpectedly Network errors when loading modules Some errors felt like: $$Vite + Lucide Icons = ERR_NETWORK_CHANGED$$ But troubleshooting taught me: How to clear Vite cache How to fix module resolution paths How to restart dev servers cleanly

2. Supabase RLS (Row-Level Security): This was one of the most difficult aspects. My problems included: “Permission denied for table” errors Incorrect policies blocking uploads Policies that worked in SQL editor but failed in the app Balancing strict safety vs. user functionality I had to learn to write proper RLS rules like: CREATE POLICY "Allow user insert" ON posts FOR INSERT WITH CHECK (auth.uid() = user_id);

3. Storage Bucket Complications: Uploads were failing due to wrong storage permissions Image URLs not loading because of signed policies Public vs. private bucket confusion MIME-type issues when uploading images I eventually learned: How Supabase storage security works How to generate signed URLs How to allow safe public viewing without exposing everythin

##Accomplishments that we're proud of: Structuring a full-stack project and integrating real-time updates

What I learned

Throughout the project, I improved significantly in: Building modern web apps with Vite + React + TypeScript Managing databases, authentication, and file storage with Supabase Handling Role-Level Security (RLS) rules safely and correctly Designing UI that is both visually pleasing and emotionally engaging

What's next for Pet World

To make PetWorld even smarter and more impactful, I would integrate:

  1. AI-Powered Pet Caption Generator Users can upload a pet photo and get: Funny captions Emotional tribute-style captions Personalized descriptions of their pet

2. AI Moderation System Automatically detect: Harmful content Inappropriate images This keeps the community safe and unified.

3. AI Compassion Bot A small emotional-support bot that responds with comforting messages when someone posts about a lost pet. These AI features would add emotional depth, personalization, and safety to the platform.

Conclusion PetWorld is more than an app — it’s a space where humanity connects through love, care, and shared emotion. Building it taught me patience, creativity, technical discipline, and the power of community. If given more time, deeper AI integration would make it even more magical.

Built With

  • lucide-react
  • supabase
  • tailwindcss
  • typescript
  • vite+react
Share this project:

Updates