Skip to content

NickLiggett/WhoSaidThat-LOTR

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Who Said That? LOTR

Introduction

  • When the user is at the homepage, they can choose to play the quote trivia game or go to the study hall to look up a specific character's quotes from the films.
  • On the Game page, a random quote is populated and the user must select which LOTR character they think said the quote.
  • The user will be notified whether their guess was correct or not, then a new quote will appear with new choices.
  • In the Study Hall, the user can scroll through a list of quotable characters from the films.
  • The user can click on any of these characters and that character's quotes will be populated.
  • The user can click on any of the characters quotes to save them to their favorites.
  • The favorites section is accessible through the Study Hall via the Favorites button.
  • On the Favorites Page, the user will see their favorited quotes and can unfavorite them by clicking on them while on the favorites page.

Setup

Check out the app here

or

Copy and Paste this into your terminal

git clone [email protected]:NickLiggett/WhoSaidThat-LOTR.git
cd WhoSaidThat-LOTR
npm i
npm start
  • CAUTION! If you choose the local setup, you will need to visit this website and request an API key. Once you have it, visit this website to find out how to hide you're API key if you want to push it to GitHub.

Application in Action

Playing the Game Going to Study Hall Favoriting a Quote

Technologies

  • React
  • XML
  • CSS
  • VSCode
  • Router
  • Cypress

Goals, Challenges, and Wins

Goals

  • This project, I particularly wanted to make a mobile compatable app.

Challenges

  • The API used for this pro app only allows 100 network requests per 10 minutes. I could've made all my network requests in some main component and pass them down as props but I wanted to prioritize being able to maintain data on a page refresh (hence the fetch calls in App, Library, and Game components). I could not figure out a good solution to this besides using a custom made API without network request limits.

Wins

  • The API used for this project has an end point for all characters (including the LOTR books) and an end point for all quotes from the films.
  • This became a problem when populating the characters in the library because the API was giving me over 200 characters, only about 40 of which had quotes.
  • I count my cleanup function that returns only characters with lines as a win.

Possible Future Extensions

  • Add character images to the Library/Study Hall
  • Have green text for favorited quotes persist through page navigation

Sources

Contributors

Project Specs

  • The project spec & rubric can be found here
  • The project repo can be found here

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published