Adopt A Dog

• 

  Adopt A Dog is a webapp that gives all pet lovers the best chance to find their dream dog

Inspiration

According to the Toronto Animal Services (TAS), the number of pets in Toronto pet shelters has risen by 75% this year compared to last year (Wilson, 2022). As dog enthusiasts ourselves, it is quite difficult to select a breed to adopt because there are countless to choose from. Therefore, we created Adopt A Dog, a webpage that allows users to select the perfect canine to become their new fuzzy best friend!

Source: link

What it does

Adopt A Dog scours the database from Dog.ceo link to display up to one hundred random images of dogs to encourage pet lovers to adopt a certain breed. Users are able to "like" and "dislike" each photo and with each selection, Adopt A Dog will store this information and dynamically recommend photos based on the user's preference. Each dog photo will contain the specific breed of that dog. For example, if a user likes a certain photo, that certain breed of dog will be more likely to show up in consecutive photos and vice versa. After the user has judged at least ten dogs, Adopt A Dog will generate a report of all photos that the user liked, the breed of each dog, and its like to dislike ratio. This information encourages the user to adopt their most liked breed, with links to pet shelters provided by the website.

How we built it

To give us maximum flexibility and customizability we used Webpack as the bundler for our project. The majority of our actual code base was built using React. For the UI, we used MaterialUI to speed up our design process. Furthermore, we also used REST APIs to fetch dog images that we can display to users. Lastly, for the rendering/routing we wanted to try out and learn client-side rendering/routing and we used React Router for this.

Challenges we ran into

Overall, the entire project was a challenge as the majority of our team had little to no experience with React. Furthermore, the only person who had previously worked with React had never worked with either React Router or MaterialUI.

In terms of specific challenges, one challenge we faced was determining how we could determine which breed was the most suitable pick for the user. Since the dataset we used had more than a hundred breeds of dogs, we had to keep a tally of each breed that the user preferred, and ultimately recommend them a breed to adopt based on their decisions.

Also, one factor that we had to consider was recommending different breeds of dogs to the user depending on their choices. For example, if the user disliked one breed, it would be counter-intuitive to continue recommending those breeds to them. The same logic applies to those who liked certain breeds as they are more likely to show up in the next images they selected. In the end, we developed a custom probability model to suggest certain types of breeds for the user depending on their dog preferences to enhance the user experience.

Accomplishments that we're proud of

We successfully displayed a summary page that included the photo of each dog that the user liked, the dog's breed, and its "like" percentage.

We created a responsive user interface that utilized REST API calls to fetch images from an external source and implemented it into our application using new technologies and frameworks of React and MaterialUI.

We successfully implemented Client Side Routing (CSR) with React Router which allows users to navigate through our webpage without any issues.

What we learned

Since all members of the group were novices at using React, MaterialUI and React Router, this was a huge leap in terms of learning these frameworks and technologies. The fact that we were able to utilize API calling and storing that information was also a new and challenging experience for all. Learning how to design an aesthetically pleasing and responsive website with MaterialUI and React Router (with Client Side Routing and Rendering) was crucial in allowing the user to smoothly interact with our application and effectively displaying the processed information based on the user's preferences.

What's next for Adopt A Dog

• Implement a DataBase to store user preferences

• Develop a Mobile App version with React Native

• Develop AI Algorithms/Model to give users the best recommendations

• Link to a Map API to locate the nearest animal shelter to promote animal adoption

• Link to PetFinder API to give users the best chance to find their preferred breed of dog

• Utilize user information to show relevant facts depending on the most liked breed of dog

• Increase the number of stats for each dog, e.g. the cost to adopt and raise each breed

• Improve the aesthetics of the website

Built With

• materialui
• react
• react-router
• restapis
• webpack