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

Overview

NBA Remix

ci

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
Adeonir Kohl
Flávio Silva
Flávio Silva
Helder Berto
Helder Berto
Willian Justen
Willian Justen
Comments
  • Caching responses

    Caching responses

    For even snappier UX.

    Reference

    pr2

    I don't have a complete understanding of NBA's API and want to see your ideas on this but we could make app/routes/$date route return a long cache for past games, light cache for active games and medium for future games.

    I'll explain my caching decisions on comments through the diff, opinions on it are welcome.

    opened by gustavoguichard 10
  • Feat: Adding

    Feat: Adding "Go to today" button - closes #87

    The feature is mostly working, however, I am trying to fix the bug which occurs when you click a button on the overlay and then click outside the overlay but it remains visible.

    This bug was reported here: https://github.com/gpbl/react-day-picker/issues/723

    opened by Hedg0305 7
  • [IMPROVEMENT] Improve types within routes

    [IMPROVEMENT] Improve types within routes

    Problem

    CleanShot 2022-03-20 at 19 50 13

    When using useLoaderData() hook, we are not receiving strongly typed objects.

    Solution

    CleanShot 2022-03-20 at 19 50 28

    This PR introduces a new type LoaderData which is used in 2 different places within routes:

    • To type the return of the loader function. Plus, we are now using Remix's utility json() to generate a JSON Response;
    • To type the return of the hook useLoaderData().
    opened by vedovelli 4
  • Update revalidation with useFetcher

    Update revalidation with useFetcher

    Hey there 👋, Congrats on the amazing project!

    Context

    I noticed that, specially on mobile devices, the useRevalidateOnInterval will cause a scroll to top behavior as it reloads the page in order to fetch latest data.

    Proposed solution

    I was checking if there is an alternative way of revalidate data on the background, and found useFetcher that seems to fit! So the idea in this MR is to:

    1. Store the data to be shown into an state, and initialize that data with the loader
    2. Set that state with useFetcher data when revalidation begins

    It seems to work, but not entirely sure that it would be the best way. Let me know your thoughts and feel free to ask any change you think appropriate 😃 ! I hope it can be helpful

    Before (interval time 1seg)

    https://user-images.githubusercontent.com/50624358/158805380-6c3e20a2-03ca-41dc-a15e-b81ca66117ad.mov

    After (interval time 1seg)

    https://user-images.githubusercontent.com/50624358/158805463-1cf73e6e-1e57-4535-952c-4a2b80c56dd1.mov

    opened by GuilleAngulo 4
  • Add cookie utils to set and get the favoriteTeam - closes #103

    Add cookie utils to set and get the favoriteTeam - closes #103

    Proposal to #103

    As recommended in Remix Docs Cookies Section, I created the cookie utils inside app/cookies.ts.

    Some questions

    • Should we use a general solution like userPrefs or go for favoriteTeam only?
    • Should this cookie expires? If so, how long is suitable?
    opened by miguelaugl 3
  • feat: adds the ErrorBoundary component to the root file

    feat: adds the ErrorBoundary component to the root file

    Implementation proposal to resolve #73

    Captura de Tela 2022-03-12 às 18 15 35

    Added component to handle errors. I was a little confused about the content to display to the user and also the style. Any suggestions or improvements elsewhere?

    Let me know if I can help with anything else.

    opened by marllonfrizzo 3
  • Add TeamInfo component - closes #35

    Add TeamInfo component - closes #35

    Created a component for the following UI: Screenshot 2022-02-16 at 14 09 20 Screenshot 2022-02-16 at 14 09 29

    I moved the types that are shared into the application to the app/types.ts. What do you think about that?

    closes #39

    enhancement 
    opened by helderberto 3
  • Allow user to favorite their team

    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.

    opened by jonrcrowell 2
  • chore: add padding on arrows

    chore: add padding on arrows

    Increasing the click area

    also add a negative left margin to keep it aligned with the "Games" title

    | Before | After | :-------------------------:|:-------------------------: image | image

    *edges just to visualize the spaces

    opened by alangabrielbs 2
  • Fix bug at Home not showing correct date/games

    Fix bug at Home not showing correct date/games

    Sometimes the game starts in a day but ends in the next day, if we're in the next day already but the game started before, it does not show the results.

    In order to fix this, I'm using the timezone from the games (America/New_York) and creating a "span" of 6h to show the correct games that are happening.

    opened by willianjusten 2
  • Bug: A game that happened already is not showing the results at home

    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

    image

    bug 
    opened by willianjusten 2
  • Create Playoffs Brackets

    Create Playoffs Brackets

    Playoffs are coming and we should create the brackets ladder also! Here's the official brackets:

    https://www.nba.com/standings

    And here is the JSON that we can work on to get the brackets working:

    https://stats.nba.com/stats/playoffbracket?LeagueID=00&SeasonYear=2021&State=0

    help wanted 
    opened by willianjusten 0
  • Create a filter to show games by status

    Create a filter to show games by status

    Description:

    Just an ideia, but I as a user would like to filter homepage games according to their status: not started, in progress and ended.

    Screenshots

    Captura de Tela 2022-03-21 às 13 35 51 Captura de Tela 2022-03-21 às 13 36 03

    enhancement Discussion 
    opened by fsilvaco 0
  • [Discussion] Choose a favorite team - filtering stuff

    [Discussion] Choose a favorite team - filtering stuff

    Intro

    Hey guys, the project is going great, I can see many new changes and contributors, so I think we're good to go to the next step. That would be our MVP 2, which is user creation / favorite team.

    Discussing with @fsilvaco and before with @helderburato and @adeonir, the initial idea was something like using Supabase or any other to create the user and from that, we could have a page to select favorite team and anything else needed after.

    But now, thinking in a "middle step" before that, I think we could work with cookies to set the favorite team, and based on that, we use to filter. With that, it's simple to implement and simple for our users to use, without creating much friction at this beginning.

    Ideas

    Knowing all that above, we need to know:

    How are we going to allow the user to select its favorite team?

    I like the way GloboEsporte does, it has a dropdown to select the favorite team but if the user doesn't do anything, it's fine as well, so it's not intrusive/annoying, like a modal or anything that stops the user to choose their team.

    image

    If you guys have any ideas on how to do it, I'm all ears here =D

    Strategy

    Thinking about how to do it, I can see some steps (and some of them we can start without even having the UI xD)

    • [x] #103
    • [ ] #104
    • [ ] #105
    Discussion 
    opened by willianjusten 2
  • [FEATURE] Player/Team Stats tabs in Game page

    [FEATURE] Player/Team Stats tabs in Game page

    Initial proposal to resolve #46, put team and player stats in tabs functionality, and extend this functionality to standings page.

    I'm using react-tabs for this issue/feature

    image1 image2

    Need some help in styling and TS Typo waning.

    [[ WIP ]]

    Roadmap:

    • [X] Add tabs to players/teams game page (image1)
    • [X] Add tabs to standings page (image2)
    • [X] Tables width inside panels
    • [X] General styling
    • [ ] Mobile Players table width not fit screen
    • [ ] Tab selected and tabs line styling
    • [ ] Storybook entry
    • [ ] Test entry
    • [ ] Warning on use vTeam with TeamPlayerStats type
    • [ ] react-tabs: Warning in Prop id did not match. Server: react-tabs-90 Client: react-tabs-0
    • [ ] Remove comments and unused code
    • [ ] Fixing fail tests from modified components
    opened by grippado 2
Owner
Willian Justen
I'm a software engineer that loves to work with challenging and creative projects.
Willian Justen
Generate sound effects and background music for good old-fashioned mini-games

Generate sound effects and background music for good old-fashioned mini-games

ABA Games 11 Aug 1, 2022
🎮 Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas

?? An easy to use 2D HTML5 game engine written in TypeScript

Excalibur.js 1.2k Nov 25, 2022
Typescript based monte-carlo acyclic graph search algorithm for multiplayer games

Typescript based monte-carlo acyclic graph search algorithm for multiplayer games. It can be used in any turn-based strategic multiplayer games.

null 3 Jul 11, 2022
🟩 in case you want to cheat on your wordle games

Wordle Solver How to use Enter each right guess in the first grid Enter all letters that you know aren't in a certain position in the second grid For

James Zhang 2 Feb 7, 2022
Golf it! is a game designed to let you show off your code-fu by solving problems

Golf it! Golf it! is a game designed to let you show off your code-fu by solving problems in the least number of characters ✨ Explore the docs » View

Ashikka Gupta 5 Aug 18, 2022
WORDLEBOARD prototype: Show your Wordle game on a Vestaboard as you play.

WORDLEBOARD prototype Show your Wordle game on a Vestaboard as you play. Copyright (c) 2022, Scott Schiller. MIT license. Made with love and fun in mi

Scott Schiller 4 Apr 14, 2022
'Neko Mezashi Attack' - a simple but cute action game made with Vite and TypeScript

'Neko Mezashi Attack' is a simple but cute action game made with Vite and TypeScript. This app is packed all resources including style, graphics and audio into 4KB(4096 chars) JS. No runtime libraries or external resources are required.

yuneco 10 Jun 17, 2022
Pig is a simple two player dice game.

Pig game Pig is a simple two player dice game. Play here: formidablae.github.io/pig_game or formaidablae-pig-game.netlify.app Each turn, a player repe

null 10 Oct 5, 2022
A simple wordle solver for Node.js

This is just a weekend project, so take it easy :-) simple-worlde-solver Wordle solver for Node.js. I am aware of other efforts that use greedy algori

Alessandro Toppi 3 Feb 20, 2022
EarthDefender is a simple personal project JS game

EarthDefender is a simple personal project JS game, the goal of it is to stop the meteors from hitting Earth.

Svetoslav Zhekov 2 Jan 25, 2022
A simple electron wrapper for bonk.io, a fun online game

A simple electron wrapper for bonk.io, a fun online game I tend to play a lot. I dunno how useful it'd be for other players, maybe they'd like the fullscreen of it, but it'll probably mostly just be for myself to play around with the source code of the game.

null 3 Feb 16, 2022
A simple Sokoban game made in JavaScript + HTML + CSS

About Sokoban is a puzzle video game genre in which the player pushes crates or boxes around in a warehouse, trying to get them to storage locations.

Juan Manuel Flecha 4 May 24, 2022
Created by Hashlips! In this repository, Hashlips and ScrawnyViking teach you how to create your unique randomly generated NFTs and launch them on to a free Github Domain where people can buy your NFTs from

Thank You HashLips ?? Upgraded and Articulated by ScrawnyViking aka TWECryptoDev All the code in these repos was created and explained by HashLips - P

TomorrowWontExist 15 Oct 23, 2022
Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor

Snake game using pure HTML, CSS and JavaScript with GameBoy look and feel using Nano editor. 100% commented code in Portuguese

Gabriel Martins 2 Jul 2, 2022
Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

Latin Wordle Live Game Here Inspiration Latin Wordle is a free and open-source project that aims to provide a fun and interactive way to learn Latin.

null 16 Jul 1, 2022
Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive A quiz game to learn new knowledge and terms in the field of project management. The key element to the success of this project was the c

LMF 1 May 16, 2022
A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Hannah Park 2.3k Nov 24, 2022
Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks.

Wordle2Townscaper Wordle2Townscaper is meant to convert Wordle tweets into Townscaper houses using yellow and green building blocks. You can download

Tarmo 66 Nov 2, 2022
The Snake Game implemented using HTML, CSS, and JavaScript

The Snake Game implemented using HTML, CSS, and JavaScript

Wissam Fawaz 3 Mar 2, 2022