Frontend-Junior-Task

This is a Front-end task used in the recruitment process at Forte Digital. This repo is created based on the create-react-app. It consists of a list of participants. It has two pages: ​

1. Participant List page
2. Edit Participant page

To check your Front-end skills please complete two tasks specified in this document and send us zipped repo to an address you have received in the email. Before zipping the repo remember to remove node_modules directory.

To run the development environment please install node: https://nodejs.org/en/download/ and yarn: https://classic.yarnpkg.com/en/docs/install/.

API is implemented using json-server. It's configured to serve the content from the db.json file. For details of json-server please go to https://github.com/typicode/json-server. ​

The rest of the instructions can be found in README in the front-end-task folder.

Remark

We do not expect that you will implement all of the features on your own. You are free to install external libraries. However, you should show us that you can do some styling on your own. Also, try not to over-engineer this task.

Task One - validation of participant editing

You need to work on the Edit Participant page. ​

• Load details of a participant from API (http://localhost:3001/participants/:id) and display it in the form
• Add Missing fields: workStart, workEnd allowing to edit dates
• Make all fields required (name, email, workStart, workEnd)
• Validate if the email is correct
• Validate if workEnd date is after workStart date
• Update participant data in db.json on form submit using API endpoint (PUT http://localhost:3001/participants/:id) ​

Task Two - Page styling and semantic HTML

​ You need to work on both Participant List page and Edit Participant page.

• Change the HTML markup to the more semantic one.
• Style both pages according to the design: https://www.figma.com/file/DNF5oDSn7NTO4Ls1kVkK1K/Task?node-id=1%3A2
• Remember about accessibility