README.md

⚽ Football Dashboard - React

• Rebuilding Football Dashboard in react.

Table of Contents

• Description
• Other Versions
• Live Demo
• Improvements
• To Be Updated

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.
• Made as a personal project to improve understanding in React.

Other Versions

• Vanilla JS
• React + Redux

Live Demo

• https://football-dashboard-react.netlify.app/

Improvements

• Render logic

  • Vanilla JS (Before): Explicitly rendered placeholders on click, get data from model, then called each commponents' render method.
  • React (Now): Managed currentLeague(Team), (data), (data)Status and more as state, rendered when state changes.
  • Lots of responsibilities(and codes) in App.js split to page components, each cards.

• Router

  • Used react-router-dom
  • Descriptive URL
  • Created 'page components'; Readable composition structure in App.js
  
  

  return (
    <div className="app">
      <Sidebar>
        <MainLogo />
        <MainNav />
      </Sidebar>
      <MainDisplay>
        <Switch>
          <Route path="/custom">
            <Custom />
          </Route>
          <Route path="/league/:leagueName">
            <League />
          </Route>
          <Route path="/team/:leagueName/:teamName">
            <Team />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </MainDisplay>
    </div>
  );

• Used semantic ui for more readable, clear UI.

  • Before
  • Now

• Changed directory structure; Less nested, based on each component's functionalities.

To be updated

• Mobile View
• Redux