# Trusty Paws

## Inspiration

We believe that every pet deserves to find a home. Animal shelters have often had to euthanize animals due to capacity issues and lack of adoptions. Our objective with Trusty Paws is to increase the rate of adoptions of these animals by increasing the exposure of shelters to potential pet owners as well as to provide an accessible platform for users to browse and adopt their next best friend.
Trusty Paws also aims to be an online hub for all things related to your pet, from offering an online marketplace for pet products to finding a vet near you.

## What it does

Our vision for Trusty Paws is to create a platform that brings together all the players that contribute to the health and happiness of our pawed friends, while allowing users to support local businesses. Each user, shelter, seller, and veterinarian contributes to a different aspect of Trusty Paws.

**Users**:
Users are your everyday users who own pets or are looking to adopt pets. They will be able to access the marketplace to buy items for their pets, browse through each shelter's pet profiles to fill out adoption requests, and find the nearest pet clinic.

**Shelters**:
Shelters accounts will be able to create pet profiles for each of their animals that are up for adoption! Each pet will have its own profile that can be customized with pictures and other fields providing further information on them. The shelter receives an adoption request form each time an user applies to adopt one of their pets.

**Sellers**:
Sellers will be able to set up stores showing all of their product listings, which include, but are not limited to, food, toys, accessories, and many other. Our marketplace will provide the opportunity for local businesses that have been affected by Covid-19 to reach their target audience while abiding by health and safety guidelines. For users, it will be a convenient way to satisfy all the needs of their pet in one place. Finally, our search bar will allow users to search for specific items for a quick and efficient shopping experience.

**Veterinarians**:
Veterinarians will be able to set up a profile for their clinic, with all the pertinent information such as their opening hours, services provided, and location.

## How we built it

For the front-end, React., Bootstrap and Materialized CSS were used to acquire the visual effects of the current website. In fact, the very first step we undertook was to draft an initial prototype of the product on Figma to ensure all the requirements and required features were met. After a few iterations of redesigning, we each dove into developing the necessary individual components, forms, and pages for the website. Once all components were completed, the next step was to route pages together in order to achieve a seamless navigation of the website.

We used Firebase within Node.Js to implement a framwork for the back-end. Using Firebase, we implemented a NoSQL database using Cloud Firestore. Data for users (all types), pets, products, and adoption forms along with their respective fields were stored as documents in their respective collections.

Finally, we used Google's Distance Matrix API to compute distances between two addresses and find the nearest services when necessary, such as the closest vet clinics or the closest shelters.

## Challenges we ran into

Although we were successful at accomplishing the major features of the website, we encountered many challenges throughout the weekend. As we started working on Trusty Paws, we realized that the initial implementation was not as user-friendly as we wanted it to be. We then decided to take a step back and to return to the initial design phase. Another challenge we ran into was that most of the team was unfamiliar with the development tools necessary for this project, such as Firebase, Node.Js, bootstrap, and redux.

## Accomplishments that we're proud of

We are proud that our team learned so much over the course of a few days.

## What's next for Trusty Paws

We want to keep improving our users' experience by optimizing the current features. We also want to improve the design and user friendliness of the interface.
## Inspiration

Virtually every classroom has a projector, whiteboard, and sticky notes. With OpenCV and Python being more accessible than ever, we wanted to create an augmented reality entertainment platform that any enthusiast could learn from and bring to their own place of learning. StickyAR is just that, with a super simple interface that can anyone can use to produce any tile-based Numpy game. Our first offering is *StickyJump* , a 2D platformer whose layout can be changed on the fly by placement of sticky notes. We want to demystify computer science in the classroom, and letting students come face to face with what's possible is a task we were happy to take on.

## What it does

StickyAR works by using OpenCV's Contour Recognition software to recognize the borders of a projector image and the position of human placed sticky notes. We then use a matrix transformation scheme to ensure that the positioning of the sticky notes align with the projector image so that our character can appear as if he is standing on top of the sticky notes. We then have code for a simple platformer that uses the sticky notes as the platforms our character runs, jumps, and interacts with!

## How we built it

We split our team of four into two sections, one half that works on developing the OpenCV/Data Transfer part of the project and the other half who work on the game side of the project. It was truly a team effort.

## Challenges we ran into

The biggest challenges we ran into were that a lot of our group members are not programmers by major. We also had a major disaster with Git that almost killed half of our project. Luckily we had some very gracious mentors come out and help us get things sorted out! We also first attempted to the game half of the project in unity which ended up being too much of a beast to handle.

## Accomplishments that we're proud of

That we got it done! It was pretty amazing to see the little square pop up on the screen for the first time on top of the spawning block. As we think more deeply about the project, we're also excited about how extensible the platform is for future games and types of computer vision features.

## What we learned

A whole ton about python, OpenCV, and how much we regret spending half our time working with Unity. Python's general inheritance structure came very much in handy, and its networking abilities were key for us when Unity was still on the table. Our decision to switch over completely to Python for both OpenCV and the game engine felt like a loss of a lot of our work at the time, but we're very happy with the end-product.

## What's next for StickyAR

StickyAR was designed to be as extensible as possible, so any future game that has colored tiles as elements can take advantage of the computer vision interface we produced. We've already thought through the next game we want to make - *StickyJam*. It will be a music creation app that sends a line across the screen and produces notes when it strikes the sticky notes, allowing the player to vary their rhythm by placement and color.
## 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](https://toronto.ctvnews.ca/pets-surrendered-to-toronto-shelters-up-75-per-cent-from-last-year-due-to-return-to-office-rising-costs-1.5974531)

## What it does

Adopt A Dog scours the database from Dog.ceo [link](https://dog.ceo/dog-api/about) 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