There has been an increase in animal adoptions during the pandemic due to social isolation and loneliness. But once the quarantine is over, this platform is created to help people who were not able to get themselves a pet during that time. This is to support people reentering back into society from isolation and to also aid in their mental health from the long-term isolation. Helping people + adopting dogs = two birds with one stone.

What it does

Upon entering the website, it provides a welcoming introduction to the platform. As the user scrolls, they will see success stories from using puppr. When clicking to sign up, an alert pops up to notify the user of the rules to use the platform. After continuing, it leads to the profile creation page, where the user will fill in their information and dog preferences, which is used to match with dogs from shelters on the next page. The dogs that the user matches with will be provided a link to the dog's profile page on the shelter website.

How we built it

Using HTML, CSS, and Javascript, the front-end was created for all the pages. The backend consists of python to web scrap the shelter and the information given from the shelter on the dog and stored in firebase, where the user's profile information is also stored. Figma was used to create a design of the website.

For the back-end, we built an API using Flask to gather information from animal shelters. We deployed our Flask app to Google App Engine. The backend data that is scrapped from the animal shelter website and is then displayed below the dog's photos. The backend allows for the user's preferences to be compared with the dog's information, and then from there, the platform shows you the dogs that match the user's inputted information.

If matched, the user can click on the dog's photo and it will link them to the shelter's webpage with the dog's profile.

Challenges we ran into

We initially had issues deploying our Flask app, but resolved the issue by re-configuring our web service files. For front-end, the implementation of our API to Javascript gave us latency issues and would sometimes cause one file to work but not others.

Other than that, working virtually from home was definitely the hardest aspect, where we had to use Git to get each other's code and understand what we are doing individually.

What we Learned

We learned how to build and deploy a Flask app to Google App Engine, but it was complicated to integrate that into our code. Putting a strong emphasis on the design and front-end of this project shows how essential it is to have for a website to look and work like a professional one.

Domain registered with

We registered a domain:

Accomplishments that we're proud of

We built a professional-looking website that gathers data from real shelters, and we as well built an API that can be used in future projects. It taught us a lot during the experience that we've never done before. Before making this project, we haven't made a website that contained a database before. By learning during the process how to implement that gave us challenges but ultimately informed us more on how to start professionally creating a website.

Share this project: