Use this tutorial to build a starter stats dashboard.

• Install and setup json-server package
• Define the data schema for the application
• Get the clean data from FIFA 19 dataset and add it to the json-server db
• Test basic CRUD operations on said dataset via postman/curl

Use the Player Card component(s) to build the home page view.

When no club has been created,

• Hide all the panels in the HomePageView widget on the HomePage
• Hide SquadHub MenuItem in the Sidebar
• Redirect to HomePage if navigating to any other page that may require Club entity to have been created. For instance, the /squadHub route.
• Add Unit Tests.

It should contain the following components -

• Branding (title and optionally logo, left-aligned)
• Search bar to quickly switch to a player's screen (enhance it to search teams too later on)

User Profile section (right-aligned) this can be added as an enhancement later on

Tasks

• Make income and expenditure properties nullable so that they are read-only
• Add a funds property to track a club's total financial wealth at any time. NOTE: this can only be set during club creation. Thereafter, it can transitively be updated when income and expenditure properties are updated via player transfers, shirt sales, etc.
• transferBudget and wageBudget stay as is. But will be derived on the basis of the funds property on the client.

This relates a player entity with their performance in a competition. Competitions are to be represented as constant entities (enum). The data will be distinct across seasons. Seasons can be a property on the match performance entity. We need to implement the following:

• Entity model for the match performance entity
• Endpoint resource (with RAML documentation) to perform basic CRUD operations on it
• Custom endpoint to fetch match performance data when given a player ID and a competition identifier with the following logic:
  • playerId is a path param so unique for a given REST call
  • competition will be a query param to filter through the various match performance entities. If there is no competition query param provided, match performance data is aggregated across all competitions for the given player. Can consider using views to perform the aggregation (enhancement).
  • ENHANCEMENT: season can be a query param as well. If not provided, data will be aggregated across seasons.

• Move HomePageView out of HomePage and into its own view file.
• Design View for display all clubs created by the user (via the Add Club button)
• Once the first club is created, move the button from the center of the page to either the top or the bottom.
• Add a new Route to navigate to a given Club's dashboard view and a new Page to accommodate that view.
• Link each club in the new widget to the Club's dashboard view.
• Update hiding logic for club-related menu items to show only when a given club is loaded in.

It should contain the following components -

• List group consisting of -
  • List Item with Icons
  • Sub-Lists nested under a top-level list item
• Settings Section (bottom aligned)

Behavior -

• Each list group is a collection of similar data and views.
• Each list item navigates to a new view on the dashboard when the user clicks on it.
• The side-bar is can be collapsed to a view with just icons representing each list item visible.
• The user should be taken to the settings view when clicking on the settings button.

Tasks

• Create a service class for club resource and move business logic inside it
• Create a data provider for club related tests
• Update tests for resource class and add tests for service class by leveraging the test data provider
• Update player creation logic to use the club service instead of the club DAO

• Add SignIn and SignUp form components.
• Mock server behavior for auth flow via DashboardClient methods and json-server
• Handle auth flows like creating a new account, authenticating a user when logging in, and logging out the user
• Hide main application if there is no authenticated user. Show auth forms instead.

• Table Container with the following columns (to start with):

  • Name
  • Nationality
  • Role/Position
  • Wages
  • Form Histogram (last 5 matches)
  • Morale Indicator
  • OVR

• Dropdown menu to filter rows (for instance, filter to show only Midfielders)

• Dropdown menu to pick a subset of columns to display

• Use the new Args format for all the stories in order to easily leverage the Controls and Actions addons.

Tasks

• Create a separate model for data to be returned from this endpoint with a subset of the data to be found on a Club entity. Just need the club name and created_date properties. (and club crest URL when that is implemented)
• Update client UI to display the created date on the tiles for each club.

• Update the squadhub client endpoint to use the current club id instead of the hard-coded one
• Inject Add Player widget into the squad hub view by composing the PageAction and DialogForm widgets. Use a skeleton form with basic player detail fields as placeholder for the dialog form.
• Add Unit tests.

• Install and set up react-redux package
• Wrap the application in a Provider component and use the Redux Hooks from here to create the application state.
• Pull in the SquadHub view into its container component (page) using the hooks

• Design form for adding new Club entity. Add story and data generator for it.
• Leverage the useForm hook to encapsulate business logic for managing it.

Tasks

• Remove the Transfer Budget and Wage Budget fields in the form and in tests (if any)
• Add a Manager Funds field in the form.
• Add a slider element in the form to determine transfer and wage budget break up. Set their values on the basis of the percentage break up before posting the data to the server.

This will consist of a container with two polar plots overlaid on each other, with the attribute groups as the legend.

Check if we can make the apex charts fit the parent div instead of having a fixed size that is causing overflows. Use AttributeTable as a guinea pig.

• Add api documentation for resource involving club entity
• Add models for club entity
• Add DAO methods for working with the club data
• Add resource for doing CRUD operations on the club entity
• Add /players endpoint to get player data for all players in a club (to be displayed on squad hub page)
• Add UTs

This can be its own component but will be displayed similar to a list item (looped over). It will consist of the following

• label for the attribute being charted
• styling to allow it to be highlighted
• flag to indicate if it should be highlighted

Update client code to switch over from json-server to using the server's (Java) REST API for -

• User creation and authentication endpoints
• Club and squad hub endpoints
• Player data endpoints

• Update the SquadHubTable's cells that hold the player names to link to the player's home page using react-router-dom.

This will consist of the following -

• a list of Diverging Bar Charts (one for each in-game attribute)
• pass a flag down toe the Diverging Bar Chart items for the selected attributes which need to be highlighted

Use the MDX format to add documentation to the stories created so far.

Add a new resource for managing player data on the backend with the following endpoints:

• Create player data
• Update player data
• Remove player data
• Fetch player data

Tasks

• Test if try-catch block with DocumentNotFoundException works when couchbase document is not found in the cluster
• If it works, leverage it to return a 404 not found response.

• A dropdown to a select a role to focus on
• Divided into columns for each attribute group
• Each cell has the attribute name, attribute value and an indicator for attribute progress (incr/decr/same)
• A flag to highlight specific attributes in each for a specific role

This will consist of the Polar Plot and the composite with the Diverging Bar Charts. Along with that, it will also include -

• a toggle to switch between the Diverging Bar Chart and Polar Plot
• two Filters: one to select the player to compare against and one to select attributes to highlight

• Use the Sidebar and MenuItems widgets to setup the layout of the app.
• Inject react-router into the app and link to a couple of the created views (Home and Match Performance)
• (Optional) Add MUI theming to the app as well.

• Rename to something more appropriate like ClubView.
• Remove fake data generators and usages wherever possible.
• Add client for fetching club data.
• Populate panels with club data. If any panel requires more, plug the Add <Entity> widget (built in #) into that panel.
• Add Unit Tests (maybe snapshot tests).

• Match performance table composite
• Line chart/histogram to capture overall match rating in the season

• Write clients to fetch the player, club and match data from the server (json-server for now)
• Add tests to make sure the client methods work as expected.

• Design Add Club button inside a widget (re-use it when doing the same for Home Page dashboard panels)
• Update HomePageView to show the aforementioned widget when no club has been created and tie the Add Club form to it.
• Add client for hitting server endpoint for creating Club.
• Investigate if useQuery can be used for managing this flow.
• Add Unit Tests.

NOTE: Remember to remove the hard-coded team name title in the AppBarMenu component. Use the club name returned in the club GET call.

The form should have one step for:

• player metadata
• player attributes
  • attribute categories
  • attribute groups

Integrate this form with the Add Player widget and verify player creation works. Add Unit tests wherever possible.

Note: If there are any compatibility issues with the server, create a ticket for the server if changes are needed on that end.

• Line Chart to show player attributes
• Line Chart to show player progress
• Player attributes table
• A toggle to switch between player attributes and player progress (OVR) section
• Dropdown to select role which filters the attributes being highlighted in the table and which data points are displayed in the chart

Inject a chart (FusionCharts or chart.js) into a material-ui card. Consider the following

• Define Proptypes to be extendable for different chart types

When creating a player, the match performance data will not be entered by the user. Instead, they can move to the MatchPerformance view which will show a "No data..." heading with an Add button. Also, a form for adding the match performance data for the given player. The user is allowed to submit the form without making any entries (zero for all values). Thereafter, the flow will work out of the box. Add UTs.

• Table to display match stats for the player
• A dropdown with the column names as checkboxes to filter the table view