Inspiration

We were inspired by how easily apps like Tinder made it to find a partner online and wondered if making a webpage that allows finding shelter animals as easily would help boost the adoption rate.

What it does

Our webpage Pinder works like Tinder by allowing the user to swipe through the dogs and cats available for adoption on the website petfinder using profile cards for each animal. The user can like as many shelter animals as they want and they can match with them if the adoption agency believes their profile fits the animal's need. From there the adoption process is streamlined through our website to make adoption fun and simple.

How I built it

I built the website with Javascript (Typescript) with React, Redux, css and nextjs. I used Nextjs because server rendering is difficult to achieve in React especially when we are given only 24 hours to build a website. I use Redux because it is easier to manage state when there's a single source of truth of the state for the whole application. We uses the Petfinder api, which uses OAuth2. Whenever we hit a page that requires the petfinder API, we will send a request and get the bearer token, which will then be stored in the redux store and be used later. Images are all fully responsive with the use of srcset, sizes and media query with css. I created a design of the website through Adobe XD using the website dribbble.com for inspiration for website design, color palette, as well as a selection of art from artists online that we used in our website. The photos in our design come from the artist Sooodesign on dribbble. After creating the design for a section of the website I would forward the work I had done through slack and Adobe's share option to my teammate so he could code it.

Challenges I ran into

Lack of time and also we only have 2 team members, so we weren't able to allocate enough time to the backend of the website. Also since we started with the mobile design, we later found out that the tablet view and web view are not as optimized as we wanted. I wasn't very experienced using anything from adobe, so I spent several hours researching how to work Adobe XD and other adobe produce like Photoshop and Illustrator in case I needed to use them for the design.

Accomplishments that I'm proud of

We were able to build a functional website/ web application with only 2 team members. We also weren't exactly familiar with the tech stack we were using so it took us a while to learn from scratch at the beginning. One of the member doesn't have much experience in coding so a lot of the coding is done by one person.

What I learned

I learned how to use Adobe XD in order to model website, as well as how to create a website design, choose color palette, and keep the design consistent.

What's next for Pinder

For the design elements I hope to be able to complete all webpages the future site will use as well as complete all animations on Adobe XD in order to create a fully realized demo of the future site.

Share this project:

Updates