ccollums / gamenight

Group project with goal to learn new technology, we chose global state management with Context.API and built out an app in 8 days. The app will keep track of wins and games played over game nights with friends, to save time arguing over who is the best.

Home Page:https://ccollums.github.io/gamenight/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gamenight

Where friends come to play...

Table of Contents

Introduction

Gamenight was born out of a love for, well, game nights. We were motivated by a shared desire for a simple interface that keeps track of the competition, friendly or not, among friends across multiple game nights. Part time capsule, part scoreboard, gamenight is for anyone who enjoys getting together with loved ones to battle it out for bragging rights.

Gamenight was completed as part of Turing School of Software & Designs’ intensive Front-End Engineering program. The goal was to envision and build a complex React web app from scratch while self-teaching a new concept, global state management using React's Context API, in the span of one week.

Technologies

  • React
  • React Router
  • JSX
  • JavaScript
  • Cypress
  • NPM
  • HTML5
  • CSS3
  • Figma
  • VSCode

Deployment

Visit Site Here

To view in browser:

  1. Visit the deployment link above

To run locally:

  1. Clone this repo down to your local machine: here
  2. On the command line, type: npm install
  3. On the command line, type: npm start
  4. Visit http://localhost:3000/#/

Project Spec & Rubric

  • The project spec & rubric can be found here

Site Overview

Click below image to watch general overview:

Watch the video

Scroll down for screenshots:

Home Page

Screen Shot 2022-01-12 at 12 08 49 PM

Add Game Night

Screen Shot 2022-01-12 at 12 15 33 PM

Add Game and Winner

Screen Shot 2022-01-12 at 12 10 18 PM

Games Page

Screen Shot 2022-01-12 at 12 10 37 PM

About Page

Screen Shot 2022-01-12 at 2 55 57 PM

Error Handling

Screen Shot 2022-01-12 at 12 18 11 PM

Screen Shot 2022-01-12 at 2 26 34 PM

Responsive Design

Screen Shot 2022-01-12 at 12 12 34 PM Screen Shot 2022-01-12 at 12 12 57 PM Screen Shot 2022-01-12 at 12 13 08 PM Screen Shot 2022-01-12 at 12 12 46 PM

Wins And Challenges

Wins

  • Our biggest win and takeaway was self teaching a new concept in a matter of days: Global State Management using Context API
  • Teamwork and communication: we established a really great team dynamic, remembering that we are all humans first. This led to a really positive and productive work environement
  • Fully designing and developing an application of our own concept

Challenges

  • We wanted to implement a hamburger button for a more responsive design, which proved to be more challenging in React than initially anticipated
  • Using localStorage along with Context API and React Hooks took a bit of self-teaching compared to using localStorage with Vanilla JS

Future Improvements

Now that our MVP functionality has been built out, there is still so much we would love to add in the future!

  • Add functionality to clear individual gamenights (in case of user error, creating an incorrect gamenight)
  • Add ability to delete indivdual game plays (once again to account for user error)
  • Access more than the top 25 board games, so that users can choose from more games
  • Allow users to add their own option for a game to be played on a game night
  • Add the ability to click on a game on the games page and be shown more details about that specific game

Artists

  • Dice by Chris Dawson from NounProject.com (Used for our logo)

Authors

Carly Collums GH Kyra Bergsund GH Adam Burgess GH
Carly Collums Kyra Bergsund Adam Burgess

About

Group project with goal to learn new technology, we chose global state management with Context.API and built out an app in 8 days. The app will keep track of wins and games played over game nights with friends, to save time arguing over who is the best.

https://ccollums.github.io/gamenight/


Languages

Language:JavaScript 74.9%Language:CSS 20.4%Language:HTML 4.7%