0% found this document useful (0 votes)
25 views2 pages

New Frontend 2 Assignment

Uploaded by

Akbar Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views2 pages

New Frontend 2 Assignment

Uploaded by

Akbar Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Frontend Assignment

When writing code do not worry about the browser inconsistencies.

Some guidelines:
1. This project is to be built in React.
2. Be sure to share code on github/gitbucket.
3. Make sure the assignment is hosted.
4. Focus on primary points first, without primary points optional isn’t countable. All the
optional is just for extra points and not mandatory.
5. Make sure all best practices are followed.
6. Feel free to mock the data.

Create “React” working structure of below design

Functionality details:

1. TextField: Add new ‘friend’ in the list with the <Name> typed in input on ENTER.
2. Adjust a search bar for searching friends in this current design. (Avoid using any search
library).
3. Favourite & Delete button functionality. Users should be able to sort the list with
favourites on top.
4. Add pagination support to the list when there are more than 4 entries.
5. Be sure to add all appropriate validations in place.
6. Keep in mind UX/UI while designing different states.

Optional:
1. Add Unit tests with your preferred tool (jest, mocha)
2. Add a confirmation box before deleting a friend.
3. JAZZ UP the design! :P - (Bonus points)

Final Submission:
- Share a Github/Bitbucket/Gitlab link of your code
- Share a link where you host your assignment

You might also like