Steps to develop

First step:

• API Tests
• Replicate the pages with static components
• Navigate between pages (react-router-dom)

Second step:

• Split components (styled-components)
• Integration with API (Search players)
• Player positions sections

Third step:

• Drag and Drop
• Tag Input
• Validation (yup and @unform)

Forth step:

• Context API
• Top5 Section
• Most and Less Picked Players

Last step:

• Tests

API

This is the demo version from https://www.api-football.com/ API Key is public on services/api

We can search for most football players

Pages

Problems and Solutions

Validation

Using Yup and reading the documentation it was possible to validate the fields

Layout of football-field

This problem solved using a background image (with the application colors) and setting a style for every player position.

Drag and Drop / TagInput

I needed to review some concepts and see examples, solved by logic in javascript

Store on state

Solved by using API Context and useLocation when user try to edit any team

Responsive layout

Unsolved yet