React-API - LOTR Toilet Time

Proposal

For this project I have decided to use an API that fetches data related to one of the greatest Trilogy's of all time. This App will provide users with random basic information for their journey across Middle Earth, from movie stats and quotes to short snippets of factual info of characters

Project Timeline

• Jan 19th
  • Project Proposal, Readme framework
• Jan 20th
  • Project Timeline, PsedoCode, and MVP Steps laid out
• Jan 21st
  • Build App Framework
  • (components, routes, reactstrap, basic CSS)
  • perform all npm necessary installs
  • connect framework and test displays with basic tags
• Jan 22nd
  • Verify API data calls in each component produces desired data
  • fix any bugs that this creates with basic framework
• Jan 23rd
  • Utilze and display API data
• Jan 24th
  • Achieve MVP status and finish complete style
• Jan 25th
  • Confirm MVP status, fix any bugs
  • Stretch Goal times
  • Presentation prep
• Jan 26th - Presentation day!

Project Build

Over the course of the project I was able to maintain my timeline and meet the goals that I set for myself daily. I only ran into a couple of blockers that halted progress until they could be solved. The first was when making multiple api calls and preventing the site from rendering until all the data had been gathered from the various endpoints. Once that was solved utilizing the data was pretty straight forward. It took me a little time to get the function right for pulling from the gathered data at random, once I did then it was straight on until I reached MVP. After I reached mvp I spent my time styling, (which I styled primarily for mobile phones), and then I began to work on stretch goal quiz portion of the quotes, which I was able to finish before presentation time.

Link to my Pseduo code

Technologies used

• React - Reactstrap - Bootstrap - HTML - CSS - JavaScript - Deployed through Netlify

User Stories

User wants info on LOTR

• User wants random facts about characters/movies/quotes - user hits RF button on corresponding page
• User wants specific LOTR info (stretch) - User enters desired info into search bar to find information if available
  • user searches LOTR movies
  • user searches LOTR character bio
  • user wants in depth character info (provided by wiki-link stored in API object)
  • user searches LOTR famous quotes
  • user searches LOTR book info
• User will want available information to be easily navigable between categories for random information
• User will want search functionality to be in home page to make it easy to search for information

Full WireFrame Sketch

Page Display

Routes and Components

updated full WireFrame with stretch goal changes

Mobile Style

Quiz Stretch Goal

Current Deployed Product

Link to LOTR-Toilet-Time