GameCave is a React web application that allows a user to search through a database of videogames and/or randomly generate a suggested game to play.
You can learn more about the assignment spec by following this link.
Credit for the project goes to team members:
- Devin Kapla: GitHub, Email, LinkedIn
- Jacob Admire: GitHub, Email, LinkedIn
- Justin Pyktel: GitHub, Email, LinkedIn, Twitter
Using keys from our data in component state allowed us to keep functionality dynamic with bracket notation.
filterByKey = (games, key) => {
return games.filter(val => {
return this.state[key].every(elem => val[key].includes(elem))
})
}
"Learning to use React and Jest/Enzyme while still building the app we wanted was a difficult learning curve. Testing became easier after getting a grasp on React and understanding when and how to use mock data." --Devin
const event1 = {
target: { classList: ['genresToFilter'],
id: 'Action',
checked: true}}
"The most frustrating challenge that I came across was trying to get a onBlur event to trigger on a form without knowing about the "tabindex" HTML attribute. Now I know that "tabindex" indicates whether or not an element can be focused, and thus whether or not it can be affected by onBlur." --Jake
<form onBlur={this.focusLost} tabIndex="0" className={hidePlatforms}>
"Learning and understanding how to condintionally render, using OOP, with React. Was at the same time, challenging and rewarding! Being able to manipulate the page in such away makes me all the more confident in my ability to build larger scale projects." --Justin
render () {
let games = this.props.games;
games = this.state.titleFilter ? this.filterGamesTitle(games) : games;
games = this.state.genres.length ? this.filterByKey(games, 'genres') : games;
games = this.state.platforms.length ? this.filterByKey(games, 'platforms') : games;
games = this.state.isLucky && games.length ? this.shuffle(games) : games;
games = this.state.isMulti !== null ? this.filterByMulti(games) : games;
const popupOverlay =
(this.state.popup && <Popup {...this.state}
mainGenres={this.props.mainGenres}
setPopup={this.statePopup}/> )
"Learning about and using component lifecycle methods was both a challenge and very rewarding." --Devin
componentDidUpdate = (prevProps) => {
if (prevProps !== this.props) {
this.setState({
titleFilter: this.props.titleFilter,
genres: this.props.genresToFilter,
platforms: this.props.platformsToFilter,
isLucky: this.props.isLucky,
isMulti: this.props.multiplayerToggle
})
}
"I personally feel a great deal more confident working with React and making components that speak to eachother. 'Data-Down, Actions-Up' and the idea of passing methods back and forth was at first a bizarre concept that I couldn't grasp, but now I fully understand it and am capable of working with it" --Jake
"Seriously got my reps in with Conditional (ternary) Operators with the use of Conditional Renders in React. My figgest feat was learning how to generate a popup with not only information from our primary dataset, but to then use that same popup for displaying our secondary dataset." --Justin
These are extensions that we plan to implement at some point in the future:
- A local storage system to keep track of each user's selected library of games
- The functionality to swap between a user's individual library, and the entire library of games
"Define the Relationship" / Workflow
Credit for this project goes to Devin Kapla, Jake Admire, and Justin Pyktel
This project was assigned by Brittany Storoz, Pamela Lovett, and Robbie Jaeger
@ Turing School of Software and Design, Denver, CO.