whiskr/whiskr

A Tinder-like progressive web application for pairing local adoptable pets with potential owners

Whiskr

Tinder styled pet adoption web app

Description:

This is a tinder styled app that makes pet adoption an easier process. Using real pets from the PETFINDER API, you can swipe left or right on pets you might potentially want to adopt. However, since pets cannot swipe back, a shelter will check to see if you are the right fit.

https://whiskrapp.herokuapp.com

Developers:

• Shelby Rackley
• Shannon Kendall
• Shiratie Prodhan
• Keri Miller

---

For Developers:

Secrets Setup

required API keys

• PetFinder
• Google Maps GeoLocator
• Google API OAuth
• Facebook OAuth

At the root folder touch secrets.js

Secrets.js

//  petfinder API_SECRET
const API_SECRET = 'YOUR_SECRET_KEY';

// google geoLocator API_SECRET
const GOOGLE_GEO_API_KEY = 'YOUR_SECRET_KEY';

// google API_SECRET for OAuth
process.env.GOOGLE_CLIENT_ID = ''YOUR_SECRET_KEY''
process.env.GOOGLE_CLIENT_SECRET = 'YOUR_SECRET_KEY'
process.env.GOOGLE_CALLBACK = '/auth/google/callback'

//  facebook API_SECRET
process.env.FACEBOOK_APP_ID = 'YOUR_SECRET_KEY'
process.env.FACEBOOK_APP_SECRET = 'YOUR_SECRET_KEY'
process.env.FACEBOOK_CALLBACK = '/auth/facebook/callback'

module.exports = {
  API_SECRET: API_SECRET,
  GOOGLE_GEO_API_KEY: GOOGLE_GEO_API_KEY
};

Install yarn and if you don't have it already

npm install yarn

Sync the two package.json files

Our project has two package.json files, one on the client side and one on the server side.

we use concurrently to run these at the same time.

**If you don't already have concurrently globally installed on your machine you can run yarn install first to install the server side npm modules. Then you can yarn sync normally.

Use yarn sync to install the packages simultaneously

Create and Seed the database

In your terminal, create the database with the command createdb whiskr

Next, seed the database with yarn seed

Run the app

After you install the packages, run yarn dev to start up the app and navigate to localhost:3000

Using the App

To use the app, either login or sign up. You can also use one of our seeded users. Our favorite is:

Email: [email protected]
Password: catscatscats

From there, you will be redirected to the PetTypes page. Choose the type of pet you'd like to adopt. The categories are: cats, dogs, reptiles, barnyard, horse, small and furry, rabbit, birds.

Swipe left to dismiss a pet and swipe right to add it to your matches.

On mobile view, you can click the pet card to expand the profile.

whiskr's Issues

Styling for Interest Letter/Email

• mail icon needs to change to a check after contacted
• email is ugly on the preview and the actual email, right?

Contact reducer

Write reducer to change contacted field on models to true when email button is clicked on matches

Change pets fetch over to petfinder api

Smallfurry bug

Backend tests mocha/chai

Look into better Cors solution

try to tinker a more sophisticated cors set. maybe through middleware?

Clear/Reset the State on LogOut

• state clears when logging out

Change where CreateUser occurs

Right now signup is throwing an error, because the user model requires properties that aren't on the signup form.

DEPLOYMENT!

🎇

Add "contacted" field on the Matches model

User state not loading in time for fetchMatches Thunk

Having trouble loading the user props on the AllPets components. Trying to get it loaded on the top level so it's ready to pass the user id to the thunk on AllPets but it's not loading.

make singlepet expand and collapse on click

Make profile form multi-step

Push Notifications *STRECH GOAL

api routes

• created model for user
• created model for matches
• design routes to fetch user info from our database
• design routes for user matches
• testing through postman

HomePage Component

Renders hero image, logo, links to signup or login. No Nav is rendered on page.

Modify manifest.json to align with our app

ReadMe.md

Let's update the Readme from the react docs to our own. It would look better for people visiting our project. It can also be useful for us to write down how to

UserHome Component

Renders the user model data, including image, name, email, etc.
Renders the LovedPets component

heart for indicating match and for unmatching

• heart for indicating when a pet is matched (and maybe this can be the button to unmatch ie hover on hear is broken heart?)
• some sort of indicator for when the shelter has been contacted

Seed file

For users

Lock down routes for non logged in users

Make only the sign in login page available when a user is not logged in.

Nav Component

Expanding fixed location button that expands into icons which link to PetTypes, LovedPets, UserHome, and possibly Settings

Oauth

implement facebook and google sign in

fixing sign-in vs login bug

unmatch route

Make swipe work with keyboard arrows *STRETCH GOAL

Reducers

Reducers for getting loved pets of user.

Center align matches in the middle of the screen vertically

Matches not loading fast enough on Profile after 1st Login

Now that the state gets cleared from matches if you login and go straight to User Profile the get matches call runs after the FetchPEtById . It works after this because once the matches are put on state they stat there until they are cleared on logout.

Maybe to fix this we can :

• call get matches earlier in the app
  or
• we can add it to the componentDidMount onLoad() function

User-Home button functionality

-buttons need to navigate to new routes
-delete account should fire a thunk and reroute to the login/signup component
-update profile should reroute to the create/edit component

SinglePet Component

Renders the profile of an individual pet

Name
Age
Description
Size
Gender
Distance from you

Contact the shelter functionality
Add or remove from favorites icon functionality

Create/Edit Profile Form

Single Pet View

the component links from the match cards to shows the single pet page details.

has

• more pet detail
• a button to email shelter (?)
• a button to unmatch pet (unless we want this on the all match page instead?)

HEROKU BUG-web Div covers cards after 25 pets

problem

On the Heroku Web Version after you swipe through the initial 25 pets the cards are covered

---

Ideas

Reload Queue

• add SeenTable
  // keep calling getRandom() via a thunk that dispatches until it has filled the queue and check against the user’s seen pets which is stored on server on localstorage and persist your local state.

// within a session, don’t persist the offset, but keep track for next fetch

// move get request to backend
// send current queue to backend get
// calls getRandom and filters out queue and seen before
// sends filled queue back

Design logo and icon for Whiskr

Add text labels to petTypes

Style checkboxes

Styling user and matches info page

style the user and match info page.

Ideas

• simplify information that is on the matchlist card, maybe only photo pet name and pet type
  cool to have: maybe pet types can have their own color cards? maybe this can be done in the mapping where pet type is set as a class name and then on the scss we can just change the div bg colors there.

open for adding ideas

Seen Pets

• make seen model
• api routes
• thunk to add to seen db
• thunk to find if match exists and return boolean for whether to add to queue
• test

Letter Of Interest Form

• research how to autogenerate emails in react/redux
• write dummy letter of intent
• find a html template for emails and adjust it for our needs
• hook up the currentUser's profile fields into the template
• ensure functionality/demo-ability through one of our email addresses (although we'll also need code that actually plugs in the pet's shelter/care contact email ... and then comment it out so we're not actually emailing the shelters while we test/demo this)

Whiskr-Interest-Letter.docx

LovedPets Component

• Renders all the pets that the user has selected.

Links to individual pet pages with SinglePet component.

• move findpetby id req to backend
• with style 🕶

Style matches/matchSingle/userProfile

Add margin to matches and matchsingle

HEROKU-MOBILE No pet change on swipe

Issues

• no pet change on swipe.
• Also font-awesome icons won't load just square boxes
• and the view is too large to use the menu or signup form on my phone (iphone 6se)

---

Tissues?

Can't load $t of undefined

EnoENT Bug

Problem

404 ENOENT error when the store is clear.

What I was Doing:

After I merged from master I rebooted my computer to clear the redux store. Then I restarted the project ran yarn sync , seed and start. I log in as catlady an click a pet from the all pets menu. Then I get the error.

terminal error

 Error: ENOENT: no such file or directory, stat '/home/$COMPUTERNAME/Desktop/whiskr/public/index.html'
[0]     at Error (native)
[0] GET /pets/%3Canonymous%3E 404 67.747 ms - 88
[0] GET /pets/%3Canonymous%3E 404 0.962 ms - 88
[0] GET /pets/%3Canonymous%3E 404 1.210 ms - 88
[0] { Error: ENOENT: no such file or directory, stat '/home/$COMPUTERNAME/Desktop/whiskr/public/index.html'
[0]     at Error (native)
[0]   errno: -2,
[0]   code: 'ENOENT',
[0]   syscall: 'stat',
[0]   path: '/home/$COMPUTERNAME/Desktop/whiskr/public/index.html',
[0]   expose: false,
[0]   statusCode: 404,
[0]   status: 404 }

the first time I visit a page I get an error about not being able to read the property of NULL
then if I revisit a page I get this error on the component

TypeError: Cannot read property 'reduce' of undefined

but the terminal side does the fetch random animal request OK

after that they always work.

PetTypes Component

Renders different species of animals: cats, dogs, birds, reptiles, etc.

Icons not images, with text
Selection of category dictates filter put on allPets Component

AllPets Component

Renders a container for singlePet components
Includes a swiping functionality
Overlay of heart or x when image is moved left or right

Location services

Implement permission request to access location services.

Learn and Create Jest Tests for the Frontend

• Loads currentUser into state upon Login
• Loads currentUser's matches into state
• Loads potentialMatchQueue based on animal type selection and preferences
• Refills the Queue when it is empty with new animals
• Adds an animal to matches when liked