/browse-a-pup

Unsure which doggo is right for you? Browse-a-pup in a 1v1 style game before you adopt!

Primary LanguageJavaScript

Browse-A-Pup

Overview

Browse-A-Pup is an application created with React for the final project of Module 3 of the FE program. This application is targeted towards an audience that is considering adopting a new dog. In the beginning stage of this decision, it can be difficult to understand which breeds are out there to consider. Browse-A-Pup allows a easy, stress-free way to browse doggos that warm your heart.

On the home page, the user is displayed with two different dogs. The user "keeps" which dog warms their heart and the opposite slot is replaced with a new pup. (The user only "keeps" the dog for the next round. No dogs seen in this application are available for adoption). If the user loves both dogs and has trouble deciding, the user can "love a dog". All loved dogs will appear on the loved dogs page. Stats from each round are recorded for each dog. Dogs with the most rounds won are sorted in the past dogs view.

Preview

Application

Mobile View

Mobile View

Deployment

View this application deployed on Heroku

Local Set Up

Clone this repo down, and cd into it.

Run npm install

Run npm start

Learning Goals

  1. Demonstrate knowledge gained over the course of Mod 3 of React, Router, AJAX Javascript, and End-to-End testing.
  2. Create personas and user stories to describe target audience (available on Github projects board).
  3. Display data from a third party API.
  4. Application deployment on Heroku.

Future Extensions

  • Add a function that highlights the most kept breeds in the past dogs view
  • Add captilization for dog breeds
  • Replace the dog.ceo API with a API that hosts actual dogs for adoption

Tools & Technologies

React

React Router

Cypress

javascript

CSS3

Github

Contributors

Shawn McMahon GH
Shawn GH img

This project was created for Turing School of Software and Design
2021/08/09