Frontend Dev Task
🎯 You are required to develop the "Interview Prep" feature for Unimad’s
application using Next.js 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 Next.js 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 unimad.ai 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 unimad.ai 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 Next.js 14, and basic functionality simulation. Good
luck!
Frontend Dev Task 3
