FRONTEND CODE
ASSESSMENT
Create a simple Flutter application using the two endpoints below that allows a user to
build an F1 Fantasy team.
The Players Endpoint
https://fantasy-stage-api.formula1.com/partner_games/f1/players
This endpoint lists the available players (drivers/constructors) that a user can choose from.
The Teams Endpoint
https://fantasy-stage-api.formula1.com/partner_games/f1/teams
This endpoint lists the Formula 1 teams associated with the players and can be used to link players to their
team in order to display their team name in the UI.
Design File
https://xd.adobe.com/view/f7165017-6adb-47b2-b7b9-cf9c313865e0-a245/
The Adobe XD design file includes all screens relevant to the assessment. The application should contain
all information visible in the design file - being as loyal as possible to the designs will be viewed favourably,
with any animations or micro-transitions being a bonus.
Application Description
you should create and use at least two models: Player and Team
the application should have two root screens and a navigation/routing system
you can use the same navigation system for all devices or create one for each device type (desktop,
tablet and mobile). A strong navigation/routing system implementation will be viewed favourably
you should fetch the data using pure Dart APIs
you can create a persistent and cache system using Moor: https://github.com/simolus3/moor/ -
this is not required but will be a bonus
Teams
the first screen is called Teams, which is where each user’s teams populate once they have created
them
the first time flow shows only a Create Team button as per the design file
once the user clicks the Create Team button, a random team must be created and added to the
interface
each user can create a maximum of 3 teams
each team must contain 5x drivers and 1x constructor
each team has a budget limit of 100 to spend on their 5x drivers and 1x constructor
the team card should contain 4x actions within the more menu in the bottom right of the card:
Rename, which allows the user to rename their team as per the design file;
Recreate, which automatically creates a new selection of players in the team;
Replicate, which automatically replicates the current team into the next available team slot;
Delete, which allows the user to delete the team;
clicking on a player slot should result in the opening of the player modal, as per the design file
1/2
Players
the second screen is called Players, which contains a list with all the players present
clicking on a list row should result in the opening of the player modal
the player list should have some control to filter by the position of the player
the player list should show how many players the list contains
the player list having a search function would be a bonus
the player list having a sort function by name, price, points, etc would be a bonus
Note
clean code, adhering to the community standards and Dart and Flutter conventions is expected;
some code coverage is required - it is not necessary to have 100% code coverage, but the more
code coverage the better;
You can use the following dependencies in your assessment:
bloc
flutter_bloc
provider
hydrated_bloc
moor
cached_network_image
Feel free to use other dependencies if the functionality you want to deliver is not covered by the above
dependencies.
Once completed, please make a webapp version of your work available on any platform you are familiar
with and send us a link to the application and the source repository so we can review. A compiled Mac
version of your work will be a bonus, but is not required.
We look forward to reviewing your code assessment,
The PlayON Team
2/2
Official Partner of:
