Skip to content

knpausch/board-game-bonanza

 
 

Repository files navigation

About The Project

Board Game Bonanza is an intuitive application that displays the top 100 board games retrieved from the Board Game Atlas API. A live search bar can be used to search for specific board games by their titles. Upon selecting a board game, the user is able to peruse the selected board game's details such as its rank, average user rating, number of ratings, description, number of players, playtime, price, and its official site link. At the bottom of each details page, there is a controlled form that allows the user to add or delete their own comments about the selected game. A heart icon for each board game is displayed on the top 100, details, and favorites page. The user can save the specific board game to their favorites or remove it by clicking the heart icon.

Board Game Bonanza was constructed utilizing React, Router, and Cypress testing. This application allowed our team to showcase our self-taught knowledge of Typescript. On top of learning a new technology we collaborated as a team in a remote setting within a 10 day timeframe. It took us approximately 55 hours total to finish. We used a thought-out DTR, GitHub project board, calendaring, and an Agile workflow to communicate while we balanced the project with our full-time coursework.

Built With

Typescript React React Router Cypress CSS3 Webpack

Other Technologies

GitHub Project Board | Figma | Zoom | Slack

Installation

  1. Clone the repo
git clone git@github.com:dgubko/board-game-bonanza.git
  1. Install NPM packages
    npm install
    npm start

Learning Goals

Group Learning Goals

  • Independently learn a new technology (Typescript) outside of the Turing curriculum and incorporate the new technology into an application

  • Deepen our understanding of our learning processes and dynamics within a team

Individual Learning Goals

  • Adelle Pitsas: Solidify Network requests

  • Courtney Lippman: Solidify React, Router, and Network Requests

  • Dmitrii Gubko: Solidify React, Cypress Testing, and Routers

  • Keyanna (Kiko) Pausch: Solidify Cypress Testing and Network Requests

  • Ryan Nagel: Solidify React and Router

Deployed Link

Board Game Bonanza

Preview

Searching

Searching (1)

Commenting

Commenting (1)

Favoriting

Favoriting (1)

Planning Process

Component Map

Untitled-2022-10-17-1034

Top 100 Page Figma Wireframe

Boardgame Bonoza

Favorites Page Figma Wireframe

Boardgame Bonoza (1)

Details Page Figma Wireframe

Boardgame Bonoza (2)

Reflections

  • Adelle Pitsas: “Typescript was fun to learn! As we got going with typing, we ran into less bugs and the building of the app felt straight forward. As a team, we did a lot of pair programming which was helpful as we were all using a new language. I felt like as a developer, I not only learned TypeScript through this project but also learned how I learn (what questions to ask, how to follow error messages, etc).”

  • Courtney Lippman: "Typescript has been on my list of technologies that I wanted to learn for a while now. Being able to pick a new technology and navigate the adventures of self-teaching was an experience that left me wanting more. I could not have asked for better teammates for this project. The collaboration and communication were impressive, allowing a team of 5 to create an exceptional product quickly. Our planning was detailed and thorough, our Agile Workflow was flawless, and the Stand Ups were efficient. Being able to gain proficiency with Typescript and solidify my skills with react, router, cypress testing, and network requests was a profound experience."

  • Dmitrii Gubko: "I really enjoyed collaborating with my team for this specific application. All of my teammates frequently and openly communicated throughout the entire process, which lead me to realize how important it is to have effective communication. During the project, my knowledge of cypress testing was improved and I gained a solid understanding of Typescript."

  • Keyanna (Kiko) Pausch: "Working with a healthy sized group gave me the confidence to challenge myself to explore areas I could grow on such as cypress testing, React (ver 6), hooks, react icons, css animation and aria roles for accessibility. Our daily stand ups to review the project board and assign/grab tickets was very effective to accomplish our tasks, especially in a remote setting. Our communication was very thorough yet personable because the group was very supportive and open to new ideas, troubleshooting techniques, and web layout styling. From this experience I have learned to grow fond of react (ver 6), route, and cypress testing and look forward to utilizing them more in future projects."

  • Ryan Nagel: "This was a valuable experience with a great group! Learning goals were met and I’m proud of our ability to learn a whole new tech (TypeScript) and effectively apply it to this project. It’s great that we met our goal of writing the entire application with only using functional components and hooks as well."

Contributors

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 49.4%
  • JavaScript 34.2%
  • CSS 13.2%
  • HTML 3.2%