Purrfect – A Fun Pet Adoption Platform

What Inspired Me

The inspiration for Purrfect came from a mix of two key things: a love for animals and a desire to create something fun and engaging for users. During my participation in a hackathon, the theme was "animals," and I wanted to combine my technical skills with my passion for animals to create something playful and user-friendly. I thought about the popular Tinder-style swipe interactions that make it so addictive and fun, and I realized this would be a great way to help people find and adopt pets while keeping the process exciting and lighthearted.

What I Learned

This project taught me a lot about full-stack web development, from handling user authentication to managing user interactions and implementing real-time features like swiping and favorites. Some specific things I learned include:

JavaScript and DOM Manipulation: I learned how to implement smooth swipe interactions and manage user actions such as clicking, swiping, and interacting with elements dynamically.
PHP and MySQL: I developed a stronger understanding of PHP for handling backend processes like managing user logins, storing favorites, and retrieving pet data from the database.
Responsive Design and UX: I focused on creating a fun and user-friendly interface, which required experimenting with different CSS techniques to ensure the app was visually appealing on all screen sizes.
Security Practices: While simplifying the process (like hardcoding login credentials for demo purposes), I realized the importance of proper security measures when dealing with real-world applications.

How I Built the Project

Frontend (HTML, CSS, JavaScript)

I built the frontend using HTML, CSS, and JavaScript. Here’s a breakdown of the key features:

Swipe Interface: I implemented swipe functionality similar to Tinder, where users can swipe left to view the next pet and swipe right to save a pet to their favorites. The swipe effect is achieved using simple JavaScript, where I toggle the visibility of pet cards based on user clicks.
Favorites System: Users can click a heart icon to add pets to their favorites, which is stored locally for demo purposes. Each pet also has a dedicated "Adopt" button that links to the adoption page.
Pet Profiles: Each pet card displays essential information like the pet's name, breed, age, personality, and an image. Clicking on a pet card shows additional information about the pet.

Backend (PHP & MySQL)

The backend handles user authentication, storing and retrieving pet data, and managing favorites. I used PHP to handle the logic of logging in users, retrieving pets from the database, and updating favorite lists.

User Authentication: I built a simple login/signup system using PHP sessions, where users must be logged in to view pets, swipe, and add them to their favorites.
Pet Data Management: Pets are stored in a MySQL database with details like name, breed, age, personality, image, and adoption link. Users can add pets, but in this demo, I manually added them for simplicity.
Favorites Database: Each user’s favorites are stored in a separate table that associates pets with users, making it easy to retrieve and display only the logged-in user's saved pets.

Styling (CSS)

For the design, I focused on creating a playful and fun vibe using bold colors, clean layouts, and animations that make the user experience engaging.

Pet Cards: Each pet is displayed as a card with a clear image and personality traits. I used flexbox to ensure that the layout adjusts nicely on different screen sizes.
Button Styles: Buttons are styled with vibrant colors to match the overall theme and encourage interaction. The "Adopt" button has a subtle hover effect, making it feel responsive.
Grid Layout for Favorites: The favorite pets are displayed in a grid, with responsive columns that adjust to the screen size. Each card has a remove button, and the layout ensures the page doesn’t feel crowded.

Challenges I Faced

1. User Authentication and Session Management

Managing user authentication in PHP without a database was tricky, especially since I initially hardcoded login credentials for simplicity. I realized that even though this was fine for the demo, I’d need to implement a proper database-backed user system for any production-ready version. Handling sessions across multiple pages also required some careful management to ensure that the user stays logged in throughout their session.

2. Responsive Design

Creating a fun, playful, and responsive design proved to be a challenge. I had to make sure that the pet cards and the layout adjusted smoothly on different screen sizes while maintaining a user-friendly experience. Flexbox and media queries were essential in achieving the desired look on both desktop and mobile devices.

3. Database Integration

Integrating MySQL for storing pets and favorites added complexity to the project. I had to ensure that the pet data was structured correctly and could be dynamically added, removed, or updated based on user interactions. Furthermore, maintaining the relationship between users and their favorite pets required careful database design.

4. Image Handling

I originally planned to allow users to upload images directly, but since I switched to a solution where users input an image URL, I had to ensure that images scaled properly and fit within the design. I had to make sure that the images were displayed in a way that was consistent across different screen sizes without distorting the layout.

5. Working Alone

My teammates informed me that they couldn't make it last minute, so I had to manage everything by myself. This was quite difficult since I had to build an entire web application with not much experience.

What's next?

I intend to add several features, including APIs and web scrapers, to automatically populate the database with pets available for adoption. I also plan to collaborate with adoption shelters to obtain more accurate images and detailed information about each pet. Furthermore, I aim to introduce options for users to host fundraisers to cover expenses at animal clinics.

Conclusion

Overall, Purrfect was a fun and rewarding project that taught me a lot about web development and UX design. The process of combining playful elements with functional design was both challenging and exciting. Moving forward, I plan to continue improving the app, adding more features, and enhancing the user experience. I hope that Purrfect can make pet adoption a more interactive, enjoyable, and accessible experience for everyone!