⚽ Football Dashboard - React, Redux

• Implementing redux to previous react project; Football Dashboard - React

Table of Contents

• Description
• Previous Versions
• Improvements
• Further Improvements

Description

• Football dashboard is a single-page application that shows up-to-date information about football leagues and teams.
• Used SportDataApi which is not a public api, so error might occur due to the request limit.
• Built with Vanilla JS first, then making improvements using React, Redux.

Previous Versions

• Vanilla JS
• React

Improvements

• App Structure: Split and organized components and scripts by their roles and features, making project more managable.

  • api
  • app: Components to build basic layout
  • features: Components and scripts consisting each feature
    • customs, leagues, matches, players, teams, topScorers
    • each feature has its own 'slice', which is responsible for initializing state, fetching data, exporting actions, handling actions in reducers, exporting selectors.
    • referenced the official tutorial for Redux and usage guide of Redux Toolkit
  • cards: Card component, content detail components
  • others: helper, config

• Keeping states 'normalized', more maintainable way.

// example
{
  leagues: {
    ids: [538, 392],
    entities: {
      392: {
        league_id: 392,
        country_id,
        season_id,
        name: "Serie A",
      },
      538: {
        league_id: 538,
        country_id,
        season_id,
        name: "LaLiga",
      }
    },
    status: "succeeded",
    error: null,
  },

  teams: {
    ids: [4798, 4795, 3511, ] // ... and more
    entities: {
      3511: {
        team_id: 3511,
        short_code: "ATA",
        name: "Atalanta Bergamasca Calcio",
        logo: "https://cdn.sportdataapi.com/images/soccer/teams/100/109.png",
      },
      // ...
    },
    status: "succeeded",
    error: null,
  }
}

• Made components that is directly related to specific data to take responsibility to fetch the data.

  • For example, MainNav component only fetches 'leagues', then its child component TeamMenu fetches all the teams and renders teams of current league.
  • Page components such as LeaguePage, TeamPage doesn't try to fetch league or team data, instead they just render Loader component when data isn't loaded. When data is loaded by nav components, they render card components. Likewise, card components then fetches the detail data concerned.
  • Easier to manage code since each component has clear responsibility for fetching specific data.

• Router

  • In App component

  // omit imports, style
  
  function App() {
    return (
      <div style={style}>
        <BrowserRouter>
          <Sidebar>
            <AppLogo />
            <MainNav />
          </Sidebar>
          <MainDisplay>
            <Switch>
              <Route exact path="/custom" render={() => <CustomPage />} />
              <Route
                exact
                path="/league/:leagueId"
                render={() => <LeaguePage />}
              />
              <Route
                exact
                path="/league/:leagueId/:teamId"
                render={() => <TeamPage />}
              />
              <Route render={() => <div>MainDisplay</div>} />
            </Switch>
          </MainDisplay>
        </BrowserRouter>
      </div>
    );
  }

  • Managed main content display area as routes, used leagueId, teamId as params so that each page component could make use of them.
  • More readable structure, easy to scale when adding new page to the app.
  • *Home page, redirection when invalid path need to be updated.

Further Improvements

• Login functionality
  • keeping custom page settings in an account
  • multiple custom pages, giving page titles each
• Refactor inline-CSS codes using CSS-In-JS libraries such as styled-components