[FE] Coding Challenge - Binh Nguyen Thanh

[ntbinh91]

Overview

Problem 1: Three Ways to Sum to N

Challenge: Implement 3 unique approaches to calculate the sum of all integers from 1 to n.

Solutions Implemented:

• Mathematical Formula (O(1)) - Uses Gauss's formula: n * (n + 1) / 2
• Iterative Loop (O(n)) - Traditional for-loop approach
• Array Reduce (O(n)) - Functional programming style with array methods

Each solution includes:

• Time and space complexity analysis
• Comprehensive test cases (zero, single element, small/medium/large numbers, negative numbers)
• Performance comparison table

---

Problem 2: Currency Swap Application

Challenge: Build a fancy, intuitive cryptocurrency swap form with real-time exchange rates and modern UI/UX.

Key Features:

View Live Demo

• Bidirectional currency conversion with automatic recalculation
• Token selection with icons from Switcheo token repository
• Fetch exchange rates from live API
• Form validation using Zod schemas
• Responsive design with Tailwind CSS and Shadcn UI
• Loading states and toast notifications

Tech Stack:

• React 19 + TypeScript + Vite
• Tailwind CSS + Shadcn UI + Radix UI
• TanStack Query for data fetching
• React Hook Form for form management
• Zod for validation

---

Problem 3: Messy React Code Analysis

Challenge: Identify computational inefficiencies and anti-patterns in a React component, then provide a refactored version.

Analysis Results: 17 issues identified across 5 categories:

• Critical Bugs (4 issues) - Missing type properties, undefined variables, unused arrays, missing definitions
• Logic Errors (1 issue) - Missing return value in sort comparator
• Performance Issues (5 issues) - Unmemoized components, incorrect dependencies, redundant function calls, multiple iterations
• React Anti-Patterns (2 issues) - Using index as key, function redefinition on every render
• TypeScript/Code Quality (5 issues) - Using any type, empty interfaces, redundant annotations, property duplication, missing exports

Each issue includes:

• Problematic code example
• Fixed code with explanation
• Impact assessment
• Recommended solution