README.md

A tennis scoreboard by React/Redux / DEMO

A tennis scoreboard UI by React.js

In summer 2017, I went to Rogers cup in Toronto, and I saw the scoreboard that has a very nice UI.

So, that's the reason this project was created. I use React and Redux to reach this project.

Project Structure

• Data Structure
  • Player

  {
      id: 1,
      personal_info: {
          f_name: "Roger",
          l_name: "Federer",
          img_url: "../federer-montreal-2017-friday.jpg",
          national_flag: "../ch.svg",
          nation:"SUI",
          rank: 3,
          age: 36,
          weight: 85,
          height: 185,
          titles: 5,
          "W-L": "35-3",
      },
      point: 0,
      set: [],
      got_set: [],
      server: true,
  },

  • General

  current_point:[0,0],
  current_game:[0,0],
  current_set: 1,
  current_server:0,
  winner: "",

• Components
  • Players Card
  • Score Board
• Actions
  • init_players()
  • give_match()
  • give_set()
  • give_game()
  • give_point()
  • reset_current_score()

References

• Starter - React Slingshot
• Media(pics, video) - ATPworldtour.com
• UI - Rogers cup
  • Atp Finals Tennis Players by Valentino Borghesi

Todo

• Add tie break feature