Git Product home page Git Product logo

halo5_graphql's Introduction

Halo 5 GraphQL

About

Halo 5 GraphQL is a frontend web application created using a Node.js runtime environment with React and Redux libraries and developed by a pair of developers from the Turing School. Deployment to production at solarizer.herokuapp.com is handled using a continuous integration workflow with Travis-CI.

This application allows for users to

Prerequisites

  • Node.js 12.18.1

Setup Local Server (site is deployed with link above for easier access)

  1. Clone this repository: git clone https://github.com/Rosebud303/Halo5_GraphQL.git
  2. Install outer package dependencies: npm install
  3. Enter the local directory: cd client
  4. Install package dependencies: npm install
  5. Launch server: npm run dev
  6. Visit localhost:3000 to view the application in your browser

Walkthrough

  1. Visit the production or localhost application and enter your address and click Begin
    Home page
  2. Enter a hypothetical solar array configuration. Commonly-encountered settings are suggested through the use of placeholder text in each input field, and then click Submit
    Configure page
  3. (Optional) Enter historical energy usage for the past twelve months (tip: check your utility bill history). If this information is not available, click Skip, otherwise click Submit.
    Historical page
  4. Results are displayed in a table.
    Results page
  5. Click on "Graph It" to view the same data in charts.
    Charts page
  6. The FAQ is available from the home page by clicking "What is Solarizer?" FAQ

Backend & Storage

Halo 5 GraphQL's frontend is supported by multiple endpoints developed and structured in the GraphQL backend created for this application.

Contributors

Acknowledgements

This project was made possible by the collection and publication of Halo 5 statistics, metadata, and profile data by 343 Industries (343 Industries)

halo5_graphql's People

Contributors

dependabot[bot] avatar j-poulter avatar rosebud303 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

j-poulter

halo5_graphql's Issues

Style Welcome Page

Alter styling to make the welcome page more visually pleasing and more closely resemble the rest of the application

Arena Page Addition

Add content that indicates to the user what to do to get started. Something that can occupy the page before the dropdown content is rendered so that the page isn't so empty at the start.

Responsiveness

  • Add responsiveness considerations for laptop screen overlaps
  • Add responsiveness for tablet size screen
  • Add responsiveness for mobile size screen

Details Page Medal Displays

  • Fix issue with medal display hovers where when the box is hovered over, the position of the medal count shifts itself.
  • Add rounding fix for arena shooting accuracy.

Deploy Application

  • On Heroku, going to have to deploy both the GraphQL backend and the React front-end.
  • Add API key and proxy URL in the config variables.
  • Brainstorm URL name
  • Find out how to customize URL

Apply for higher API limit

Complete application to upgrade the API key we will be using for the project to prevent having to make the user refresh the starting page to gather all meta data.

Fetch Response Handling

Add try catch hooks to player search functionality so that user can be informed when they search for non-existent name. Integrate the handling of this into the redux state management.

Begin using Agile

  • Breakdown Agile steps and find useful ways to apply them to our daily tasks.
  • Be sure to be concise, clear, and actionable.
  • Make vocabulary more actionable and concise when creating issues/stories.
    • Direct issues to specific admin/admins.
    • Separate the differences between admin stories and user stories.
    • All issues and stories should be negotiable.
    • Create point values for issues.
  • Wireframe / Proof of Concept

Implement SEO

  • Research SEO, what it is, what it does, and how to utilize it.
  • Implement SEO in a meaningful way. Research if it can be altered despite being in Heroku.
  • Incorporate Google Analytics

Header Additions

  • Add border to header to make it stand out more on library's page.
  • Add button for library in header so that it renders on other pages.

Error Handling

Add error handling that takes into consideration situations where a user doesn't have arena or warzone stats on their profile.
Find a resolution to cases where user searches for a name that doesn't exist, especially when they have successful searches previously.

Finish Homepage Styling

  • Add more styling elements to the homepage
  • Including background
  • Style the carousel
  • Restyle the buttons

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.