View the deployed site here!
- Abstract
- Project Goals
- Project Specs
- Challenges
- Future Iterations
- Install and Setup
- api
- Tech Stack
- Contributors
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!
- Gain competency with GraphQL
- Create a multi-page UX using Router V6
- Deploy to Heroku
- Learn and implement Cypress stubbing for GraphQL
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.
- 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.
- 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
To run this app locally:
- fork this repository
- run
git clone git clone [email protected]: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
For this project, we access data from a GraphQl API created by our backend team.
Kayla Durrett (she/her) - GitHub LinkedIn
Jasmyn Hicks (she/her) - GitHub LinkedIn
Richard Rosa-Serrano (he/him) - GitHub LinkedIn
Grace Gardner (she/her) - GitHub LinkedIn
Mallory Vining (she/her) - GitHub LinkedIn
Darren Kulback (he/him) - GitHub LinkedIn