Git Product home page Git Product logo

game-night's Introduction

GameNight

GameNight is a web app that records & analyzes group game nights without the hassle of tracking everything by hand with pencil and paper.



๐Ÿ“– Background

Having watched my family record countless domino games by hand with post-it notes and scratch pads, and seeing their struggle in organizing and tracking their games, I decided to upgrade their form of record-keeping to an online platform.

In addition to tracking games by hand, the issue of recording who won became an issue. While physical pieces of paper have finite space to write, an online application does not have to conform to those limitations and can record much more data as well as display connections between their data as charts and graphs in a visual format.

This began the month-long push of creating GameNight.

๐Ÿ† Goals

The two main goals of this project are to:

  1. Learn about serverless architecture
  2. Create a useful product that can be used in the real world.

Specifically, I want to do a deep dive into AWS products such as Amplify, Cognito, and Dynamo DB as well as learn more about GraphQL.

โš™๏ธ How GameNight Works

A group, defined as a family unit or collection of friends, can create a single account to track their entire group. Within this account, anyone can add members, games, and/ or record a game. This single account login allows any member at any time the freedom to edit the account. The idea behind this is that, while there may be multiple players who play a game, there only needs to be one player to record the game. This eliminates the need for every player to update the account and saves time.

Once members and games are added, a game can be recorded, and then the dashboard page will populate with data.

All users has their own collection of memmbers, games, and games played. This process is handled through user authenticaiton that filters data per account.

๐Ÿ›  Features

  • ๐Ÿ— Create and edit members and games to your account
  • โœ๏ธ Record every game you play
  • ๐Ÿ“Š Analyze data from recorded games in visual graphs and charts

The analysis is the most interesting feature due to the endless possibilities of data visualization. Currently, GameNight offers four views of analysis:

  • Game History: A table view listing each recorded game
  • Leaderboard: A bar chart listing the number of wins and losses each player has per game
  • Game Distribution: A pie chart depicting the fractions of games played
  • Game Activity: A heatmap showcasing how often games are played by anyone in the group

๐Ÿ’ป Tech Stack

Front End Backend Packages
React AWS Amplify (Hosting & CI/CD) Recharts
Tailwind css AWS Cognito (User Authentication) Framer Motion
AWS Dynamo DB (Database) Formik (Forms)
GraphQL (API)

๐Ÿ”ฎ Future Features

  1. Win to lose ratio (A moving average of a player's ability per game)

An additional tile view in the Dashboard

Currently, GameNight takes in three types of data:

  • Games
  • Members
  • Recorded games (winners, losers, date, game name)

and outputs the same data, but only visualized, not truly analyzed.

Inputs of Winners, Losers, and a Recorded game creates a leaderboard, but it does not show any higher order analysis. For example, using calculus as a metaphor, when students take the derivative of a Position vs. Time graph, they get Speed. In this same manner, by taking the "derivative" of Players ("Winners" and "Losers") and a Recorded Game, a moving average can be calculated.

A moving average is simply the win to lose ratio a player has over time. This will normalize the player's wins and losses making it possible for members to view a fuller picture of who is getting better or not.

This can be implemented in the form of a line graph to depict the rises and falls of each player.

Overall, this will give members a clearer picture of each member's ability in a given game.

  1. Update Notifications When updates are made, the user should be notified of any changes when they sign into their account.

๐Ÿ‘ฅ Contributing

I'm glad you are considering contributing to this project. I've poured a ton of hours into this and I would love to see any of your additions. Please read the following to make contributing easier for both you and me.

Note: You shouldn't need to install or setup any AWS services. Note: When you are prompted to sign in, use the following credentials:

  • username: testaccount
  • password:qwerty123

Feel free to edit this account as you see fit to complete your contribution.

If you have any issues logging in, please let me know.

Step 1: Creating a branch

If you see an issue that sparks your interest or if you would like to contribute something else please follow this guide:

Branch Structure

  • Branches should follow this format
    • feature/name-of-branch (a new feature that is being made)
    • update/name-of-branch (an update to an existing feature)
    • bug/name-of-branch (a bug fix)

Step 2: Create a PR

Once you are happy with your branch, submit a PR with comments and a descripting documenting what you changed.

When I get the notification that you submitted a PR, I will review the PR and if there are no errors, merge it into main. If however, there are errors, I will provide you with what errors exist so you can fix them.

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.