Scribd
Upload
3 views3 pages

Front-End Developer Assignment

The assignment requires building a responsive React front-end application that replicates a provided Figma design, focusing on pixel accuracy and clean code structure. Key tasks include implementing UI components, ensuring design consistency, and creating a component-based architecture. Deliverables include source code, screenshots of the UI, and an optional live demo.

Uploaded by

saranya.pabs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views3 pages

Front-End Developer Assignment

The assignment requires building a responsive React front-end application that replicates a provided Figma design, focusing on pixel accuracy and clean code structure. Key tasks include implementing UI components, ensuring design consistency, and creating a component-based architecture. Deliverables include source code, screenshots of the UI, and an optional live demo.

Uploaded by

saranya.pabs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Assignment: Build a React UI from Figma Design

Objective

Build a responsive front-end application using React by replicating the


provided Figma design.

This assignment evaluates your ability to:

 Translate design → pixel-accurate UI

 Structure scalable front-end code

 Handle state, components, and interactions

 Deliver clean, maintainable code

Task Overview

Your task is to replicate the two UI designs below in React as


closely as possible, including layout, styling, and basic interactions.

Screen 1: Home screen for Knowledge Base


Screen 2: Pop-up screen when user click on ‘Create New’ button.

Core Requirements

🔹 1. UI Implementation

 Replicate the Figma design with high visual accuracy

 Maintain proper spacing, typography, colors (Primary Color: HEX


#4F46E5 Secondary Color: HEX #1E1B4B), and alignment

 Ensure consistency across components

 ‘Create New’ button must be clickable, rest of the menu bottons /


link can be static (non-clickable)

🔹 2. Component-Based Architecture

 Break the UI into reusable components

o Example: Header, Sidebar, Cards, Buttons, Modals

 Follow a clean folder structure

🔹 3. Code Quality
We will evaluate:

 Code readability and structure

 Reusability of components

 Naming conventions

 Separation of concerns

Tech Stack Guidelines

 Framework: React (preferred with functional components + hooks)

 Styling: Tailwind CSS

Deliverables

Please submit:

1. Source Code (GitHub repo preferred)

2. Screen Shots of the UI developed

3. Live Demo to show the UI in action (optional not mandatory)

You might also like