Trail Blazers Widget

This widget allows Blazers fans to see information on the next three Trail Blazer games.

Link to Project Page

Overview

• All site data is dynamic and will update automatically to reflect the next 3 games.
• Date, time, arena, and location of closest game are displayed at the top of the App and the date will change to "TODAY" on game day.
• Broadcast information updates with Trail Blazers tv/radio stations.
• The later two upcoming games are also links to the official Trail Blazers NBA schedule page.

Widget State Examples

Gameday Away	Future Home Game	Future Away Game

Desktop Context

Run Project

To get the project running locally, simply clone this repo, cd into the root folder and type the below command into the terminal:

npx serve

Implementation

To implement, add the below code just above 'div class="panel-pane pane-custom pane-2"' on the right rail of the blazers/forward-center page. Makes sure to set the iframe height to 485.

<div class="panel-pane pane-custom pane-1">
  <div class="pane-content">
    <div class="center-block well">
      <iframe
        id="nextGame_iframe"
        src="https://trailblazers.netlify.app/"
        width="100%"
        height="550px"
        frameborder="0"
        scrolling="yes"
        title="Rip City NEXT_GAME"
      ></iframe>
    </div>
  </div>
</div>

Making It Production Ready

Moving this into production, I would incorporate Moment.js or date.fns to handle time-zones, as time-zone differences are notorious for complicating time conversion as well as accounting for daylight-savings time.

I would make the amount of upcoming games be configurable to allow the user to set the number of games being displayed.