README.md

Gachasphere

Summary

• About the Project
• Usage
• Videos and Screenshots
• Getting Started
• Built With
• Accessibility
• Authors
• Acknowledgements

About the Project

Gachasphere was built with the intention of being a central hub for all things mobile gaming. Due to the free-to-play nature of Gacha games, most players are actively playing multiple games at the same time. Unfortunately, the communities for each individual game remain isolated. Gachasphere hopes bridge the gap between existing communities and connect players from all over the world together.

Usage

To start, visit Gachasphere, register a new account, log into your existing account, or click the login as guest button.

Once you're in, you will be able to see the global user rankings for all the top games. From there, you can create your own list of games that you have played. You can give each game a Gameplay rating and a Free-To-Play rating. Each game has its own dedicated page where you can see more details including popular Reddit threads and Twitter posts from the game's official account.

Videos and Screenshots

Click below to see Boris demo Gachasphere:

Getting Started

To set up a local copy of the project follow the steps below. Be sure to follow the instructions in the server-side repository as well.

Prerequisites

• In an empty folder initialize a new Node.js project.

npm init

Installation

1. Clone to local machine

git clone https://github.com/brodri4/Gachasphere-client.git

2. Install NPM packages

npm install 

3. Start program

npm start

Built With

• Javascript
• CSS
• Bootstrap
• React
• Redux
• React Redux
• Redux Persist
• React Router DOM
• Redux Thunk
• Axios
• History
• Node.js
• Express
• Sequelize
• PostgreSQL
• JSON Web Token
• nodemailer
• bcrypt
• react-beautiful-dnd
• react-twitter-embed

Accessibility, SEO, and Best Practices

Accessibility - 100 Lighthouse score

• All colors pass 4+ WCAG contrast tests and are a red/blue color scheme.
• All navigation and forms are tabbable.
• Text alternatives for images.
• Buttons and links have accessible names.
• Appropriate title, label, and landmark elements, including descending order headings.
• No elements or attributes that would limit use by keyboard or screenreader users.
• Concerted effort to cut down on unnecesary divs, a React/SPA problem.

SEO - 100 Lighthouse score

• Has all appropriate meta tags, including keywords and a title element.
• Links have descriptive text and are crawlable.
• Page isn't blocked from indexing.

Best Practices - 100 Lighthouse score

• Avoids deprecated or vulnerable code.
• HTML has doc type, lang, and charset.
• CORS enabled.
• Avoids notifications on load.

Authors

• Borinquen "Boris" Rodriguez - brodri4
• Abbey Perini - abbeyperini
• Jonathan Nuno - Jonathan-Nuno
• Hung Tran - hptran7

Acknowledgements