Challenge submission for Front-end position

[vietantran1215]

Overview

This PR includes solutions for three coding challenges: a summation function with multiple implementations, a currency swap form with validation, and a React component refactor.

---

Problem 1: Sum to N - Multiple Implementations

Implemented three approaches to calculate the sum from 1 to n:

1. Recursive Approach (sum_to_n_a)

   • Time complexity: O(n)
   • Space complexity: O(n) due to call stack
   • Handles edge cases (negative numbers, 0, 1)

2. Iterative Approach (sum_to_n_b)

   • Time complexity: O(n)
   • Space complexity: O(1)
   • Uses a for loop to accumulate the sum

3. Mathematical Formula Approach (sum_to_n_c)

   • Time complexity: O(1)
   • Space complexity: O(1)
   • Uses the formula: n * (n + 1) / 2
   • Most efficient implementation

All implementations include proper edge case handling for negative numbers and boundary conditions.

---

Problem 2: Currency Swap Form

Built a currency swap interface with the following features:

Features Implemented

• Bootstrap UI Integration

  • Responsive layout using Bootstrap 5.3.2 (CDN)
  • Neutral color theme (grays, blacks, whites)
  • Card-based design with shadow effects
  • Responsive grid system

• Currency Selection

  • Dynamic currency dropdowns populated from API (https://interview.switcheo.com/prices.json)
  • Currency icons fetched from token API with caching
  • Icons displayed next to currency selects
  • Fallback to currency initials when icons unavailable
  • Icons sized to match input field height

• Real-time Calculations

  • Automatic swap amount calculation: (inputAmount × inputPrice) / outputPrice
  • Updates on currency selection or amount input changes
  • Output amount displayed with 6 decimal precision

• Form Validation

  • Inline validation with error messages
  • OnBlur event handlers for all form fields
  • Validates:
    • Currency selections (both required)
    • Different currencies must be selected
    • Amount must be greater than 0
  • Visual feedback with Bootstrap validation classes (is-valid/is-invalid)
  • Cross-field validation for currency conflicts

• User Experience

  • Bootstrap modal for swap confirmation (replaces browser alerts)
  • Modal displays detailed swap information
  • Smooth transitions and hover effects
  • Accessible form structure with proper ARIA labels

Technical Details

• Vanilla JavaScript (ES6 modules)
• Token icon caching for performance
• Error handling for API failures
• Clean separation of concerns

---

Problem 3: React Component Refactoring

Refactored a React wallet balance component to address inefficiencies and anti-patterns.

Issues Fixed

1. Critical Bugs

   • Fixed undefined variable lhsPriority → balancePriority
   • Corrected inverted filter logic (now filters out zero/negative balances)
   • Completed sort function with proper return for equal priorities

2. Type Safety Improvements

   • Replaced any type with proper string typing
   • Added missing blockchain property to WalletBalance interface
   • Used interface extension for FormattedWalletBalance
   • Implemented type-safe blockchain priority lookup

3. Performance Optimizations

   • Removed unnecessary prices dependency from sortedBalances useMemo
   • Memoized formattedBalances to prevent unnecessary recalculations
   • Optimized sort function using subtraction instead of multiple conditionals

4. React Best Practices

   • Replaced index-based keys with unique currency identifiers
   • Added safe price computation with fallback (|| 0)
   • Improved code organization and readability

5. Code Quality

   • Refactored getPriority function with proper type annotations
   • Used interface extension to reduce code duplication
   • Added TODO comments for future API-side optimizations

Refactored Code Structure

- Proper TypeScript interfaces with extension
- Memoized computations with correct dependencies
- Type-safe blockchain priority mapping
- Safe price calculations with fallbacks
- Unique React keys for list rendering

---

Testing

• Problem 1: All three implementations tested with various inputs including edge cases
• Problem 2: Form validation tested, swap calculations verified, modal functionality confirmed
• Problem 3: Type safety verified, performance improvements validated

---

Files Changed

• src/problem1/index.js - Three sum_to_n implementations
• src/problem2/index.html - Swap form UI with Bootstrap
• src/problem2/script.js - Form logic, validation, and API integration
• src/problem2/style.css - Custom styling with neutral theme
• src/problem3/Refactor.tsx - Refactored React component
• src/problem3/README.md - Documentation of issues and fixes

---

Notes

• All solutions follow best practices and include proper error handling
• Code is well-commented and maintainable
• UI is responsive and accessible
• Performance optimizations applied where applicable