Frontend candidate technical interview project
Thank you for your interest in joining Espressive! We wanted to make our technical interview fun so you will be turning this football team builder into a working application.
We're prodiving you with a head start with this web app that already includes most of the UI components that you'll need, as well as the basic structure of a redux application.
Your job is to complete this web app with the tasks outlined below. Each of these are in the Tasks section at the top of the document so it is easier keep track of them and make sure you complete them all before submitting your branch.
It will probably be helpful to you to read all of these instructions before you get started.
- Create a new component called
ListLoading
, which will replace the repeated loading state markup in thePlayerList
andPlayerSelectModal
components. - Connect the
Formation
component to load the initial data for the player numbers and their position from the/api/v1/team_selection
API endpoint - Set up the
Formation
component to allow removing and adding players to theteam_selection
with aPOST
of these changes to the/api/v1/team_selection
API endpoint. - Update the
PlayerSelectModal
to only assign players to a row based on position. For each position only the number of players designated in the formation can be used. For instance, in a 4-4-2 formation, only 4 defenders should be allowed, along with 4 midfielders and 3 forwards. There's always 11 players in the team selection, so a player cannot play in two different positions. - Connect the
PlayerDetail
component to the API to show data from the currently selected player based on theplayerID
. You should always make the call to the API, to make sure you have loaded the latest available data for that player. - Update the
PlayerDetail
component to allow editing the player position. Once changed, the player is elegible to be selected in such position.
Extra credit (not required):
- Add some unit tests.
To get started on this test, please follow these steps:
- Clone this repository to your local machine and then make your own working branch. Please do not fork.
- If you do not already have it installed, download and install
node
- If you do not already have it installed, install
yarn
- In the project directory run
yarn install
- Then run
yarn dev
Once you run this last step you will see the project open in your default browser!
Once you have completed all of the items in the Tasks section, commit and push all of your work to your branch and send us an email to let us know it is complete and you are ready for us to look at it.
You may need to consult documentation on the following projects in order to complete this test:
Additional packages are used in this project but are probably not something you'll need to reference. See the package.json
file for more information on other packages used if needed.
These are the available team formations. Returns an array of strings.
A list of all available players. Returns an array of objects.
Passing a player ID to the players
endpoint will return you the information for that player.
The team_selection
endpoint will return the currently selected team separated into four arrays:
forwards
midfielders
defenders
keeper
After cloning the repository, your file structure should look like this:
esp-fe-test/
data/
node_modules/
public/
img/
index.html
favicon.ico
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
.eslintrc
.gitignore
package.json
yarn.lock
README.md
This is the folder you will be working in. You should not need to touch files in any other folder for this test. Webpack compiles all of these files and creates the application.
Leave this folder alone it holds database files for the API. You do not need to open it or edit them.
You do not need to edit any of these files. These are served when your development environment starts.
In the project directory, you can run:
Runs yarn data
and yarn start
at the same time to start the API and development servers. You should not need to run any of the other scripts below for this test.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Runs the test API and serves the API endpoints and application data. You should not need to modify this script. This API is run with json-server
.
The routes and a proxy have been set up so you do not need to make API calls on a different port.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.