Associate Software Engineer Frontend Assessment

Instructions

1. You are not allowed to push code to this repository. Therefore you are required to create a copy of this repository on your own github account and work / push on it. Hint: Make good use of git clone, git fork, git plugins for vs code etc.

2. How to submit finished assessment? Please send it back to the same email thread where you received this assessment and we will take care of the next steps. Respository on your account must be public for us to access.

3. You have to build the "Interactive Comment Section" and get it looking as close to the design as possible. Also your design should be mobile responsive. Also user can perform tasks which are explained in the Point #4 as well as in the Prototype Video.

• Figma Link: https://www.figma.com/file/gdcGm5P12QnYrtuEJcq6TL/Front-End-Assignment?node-id=3%3A34 (Kindly Login or Create your Figma Account to see the style attributes.)
• Prototype Video: https://drive.google.com/file/d/1d3cAeS9ER7qWzbSmujHDwe23ZmH5G1Vy/preview

3. You can use any framework like (Bootstrap, Tailwind CSS, JavaScript, jQuery, React) of your choice.

4. Tasks which user can perform in this Assessment:

• Add Comment and Replies of a Comment (User have to write comment and then click Submit Icon to Add Comment or Reply)
• Remove his Comment and Replies
• Like and Unlike Comments & Replies (Like count should be updated after Like or Unlike)

Assets

You will find all the required images in the /images folder.

Text written in assessment:

I was very glad to have you after such a long time. Can you plan a meetup? Maybe this weekend?

Home sweet home! I'm glad you are back. It's been two year and miss the football matches we have together. A lot has been changed since you left. Let's meet at the ground tomorrow evening?

Old rivalry! Consider me in ;-)

Hey bud, welcome back to home. It's so long to see you back again. Would love to hear the travelling stories of yours. Your or my place?

Thank you all

Colors

• Black: #000000
• Blue: #6590FF
• Red: #E33E38
• Purple: #8344DB
• Badge Background: #8344DB1A
• Gray Text: #646464
• Body Background: ##EEF2F7
• Input Background: #F8F9FB

Typography

• Family: Poppins (https://fonts.google.com/specimen/Poppins)
• Weight: 300, 500, 700

Icons

For Icons, you can use any of the icon library, or you can also use images given for the icons in the images folder.

• Font Awesome
• IcoMoon
• Ionicons
• Bootstrap Icons