Football Dashboard

this project is based on react.js

Deployment

Libraries used

• scramble (https://www.npmjs.com/package/react-scramble)
• particles (https://www.npmjs.com/package/react-particles-js)
• tparticles (https://www.npmjs.com/package/react-tsparticles)
• material UI (https://material-ui.com/)
• React Router (https://www.npmjs.com/package/react-router)
• react-cookie (https://www.npmjs.com/package/react-cookies)
• axios (https://www.npmjs.com/package/axios)

Some Code Snippets

To build a card to display info of a player

const Player = ({ avatar_url, html_url, login }) => {
  return (
    <article className="card">
      <img src={avatar_url} alt={login} />
      <h4>${login}</h4>
      <p>player stats</p>
    </article>
  );
};

To build collapsible cards

  root: {
    border: "1px solid rgba(0, 0, 0, .125)",
    boxShadow: "none",
    "&:not(:last-child)": {
      borderBottom: 0,
    },
    "&:before": {
      display: "none",
    },
    "&$expanded": {
      margin: "auto",
    },
  },
  expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
  root: {
    backgroundColor: "rgba(0, 0, 0, .03)",
    borderBottom: "1px solid rgba(0, 0, 0, .125)",
    marginBottom: -1,
    minHeight: 56,
    "&$expanded": {
      minHeight: 56,
    },
  },
  content: {
    "&$expanded": {
      margin: "12px 0",
    },
  },
  expanded: {},
})(MuiAccordionSummary);

const AccordionDetails = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2),
  },
}))(MuiAccordionDetails);

to have paper like background

const useStyles = makeStyles((theme) => ({
  paper: {
    display: "flex",
    flexDirection: "column",
    padding: theme.spacing(1),
    overflow: "auto",
    margin: `${theme.spacing(1)}px auto`,
  },
}));

to build Nav

<nav className="navigation">
      <ul className="list">
        <li className="item">
          <NavLink to="/Main" className="item-link">
            Home
          </NavLink>
        </li>
        <li className="item">
          <NavLink to="/League1" className="item-link">
            League1
          </NavLink>
        </li>
        <li className="item">
          <NavLink to="/League2" className="item-link">
            League2
          </NavLink>
        </li>
        <li className="item">
          <NavLink to="/LiveSores" className="item-link">
            LiveSores
          </NavLink>
        </li>
      </ul>
    </nav>

And finally the main page

     <BrowserRouter>
        <Nav />
        <Switch>
          <Route exact path="/main" component={Main} />
          <Route exact path="/League1" component={League1} />
          <Route exact path="/League2" component={League2} />
          <Route exact path="/LiveSores" component={LiveSores} />
        </Switch>
      </BrowserRouter>

Website Layout

the layout is pretty simple and is designed while from a user's point of view. The goal was to make the site easy to navigate through, with a intuitive layout. I tried to implement it best to my abilities in react.

EXPERIENCE

Learnt how to do build websites in react plus some hooks and libraries and let's not forget the sportsmonk API in just one week. This project forced me out of my comfort zone, to learn things by doing (something I'm not really comfortable with but is efficent af.)
Also the kind of libraries one can use with react are beautiful. Made me appreaciate react much more. By installing few libraries, implementing cool effects and syles becomes so much simpler.
The hardest part of this project was no doubt implementing the navbar (no joke, it almost made me cry XD). But I ended up learning about switches, Routers and react router library in react (which makes sooo much sense now), so it was a good run.
Had it not been for this competition I would have learned react so much later in my journey, and I'm thankful to my seniors for speeding up this learning process (and also extending the time for submission XD).