Giter VIP home page Giter VIP logo

gameboard's Introduction

Synopsis

This was a two week personal project built for the Turing School of Software and Design, using React.js, React-Router, Redux, and Google Firebase. The idea and implementation of this application was created and carried out on an individual basis. As a novice board game user interested in expanding my gaming experience, I wanted to make an application that allows users to explore the new and exciting board games available.

Code Example

This website allows users to keep track of the board games they own, rate them, and see what their friends are playing! The most popular website that lets people find board games, add them to a collection, rate them and friend other users is BoardGameGeek.com, which is not user friendly and intimidating to new board game users. My app seeks to let new board game users come and start building a community with other board game users, so users can see what games are highly rated and what games their friends own that they can play together.

Implementation

The project is built in React.js with Google Firebase as a backend for user authentification and database storage. The create-react-app was used as the starter, which documentation can be found here.

API Reference

The board game api is taken from BoardGameGeek. Users can search for the name of a game and the api will return the names of the board games that match that searched name. Then users can click on the game they want to see, which makes an additional api call to get the details of the game. The api returns data in XML, so an XML to JSON npm package is used to convert the data from XML to a JSON object.

Tests

Jest and Enzyme are used to test the application and can be run using npm test

Installation

Clone down the repo and run npm install

Since Firebase is used as the backend, you will need to create a firebase database for this repository and copy the individual config code firebase provides. You should create a file called firebase-key.js in the src/firebase directory.

The application is now ready to run using the code npm start

Contributors

Thank you to joshuajhun and Jeff-Duke for helping me handle the XML to JSON conversion, as well as, helping me create a smoother UI.

Screenshots

screencapture-localhost-3000-login-1519933765249

screencapture-localhost-3000-dashboard-your-games-1519933852616

screencapture-localhost-3000-dashboard-search-users-1519933983038

screencapture-localhost-3000-dashboard-search-games-1519933974919

screencapture-localhost-3000-dashboard-friends-games-1519933930564

gameboard's People

Contributors

cbdallavalle avatar

Watchers

 avatar

gameboard's Issues

display all friend games

Issue returning all the user's friend's last played game, promise is not returning as resolved.

README

  • Show me how to get this up and running
  • How to install dependecies and stuff
  • Screenshots / Gifs of the app

Css

  • When adding a friend there should be some css indicator
  • Try using Sass

Form contains previous info

To edit a review, the user clicks on the edit button, which pulls up a form. The form does not contain the previous user's review prompting them to rewrite all of their review.

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.