Front End Developer Assessment Task

Tech Stack - [ React JS/TS ]

IT MUST LOOK EXACTLY LIKE THE FIGMA FILE OR YOU WILL FAIL

S
Use only Tailwind CSS , Axios , React - JS/TS & MockAPI. If you know Express.js, you can use
this instead of React.

E
Use HeadlessUI and Heroicons as well if you need to

IB
If you don’t know Tailwind. There are several good introduction videos from Tailwind between
30min-1hr on YouTube for reference.

TO DO *:
1. Need to build full working Create/Read/Delete using the React-JS or React-TS the
api should connect with the mockapi V
2. Use this for the api integration -> Mockapi.io . You need to set up your APIs in
Mockapi. It is not set up for you.
3. The components should be created as a Reusable Component.
T
4. All styles like Fontsize,FontWeight,Width,Height all should be dynamic , meaning
these need to get sent through props.
A

5. The UI Design should be exactly the same as the FIGMA file sizes
Spacing,Sizing,Color,Padding,Margin etc. The ui should look exactly like a clone of
FIGMA Design.
E

6. For Api integration use axios.

7. The code base should be clean.
R

8. No Unused CODE should be there

9. Use numlock for all date and number related entry fields
10. Error validation needs to be there for the create and the edit part if it's a mandatory
G

field. You can utilize Redux or React hooks for state management and error
handling. Error validation is not provided in the design. Please create your own where
error handling is needed.

Great Vibes Pvt Lmt

 Front End Developer Assessment Task

11. The constant values should be in a separate file and the mutation [api request]
should be maintained in a separate file.
12. For the CSS you need to use only the Tailwind CSS library.

S
Grading criteria for your assessment *:
1. The Grading of your assessment will be strict.

E
2. The UI is needed exactly as FIGMA.
3. All components need to be reusable components.
4. The components should be scalable.

IB
5. Clean Code Base.
6. We will be checking your folder/file structuring.
7. We will be checking for modularity of your code.
8. Must follow best practices for creating and maintaining front end components.

DELIVERING THE ASSIGNMENT *:

V
The below link is the FIGMA Design File for reference.
T
https://www.figma.com/file/FT5SRlxcJSMciFH8pE6MKj/Front-End-Assignment?node-
id=0%3A1&t=gldrhpSo4XyRh0Ta-1
A

Do Not hardcode the style using margin and padding. Use only flexbox.
1. There is a version that already has the exact pixel padding and spacing. This is
done with red and blue lines. Follow this exactly in order to match the spacing
E

and padding requirement.

- The version without the padding and spacing is just for you to see
details that may be hidden.
R

2. Create the step1 and step 2 of the form create function

3. These forms should be in the popup.
4. There needs to be a landing page that should have a create Job button. This button
G

is placed at the top left corner of the page.

Great Vibes Pvt Lmt

 Front End Developer Assessment Task

5. When we click on the button, the popup should open and the popup contains these
two forms for creating the job. This create a job button is not in the Figma design,
you need to add on your own.
6. Once a job is created, the output will be displayed on this same landing page.

S
7. There should be a delete button and an edit pencil for the edit functionality. Both
should be at the top right corner of the created job card for EACH CARD. This is not

E
shown in the screenshot -> you are adding this on your end as it is required for
the full Front end CRUD asked in the assessment.
8. When you click on that specific card’s edit, the values in the form will populate

IB
with the data and you can edit and push save. The changes will be reflected for
that specific card. If you click delete on a specific card, that card will be
deleted.
9. The mandatory fields need to get validated.

the next button.

V
10. When the mandatory field is empty, it should throw an error when they try to click on

11. Once the step 1 has all the mandatory fields entered and they hit next, the step-2
form will appear and that too gets validated.
T
12. In step-2 we have apply type question with a radio button [ Quick Apply / External
Apply ]. Only one selection is allowed. This is a required field.
13. If they select Quick apply / External Apply we will populate that button alone in the
A

fetched card component.

14. When we click on save, we need to give a POST request to MockAPI to save the
E

data.
R
G

Great Vibes Pvt Lmt

 Front End Developer Assessment Task

S
E
IB
V
T
A
E
R
G

Great Vibes Pvt Lmt

 Front End Developer Assessment Task

15. We also need to fetch the data from the Mockapi and populate in this card view
16. When we keep on creating the data it needs to get wrapped up using flex.

S
E
IB
V
T
A
E

17. Create 4 entries. The details entered must be the same as the provided screenshot.
R

The Figma design has both Apply now and external apply buttons displayed-
this is so that you can see there is a difference in the button design. Only one
radio button can be selected in the form. SO just display one button in the
G

output.
18. The data to be mapped from the mockapi.
19. Push your code in the public repository and share the git repository link.

Great Vibes Pvt Lmt

 Front End Developer Assessment Task

20. Host the assignment in Netlify / Surge.sh

S
E
IB
V
T
A
E
R
G

Great Vibes Pvt Lmt