[FE]: Code challenge solution - Duong Phuoc Thinh

[nouu188]

Summary

This PR implements and documents solutions for the first three problems in the code challenge.

What Changed

Problem 1: Sum to N

Added three implementations for calculating the sum from 1 to n:

• Iterative for loop solution with O(n) time complexity.
• Mathematical formula solution with O(1) time complexity.
• Iterative while loop solution with O(n) time complexity.

This demonstrates multiple valid approaches while making the time complexity tradeoff explicit.

Problem 2: Currency Swap Application

Built a React + TypeScript + Vite currency swap UI with a more polished and maintainable implementation.

Key points:

• Implemented a token swap form where users can select source and target currencies, enter an amount, preview the converted value, and submit a
  simulated swap.
• Applied the Apple-inspired visual direction from DESIGN.md: clean layout, quiet UI chrome, pill controls, focused content hierarchy, and a single
  primary blue action color.
• Improved UX with clearer quote information, estimated value, disabled states, loading state, success feedback, token search, icon fallback
  handling, and responsive layout.
• Added full light/dark mode support:
  • System preference is respected on first visit.
  • User preference is persisted in localStorage.
  • A theme toggle is available in the navigation.
  • Theme tokens are applied across the page, swap panel, token fields, dropdowns, summary, and feedback states.
• Refactored the app into a scalable feature-first structure:
  • src/app for app shell, providers, theme, and global styling.
  • src/features/swap for swap-specific components, state, hooks, services, and styles.
  • src/shared for reusable UI primitives, formatting helpers, and asset helpers.
  • src/data for typed token data.
• Moved static token icons into public/assets/tokens and kept TypeScript data in src/data to follow Vite conventions.
• Updated README.md with setup steps, assumptions, architectural decisions, and validation commands.

Problem 3: Wallet Page Code Review

Added a clear README.md explaining the computational inefficiencies, correctness bugs, and React/TypeScript anti-patterns in the provided wallet
component.

Covered issues include:

• Incomplete WalletBalance type.
• Use of any.
• Invalid variable reference in filter logic.
• Incorrect filtering condition for balances.
• Incorrect useMemo dependencies.
• Incomplete sort comparator.
• Unused formattedBalances.
• Incorrect mapped type usage.
• Unnecessary repeated data processing.
• Unstable React keys.
• Possible NaN USD values.
• Unused children.
• Unnecessary React.FC.
• Undefined classes reference.

Also included a refactored version that improves typing, filtering, sorting, formatting, key usage, and derived data handling.