OK CRYPTID

Deployed Site

View the deployed site here!

Abstract
Project Goals
Project Specs
Challenges
Future Iterations
Install and Setup
api
Tech Stack
Contributors

Abstract

Ok Cryptid is here to help you have your very own cryptid encounter! We’ll help you identify the trails where you are mostly likely to cross paths with your favorite cryptid!

Project Goals

Gain competency with GraphQL
Create a multi-page UX using Router V6
Deploy to Heroku
Learn and implement Cypress stubbing for GraphQL

Project Specs

View our wire frame here

Homepage:

The user can see and select any cryptid that peeks their interests.

View a single cryptid's details page:

When a cryptid is selected, the user is directed to a page with information about that specific cryptid. If the user would like to go a step furture, they can click the 'sightings of *' button to where that cryptid has been spotted.

All Sightings page:

From the all sightings page, a user can filter their search by cryptid or location with a state input search. If a cryptid has been seen in that location, the sighting will be rendered, if the location does not have any sightings the user is prompted to try another search.

Single Sighting page:

When a sighting is selected, they are taken to that specific sighting which the provides links to hiking trails near by. When the link is clicked a new tab opens with an external AllTrails link.

Error handling:

If an error occurs when trying to access the app, the user is shown an error modal letting them know what went wrong.

Challenges

The OK Cryptid app was built in the short time span of 15 days.
This was our team's first time implementing GraphQL into a project. Adding this to our project required hours of research and bug solving.
Negotiating our api contract was difficult, simply because we didn't know how GQL worked at first.

Future Iterations

Add back buttons to the single cryptid and single sighting page
Create login functionality to allow users to keep track of their trails and sightings
Allow a user to add sightings of their own to share with others
Create trails pages within the app instead of navigating to a new window
Add fun animations for error modal

Install and Setup

To run this app locally:

fork this repository
run git clone git clone git@github.com:OK-Cryptid/ok-cryptid-fe.git in your command line
Run cd ok-cryptid-fe to navigate into the repository
Run npm install
Run npm start
Visit http://localhost:3000/ in your browser to view the OK Cryptid app!
Open a second terminal tab and run npm run cypress (while localhost:3000 is still running) to access the cypress testing for this app