Skip to main content

Coding Challenges

// Implement a search component with:
// - Debounced API calls
// - Loading state
// - Cancel pending requests
// - Error handling
// - Empty state
// - Highlight matching terms

function DebouncedSearch() {
  // Your implementation
}

Challenge 2: Infinite Scroll​

// Implement infinite scrolling:
// - Load more on scroll
// - Loading indicator
// - Error handling
// - No duplicate items
// - Reset on filter change

function InfiniteList({ fetchItems }) {
  // Your implementation
}

Challenge 3: Optimistic UI Updates​

// Implement optimistic updates:
// - Update UI immediately
// - Revert on error
// - Show pending state
// - Handle race conditions

function TodoList() {
  // Your implementation
}

Challenge 4: Form with Validation​

// Build a multi-step form with:
// - Field validation
// - Cross-field validation
// - Show errors on blur
// - Disable next if invalid
// - Progress indicator

function MultiStepForm() {
  // Your implementation
}

Challenge 5: Real-time Collaboration​

// Implement collaborative editing:
// - WebSocket connection
// - Show online users
// - Live cursor positions
// - Conflict resolution

function CollaborativeEditor() {
  // Your implementation
}

Challenge 6: Undo/Redo Functionality​

// Implement undo/redo for state:
// - Track state history
// - Undo to previous state
// - Redo to next state
// - Keyboard shortcuts
// - Limit history size

function useUndoRedo(initialState) {
  // Your implementation
}

Challenge 7: Virtual Keyboard​

// Build an on-screen keyboard:
// - Click to type
// - Shift/Caps lock
// - Special characters
// - Backspace/Enter
// - Cursor position

function VirtualKeyboard({ onInput }) {
  // Your implementation
}

Challenge 8: Drag and Drop Kanban​

// Create a kanban board with:
// - Drag cards between columns
// - Reorder within column
// - Add/edit/delete cards
// - Persist order
// - Keyboard accessible

function KanbanBoard() {
  // Your implementation
}

Challenge 9: Autocomplete with Highlighting​

// Build autocomplete component:
// - Fetch suggestions on type
// - Highlight matching text
// - Keyboard navigation
// - Select on click/enter
// - Debounced API calls

function Autocomplete({ fetchSuggestions }) {
  // Your implementation
}

Challenge 10: File Upload with Progress​

// Implement file uploader:
// - Multiple file upload
// - Progress bars
// - Cancel upload
// - Drag and drop
// - File validation
// - Preview images

function FileUploader() {
  // Your implementation
}

Evaluation Criteria​

Each challenge will be evaluated on:

  • Functionality (40%) - Does it work?
  • Code Quality (30%) - Clean, readable code
  • Edge Cases (20%) - Handle errors, empty states
  • Performance (10%) - Optimized rendering

Time Limit​

  • Each challenge: 30-45 minutes
  • Complete all: 6-8 hours total