Skip to content

Guide.md

Latest commit

 

History

History
108 lines (70 loc) · 2.77 KB

Guide.md

File metadata and controls

108 lines (70 loc) · 2.77 KB

🗂️ UX Engineer Take-Home Challenge

Build a Folder Grid in React + TypeScript

🧭 Overview

This challenge is focused on building a responsive Folder Grid interface in React using TypeScript. It's designed to evaluate your skills in component architecture, styling, interaction design, and system-level thinking.

You'll be working in a preconfigured CodeSandbox environment that includes folder data and an icon system. Your task is to design and implement a reusable FolderGrid UI.

⚙️ Instructions

  1. Fork the CodeSandbox and implement your solution.
    • All dependencies and mock data are included—no setup required
  2. Add a short summary in the CodeSandbox description with:
    • Assumptions or decisions you made
    • Anything unfinished (if applicable)
  3. Be prepared to walk us through your approach and code

📁 Provided Files

data.ts

This file contains the mock data for the folder grid:

  • Array of folder objects with properties like id, name, icon, etc.
  • Each folder has a unique identifier and display properties
  • The data structure is fully typed with TypeScript interfaces

theme.ts

This file provides the design system configuration:

  • Color palette and typography settings
  • Spacing and layout constants
  • Animation timing and easing functions
  • Responsive breakpoints
  • Icon system configuration

icon.tsx

This file contains the icon component system:

  • Reusable Icon component with TypeScript props interface
  • Support for different sizes and colors

🎯 Your Task

Implement a responsive FolderGrid component that:

  • Displays a list of folders in a grid layout
  • Shows folder icons and names
  • Supports hover and selection interactions
  • Is fully typed with TypeScript
  • Looks good and functions well across screen sizes

✅ Requirements

Technical

  • React + TypeScript
  • Strong component typing
  • Responsive grid layout (CSS Grid or Flexbox)
  • Clear component structure
  • Clean, maintainable code

UI/UX

  • Intuitive grid layout with visual hierarchy
  • Smooth hover and selection animations
  • Consistent styling using provided icon system
  • Responsive and adaptive layout
  • Sensible loading states
  • Accessibility considerations (roles, focus, keyboard nav if possible)

🧪 How You'll Be Evaluated

Code Quality

  • Type safety and prop typing
  • Component reusability and structure
  • Clean, readable code

UI/UX Craft

  • Responsive and intuitive layout
  • Attention to interaction states and hierarchy
  • Touch support and accessibility

Technical Execution

  • React and TypeScript best practices
  • Performance considerations
  • State management (if needed)

Thanks for taking the time to complete this—we're excited to see your work! Let us know if you have any questions.