Scribd
Upload
24 views3 pages

Interview Prep Feature Development

Uploaded by

arnabhsinha888
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
24 views3 pages

Interview Prep Feature Development

Uploaded by

arnabhsinha888
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

Frontend Dev Task

🎯 You are required to develop the "Interview Prep" feature for Unimad’s
application using [Link] 14 or later, JavaScript or TypeScript, and
Tailwind CSS. The task involves creating a responsive and functional UI
based on the provided Figma design, structuring reusable components,
and simulating functionality using dummy data.

Task Details:

1. Design Implementation:
Refer to the Figma design for the "Interview Prep" feature: Figma Link.

Replicate the design exactly, including:

Fonts, colors, font weights, text sizes, spacing, margins, and padding.

If Figma’s view-only mode restricts access, copy the design to your own
Figma file to inspect spacing and font sizes.

2. Component Structure:
Build the UI from scratch using [Link] 14 (or later) and Tailwind CSS.

Structure reusable components thoughtfully. Consider what components can


be reused across the website (e.g., sidebar, buttons, modals).

Create a sidebar component with the Unimad logo, placeholder name, and
image. The sidebar should include "Interview Prep" as a submenu under
"Applications."

3. Routing:
Implement the following route structure:

Landing page for interview-prep feat: /uniboard/applications/interview-prep

Frontend Dev Task 1


Sub-routes for other pages within the feature (e.g., interview questions,
review page).

Refer to the existing route structure on [Link] for guidance.

4. Functionality:
Landing Page:

Users should see a "Start New Interview" button.

Clicking the button should open a modal where users can enter:

Role (e.g., Data Manager)

Company (e.g., Google)

Job Description (JD)

Interview Type (e.g., Behavioral, Technical, Screening Call).

Interview Questions Page:

After starting the interview, users should be navigated to a page with 5-10
questions generated by an LLM (simulated using dummy data).

Include a progress bar at the bottom of the page.

Display the interview type (e.g., "Round: Behavioral").

Review Page:

After completing the interview, users should be taken to a review page


where all questions and answers are displayed.

Include a "Recommended Answer" section (blue box) for each question.

Simulate the generation of recommended answers using dummy data.

Evaluation Criteria:
1. Design Accuracy: How closely the implementation matches the Figma design.

2. Component Reusability: How well components are structured for reuse


across the application.

Frontend Dev Task 2


3. Routing and Structure: How effectively the routes and sub-routes are
implemented.

4. Functionality: How well the simulated functionality (e.g., modals, progress


bar, recommended answers) works.

5. Client and Server Components: Appropriate use of client and server


components.

6. Code Quality: Clean, maintainable, and well-commented code.

7. Time Management: Completion within 7 days is preferred, but candidates can


take more time if needed. Finishing sooner is appreciated and carries weight
in evaluation.

Submission Guidelines:
Create a GitHub repository for the project.

Submit the repository link within 7 days (or longer if needed).

You can refer to [Link] for inspiration on design and structure.

Focus on simulating functionality with dummy data rather than integrating a


backend or LLM.

Minimal documentation is required (e.g., code comments). No separate


documentation file is needed as explanations will be part of the interview.

Use JavaScript or TypeScript for the task.

This task will help us evaluate your skills in design implementation, component
structuring, routing, basics of [Link] 14, and basic functionality simulation. Good
luck!

Frontend Dev Task 3

Common questions

Powered by AI

Progress on the interview questions page should be displayed using a progress bar at the bottom of the page. This visual aid helps users track their progress through the list of 5-10 questions generated by the LLM (simulated using dummy data).

The design accuracy in the Frontend Dev Task is evaluated based on how closely the implementation matches the Figma design. This includes replicating fonts, colors, font weights, text sizes, spacing, margins, and padding exactly as specified in the Figma file. The task also suggests inspecting the Figma file for spacing and font sizes if the view-only mode restricts access .

The main components to be included in the sidebar for the 'Interview Prep' feature are the Unimad logo, a placeholder name, and an image. Additionally, the sidebar should feature 'Interview Prep' as a submenu under the broader category 'Applications' .

Using Next.js 14 or a later version is significant for the 'Interview Prep' development task because it utilizes the latest features and improvements of the framework, ensuring that the application is built with the most current tools and updates. This version compatibility can enhance the performance, functionality, and developer experience during the application build .

The 'Recommended Answer' section on the review page should include a blue box displaying simulated recommendations for each interview question. These recommendations are generated using dummy data as specified by the task guidelines .

The Frontend Dev Task emphasizes the use of dummy data instead of integrating a backend or LLM to focus on evaluating the candidate's skills in design implementation, component structuring, routing, and basic functionality simulation. It aims to test the candidate's ability to simulate the necessary functionality for the 'Interview Prep' feature without relying on backend systems or advanced machine learning models, thereby concentrating on frontend competencies .

When developing the 'Interview Prep' feature, components should be structured to promote reusability across the application. This involves identifying elements that can serve multiple purposes, such as sidebars, buttons, and modals, and constructing them as reusable components. The task specifically mentions building a sidebar with the Unimad logo, a placeholder name, and an image, which includes 'Interview Prep' as a submenu under 'Applications'. This thoughtful structuring ensures that components can be effectively reused in different parts of the website .

The expected routing structure for the 'Interview Prep' feature includes a landing page accessible via the path '/uniboard/applications/interview-prep'. Additionally, there should be sub-routes for other pages related to the feature, such as the interview questions page and the review page. The task instructions suggest referring to the existing route structure on unimad.ai for guidance .

The task ensures that candidates manage their time effectively by suggesting a preferred completion window of 7 days, while also allowing for more time if necessary. Finishing sooner is appreciated and carries weight in the evaluation, which subtly encourages candidates to strike a balance between quality and speed in their development process .

The evaluation of component reusability is conducted by assessing how well components are structured for reuse across the application. The task specifically looks at the thoughtful structuring of elements like sidebars, buttons, and modals, determining if these components are effectively reusable in different sections of the website, thus contributing to cohesive design and efficient development .

You might also like