willianjusten / nba-remix

A simple app to show NBA games and scores/details.

NBA Remix

A simple app to show NBA games and scores/details.

Deployment

After having run the create-remix command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.

If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:

npm i -g vercel
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.

Development

To run your Remix app locally, make sure your project's local dependencies are installed:

npm install

Afterwards, start the Remix development server like so:

npm run dev

Open up http://localhost:3000 and you should be ready to go!

If you're used to using the vercel dev command provided by Vercel CLI instead, you can also use that, but it's not needed.

Pre-commit hook

This project uses husky for pre-commits.

To disable it, add export HUSKY_SKIP_HOOKS=1 to your shell configuration file (.zshrc, .bashrc).

Writing Components

The project favors function components using function and avoid using export default. Also, always prefer to use type instead of interface.

When creating a component then the coding style adopted by the project is like this:

export type MyComponentProps = {
  myComponentProp?: string,
}

export function MyComponent({ myComponentProp }: MyComponentProps) {
  return <>MyComponent</>
}

Maintainers

Adeonir Kohl

Flávio Silva

Helder Berto

Willian Justen

nba-remix's Issues

Revalidate Game Scores when live

When the game is live, we need to update the scores, that's very important. Follow below some ideas of how to do it.

https://sergiodxa.com/articles/automatic-revalidation-in-remix#revalidate-on-interval

Move DayPicker date functions to utils

Today we have this app/components/DayPickerInput/api.ts that format dates provided to DateSelector.

This could be moved to app/utils/handleApiDates and maybe renamed to app/utils/handleDates.

Fix Typescript stuff and add API types

Persist date state between pages

If you watch this video, will see that if we try to see game details from another day and then go back, we are redirected to the home with the day of today, it would be better to persist the day that we were seeing before.

Screen.Recording.2022-02-04.at.05.27.43.33.PM.mp4

Notification Logic

This includes:

• Create the PWA
• Create a way to send notifications when game will start and when finishes with the score

Bug: Time is not handled properly when it's between end of periods

The Q2 just ended, it should show Half like the official NBA:

But it's showing the time of the game:

Don't show details link if game hasn't started

Bug: A game that happened already is not showing the results at home

There's one game that this is happening, we just need to debug (see the API response and understand what's happening there).

How to do it:

• Go to the date (02 March 2022)
• Comment the Index function here and it should
• Refresh the page and you'll be able to see the whole JSON coming from the API
• The component that is behaving weird is the GameCard, check the data coming and what's being done inside the card, you'll find out the issue

Allow user to favorite their team

Show favorite team scores first
If team is in the Western Conference, show standings for Western Conference first

For example, my favorite team is the Dallas Mavericks. I would like to see the Mavericks games first, and the Western Conference standings ahead of the Eastern.

Create Grid / Container

User sign up

This includes:

• Logic to create user / sign in
• Screen without any visual just to test the functionality

Bug: Game details is showing wrong time

The page uses GameCard so we probably need to handle the clock.

Create a types file to hold all of our shared types

Those types should be moved after to a types file so everybody can use it.

Originally posted by @willianjusten in #36 (comment)

Application layout in figma - v1

Figma

Sign In / Sign Up screens

This includes:

• Visual Design to Sign In
• Visual Design to Sign Up

Configure Storybook to the components

Storybook will help us to see different variations of our components, like the GameCard, that has some different states.

Improve background

The background now is a JPG image but it's not looking cool on bigger screens, I can see some pixels and I don't like it. Maybe we can make everything with CSS, blurring the NBA logo and adding the shadows.

Inspirations / Links / Anything

Let's have this issue to add our inspirations/ideas/anything interesting to use.

• Excalidraw Sketch

Game Details Page

This includes:

• #12
  

• #13

Create NBA Logos Component

There's a package with all Logos here =>https://www.npmjs.com/package/react-nba-logos

We just need to create a wrapper that will receive the TeamAcronym (ta) and display the correct logo.
Example:

<Logo team='TOR' /> // this should display Toronto Logo

Create accordion to PlayerStats / TeamStats

For now it's only a overflow, let's make as accordion

Now:

Proposed:

Create DatePicker + date navbar

In order to facilitate changing the dates in our navbar, it would be nice to have a Datepicker:

Configure testing environment with Remix

Configure the following steps:

• Add package Jest
• Add package React Testing Library
• Configure tests scripts on package.json
• Add transform for TypeScript in Jest

Improve date/timezone stuff

For now, the way that we handle dates is very fragile, we should take care about timezones and conversions to be sure everything runs fine.

Separate API routes and other constants

Create Standings Page - Logic

Let's do exactly like we did to other pages, first let get the data from standings, the route is:

http://data.nba.net/prod/v1/current/standings_all.json

And you can see the page here:

https://www.nba.com/standings?GroupBy=conf&Season=2021-22&Section=overall

Create Header

Create a converter/mapper to the API

The API has some stuff that is not so meaningful like ta, tc and so on, it would be interesting to create a mapper like:

teamName: tn,
teamCity: tc,
teamAcronym: ta

This would help our code to be more readable.

Create Error Boundaries

Remix is great with catching Errors and displaying it correctly, lets improve the code here and make the site safer also.

Here is the doc about it: https://remix.run/docs/en/v1/guides/errors

Unify Home and /$date route

Both routes are almost the same, so it should be easier and better to make it only one reusable thing to both routes.

DayPicker wrong background on Firefox

It looks weird on Firefox:

That's most likely because of the blur thing, maybe we should apply a fallback background in order to not have this.

Originally posted by @willianjusten in #58 (comment)

Bug: HomePage (index) not showing the games correctly

I was navigating right now (21:55) and instead of showing games from 25/02 it was showing games for tomorrow but with the date showing correctly. Probably it's something related to timezone, we need to fix this.

Create Game Summary Component

Game Details Page

This includes:

• Fetch data to the game summary

• Fetch data to the Game Score (Teams / Stats)

Home Page

This includes:

• #10
• #8
• #11

Create helper to work with Time Periods (OT1/OT2...)

Now we have this shitty code:

https://github.com/willianjusten/nba-react/blob/3bd707199b3bbb085f5e0a2d7dd49c237440b0a2/src/pages/game/%5Byear%5D/%5Bid%5D.tsx#L57-L67

Add SEO, Metatags and Analytics

In order to release the first version, it would be nice to have SEO, Metatags and Analytics to check how we grow =)

Create Box Score (which contains tables and accordion)

Create a subcomponent from the TeamInfo component

As you can see, those lines and L59-L67 are the same, just changing the team, maybe we can create a subcomponent like:

const TeamInfo = (team) => (
  <div className="flex w-1/4 flex-col items-center text-center">
    <TeamLogo team={hTeam.triCode} size={48} />
    <p className="mt-1 whitespace-nowrap text-sm font-semibold">
      {TEAM_NAME[hTeam.triCode as keyof typeof TEAM_NAME]}
    </p>
    <p className="text-xs text-gray-400">
      {`${hTeam.win}-${hTeam.loss}`}
    </p>
  </div>
 )

Originally posted by @willianjusten in #34 (comment)

Convert to Remix

GameCard logic refinements and data

This issue is only to handle the logic of displaying correct periods/time of the game. It doesn't need visual yet.

---

The GameCard will have this visual:

But it has some variations as well:

• When the game didn't start yet:
  

• When the game is happening

The clock should appear in the middle and it should inform which quarter as well, like: Q1 - 10:34

---

From the API, we have some parts that we can use in order to make this logic, follow a snippet from the API

startTimeUTC: '2022-02-09T00:00:00.000Z',
period: {
  current: 4,
  type: 0,
  maxRegular: 4,
  isHalftime: false,
  isEndOfPeriod: false
},

Cover Playoffs Games

For now, we're just showing normal games, but Playoffs are coming and probably a few things are going to break/change.
We need to pay attention to that and fix it as soon as we see it.

1. Those values will change to work with 7 games record on Playoff:

Add Nprogress to our site

When changing between pages it doesn't give any feedback, maybe we can add the nprogress to our project.

Create GameCard

The GameCard will have this visual:

But it has some variations as well:

• When the game didn't start yet:
  

• When the game is happening

The clock should appear in the middle and it should inform which quarter as well, like: Q1 - 10:34

Create Standing Page - Layout

As soon as we get the initial page done on #37 , let's create the visual.

I believe we can have something very similar to the NBA Page, only having the same background that we are using and the table could use our bg-glass class, what do you guys think?

Create a layer to our API calls

For now, all of our API calls are being done directly to each page. I think we could 2 things:

• Move all URLs to constants to make it easier to maintain
• Move those calls to another service layer and type it correctly as well

Our project is very simple but it's always good to have better practices as well.

Highlight the winner in a game

For now, there's no highlight to show which team won the game.

Maybe we could add an arrow to show the winner like the official site:

Or maybe dim/opacity a bit like Google does:

CSS fixes on GameCard and Header menu

The GameCard has allways a hover effect, that isn't needed on the game page:

Screen.Recording.2022-03-06.at.22.20.08.mov

---

The header menu has a little flick when hover it:

Screen.Recording.2022-03-06.at.18.36.19.mov

User Profile Page

This includes:

• Show user info (name/avatar/favorite team)
• Mark to allow receive notifications from the team
• Design the page

Bug: Datepicker BG on Firefox

It looks weird on Firefox:

That's most likely because of the blur thing, maybe we should apply a fallback background in order to not have this.

Originally posted by @willianjusten in #58 (comment)