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
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)

Mobile app that lets you search for games. Using IGDB and built with Expo (React Native). game-search-expo.mp4 Try it out with Expo: https://expo.io/@

Nuno Góis 14 Sep 6, 2022
Game-creator - The app with authentication and ability to create different type of games

Backend: mongDB nodeJS Frontend: pug for JSX stylus react native adaptive design

Pavel 3 Feb 19, 2022
React Hangman Games App

nuflakbrr-hangman.vercel.app Create React Hangman Games App. Authors Contributors names and contact info Naufal Akbar Nugroho @kbrnugroho Version Hist

Naufal Akbar Nugroho 2 Feb 10, 2022
A family of tools to help build performant and beautiful apps, games and sites for the web

SUPER DUPER ALPHA vinxi A family of tools to help build performant and beautiful apps, games and sites for the web turborepo kitchen sink starter This

null 23 Sep 9, 2022
Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

Bored Room - a web platform designed for people to play modern board games online with friends and strangers both asynchronously and in real time

null 1 May 8, 2022
A Native GUI Epic Games Launcher for Linux, Windows and Mac.

Heroic Games Launcher Heroic is an Open Source Game Launcher for Linux, Windows and MacOS (Limited to Windows games using Wine/Crossover). Right now i

Heroic Games 4k Oct 4, 2022
A catalog of games, using Typescript, ReactJs And Redux

Game Catalog Sobre o Projeto Um catalogo de jogos,utilizando as tecnologias Typescript, ReactJs Redux, Html e Css. Layout Como executar o projeto # cl

Tulio Moreira 1 Jan 13, 2022
Roll some six-sided dice for games that ask you to roll too many dice.

Roll some six-sided dice for games that ask you to roll too many dice.

S. B. Immington 1 Oct 26, 2021
Review Games Website Built With React

Review Games Projeto de estudo que empresas podem se cadastrar e adicionar jogos para mostrar a usuarios, e usuarios podem dar estrelas para cada jogo

Lucas Santos Ribeiro 1 Nov 19, 2021
Crypto-Expence-Tracker: keep an eye on the top trends on the market, crypto prices, and all their details

The crypto is a capstone built with React/redux, SASS, and the coinbase API. It helps them to keep an eye on the top trends on the market, crypto prices, and all their details.

Kandy Peter Kamuntu 7 Mar 21, 2022
A web application that uses the Studio Ghibli API to provide an index of their films and details so you can choose your favorite to watch

Studio Ghibli Films A web application that uses the Studio Ghibli API to provide an index of their films and details so you can choose your favorite t

Melanie Arellano 6 Aug 11, 2022
The Country-stats is a a React, Redux application based on the Countries details

This web application is build with react and provides statistical insights on Countries around the world and there continents. The application allows users to filter through the information by different continents and countries..

Nicholas Emmanuel 5 Sep 1, 2022
A Recipe App that lets you search for recipes and also show you some in the homepage

if you just want to run it locally without specifications, you can go to the How to run it locally section What is this App about? It's a Recipe App t

Nicholas 5 Jul 17, 2022
"The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book

Bookstore "The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book Built

Rwubakwanayo Olivier 2 Jun 12, 2022
Bookstore is a react web app built to show collections of books

Bookstore is a react web app built to show collections of books, and give users access to add new books or remove existing book

divine charlotte 11 Sep 21, 2022
Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet connexion

Welcome to offline-map-react ?? Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet con

Eduardo Fernandes 5 Jul 29, 2022
Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Hackrack 5 Jul 30, 2022
A catalogue of characters from the Infamous Adult Swim hit show Final Space.

Final-Space-React-Redux A mobile Web Application Hub for getting cool details on characters from the Adult swim show Final space. Built With React JSX

Iyadi Cyril 8 Mar 29, 2022
Ecommerce shopping cart to show my products By React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Abdallah Elmesery 1 Nov 26, 2021