Welcome to the React Coding Challenge!
To complete this challenge, you will need to write a simple React based web app, and provide us the source files to be built.
The purpose of this challenge is to assess your skills and approach to composing a simple web app given a set of screens.
Using the provided screens as a reference, you'll need to build a set of React components to render the app. You'll also need to request a JSON feed, filter that data, and use the relevant fields.
Although this is a basic exercise, we'll be looking for simple, performant, and tested code in the submission.
Click here to look Screens.
Note: Do not focus on the design of given screens its a reference.
You will need to build the following 5 screens with React:
- "Contacts View" screen
- "Add Contact" screen
- "Edit Contact" screen
- "View Contact Details" screen
- "Search Contact" screen
Please create components for each part of the screens (eg. Contacts View, Add/Edit Contact, Contact Detail, etc).
For this page you will need to fetch this JSON sample.json feed
Refer to the Contacts View Screen
- Fetch the Contact list from https://raw.githubusercontent.com/BitcotDev/fresher-machin-test/main/json/sample.json
- Display Contact list
- Click on delete icon it should be remove from contact list in your react state.
Refer to the Add Contact Screen
- You have to create a modal or form for Add Contact.
- Add validation of all the fields.
- After submitting the Contact form then the Contact should be add in the Contact list locally in the state and should be display in Contact list.
Note: Do not use API for add contact. just work on local state of React JS.
Refer to the Edit Contact Screen
- You have to create a modal or form for Edit Contact.
- When I click on Edit icon from the contact list then Edit Modal or form should be open and all the field should be auto fill of contact detail which I selected on Edit icon.
- Add validation of all the fields.
- When user Submitted Edit Contact form then it will be reflected in the contact list.
- Also maintain the validation in edit form.
Refer to the View Contact Details Screen
- You have to create a modal or table for View Contact Details.
- When I click on Eye icon (View icon) from the contact list then View Contact Details Modal or table should be open and all the data should be display.
Refer to the Search Contact Screen
- When I write anything in the search field it should be search by first name, last name and phone number and result shown in the list.
- It is important you follow good programing practices, clean code, good logic with proper comments, naming conventions.
- Write as many functions you require, you must focus on code reusability and avoid repetition of code.
- Create a public git repository on Github
- Repositry name should be your name-bitcot and push code.
- Do not include dependency folder like node_module.
- Once finished kindly submit your Github account repository URL.
- Do not include any Zip file in Email
- Read full instruction before submitting the task.