Code Monkey home page Code Monkey logo

board-game-bonanza's Introduction

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 [email protected]: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

board-game-bonanza's People

Contributors

dgubko avatar adelle-pitsas avatar courtney-lippman avatar nagel29 avatar knpausch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.