willianjusten / nba-remix Goto Github PK

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.

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

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

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

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

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

• Excalidraw Sketch

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

This includes:

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

This includes:

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

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

Now:

Proposed:

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.

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.

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)

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

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.

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

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

Originally posted by @willianjusten in #36 (comment)

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

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

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
},

This includes:

• #12
  

• #13

This includes:

• Fetch data to the game summary

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

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.

This includes:

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

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)

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:

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:

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

This includes:

• #10
• #8
• #11

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)

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

But it's showing the time of the game:

This includes:

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

Configure the following steps:

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

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.

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

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.

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

The header menu has a little flick when hover it:

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

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.

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?

Figma

Now we have this shitty code:

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