[FE] Coding Challenge - Binh Nguyen Thanh

.gitignore

@@ -0,0 +1 @@
+.DS_Store

readme.md

@@ -1,10 +1,113 @@
-# 99Tech Code Challenge #1 #
+# 99Tech Code Challenge #1
 
-Note that if you fork this repository, your responses may be publicly linked to this repo.  
-Please submit your application along with the solutions attached or linked.   
+This repository contains solutions to three problems from the Frontend Developer position code challenge.
 
-It is important that you minimally attempt the problems, even if you do not arrive at a working solution.
+## Overview
 
-## Submission ##
-You can either provide a link to an online repository, attach the solution in your application, or whichever method you prefer.
-We're cool as long as we can view your solution without any pain.
+### Problem 1: Three Ways to Sum to N
+
+**Challenge**: Implement 3 unique approaches to calculate the sum of all integers from 1 to n.
+
+**Location**: [src/problem1/](src/problem1/)
+
+**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
+
+**Files**:
+
+- [PROBLEM.md](src/problem1/PROBLEM.md) - Problem statement
+- [SOLUTION.md](src/problem1/SOLUTION.md) - Detailed solution analysis
+- [sum_to_n.js](src/problem1/sum_to_n.js) - Implementation with test cases
+
+---
+
+### Problem 2: Currency Swap Application
+
+**Challenge**: Build a fancy, intuitive cryptocurrency swap form with exchange rates and modern UI/UX.
+
+**Location**: [src/problem2/](src/problem2/)
+
+**Key Features**:
+
+![Currency Swap Application](src/problem2/screenshots/app-screenshot.png)
+
+**[View Live Demo](https://code-challenge-mu-lime.vercel.app)**
+
+- Bidirectional currency conversion with automatic recalculation
+- Token selection with icons from Switcheo token repository
+- Fetch prices 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
+
+**Files**:
+
+- [PROBLEM.md](src/problem2/PROBLEM.md) - Original requirements
+- [README.md](src/problem2/README.md) - Detailed documentation
+
+---
+
+### Problem 3: Messy React Code Analysis
+
+**Challenge**: Identify computational inefficiencies and anti-patterns in a React component, then provide a refactored version.
+
+**Location**: [src/problem3/](src/problem3/)
+
+**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
+
+**Files**:
+
+- [PROBLEM.md](src/problem3/PROBLEM.md) - Original messy code
+- [SOLUTION.md](src/problem3/SOLUTION.md) - Comprehensive analysis and refactored code
+
+---
+
+## Repository Structure
+
+```
+99tech-code-challenge/
+├── src/
+│   ├── problem1/           # Algorithm implementations
+│   │   ├── PROBLEM.md
+│   │   ├── SOLUTION.md
+│   │   └── sum_to_n.js
+│   ├── problem2/           # React application
+│   │   ├── src/
+│   │   ├── PROBLEM.md
+│   │   ├── README.md
+│   │   └── [React app files]
+│   └── problem3/           # Code review and refactoring
+│       ├── PROBLEM.md
+│       └── SOLUTION.md
+└── readme.md
+```

src/problem1/PROBLEM.md

@@ -0,0 +1,23 @@
+# Problem 1: Three ways to sum to n
+
+Provide 3 unique implementations of the following function in JavaScript.
+
+**Input**: `n` - any integer
+
+_Assuming this input will always produce a result lesser than `Number.MAX_SAFE_INTEGER`_.
+
+**Output**: `return` - summation to `n`, i.e. `sum_to_n(5) === 1 + 2 + 3 + 4 + 5 === 15`.
+
+```jsx
+var sum_to_n_a = function (n) {
+  // your code here
+};
+
+var sum_to_n_b = function (n) {
+  // your code here
+};
+
+var sum_to_n_c = function (n) {
+  // your code here
+};
+```

src/problem1/SOLUTION.md

@@ -0,0 +1,100 @@
+# Problem 1: Three ways to sum to n
+
+## Problem Description
+
+Provide 3 unique implementations of a function that computes the sum of all integers from 1 to n.
+
+## Solutions Overview
+
+### Solution A: Mathematical Formula (Gauss's Formula)
+
+Uses the arithmetic series sum formula: `n * (n + 1) / 2`
+
+```javascript
+var sum_to_n_a = function (n) {
+  if (n <= 0) return 0;
+  return (n * (n + 1)) / 2;
+};
+```
+
+### Solution B: Iterative Approach
+
+Uses a for-loop to sum all numbers from 1 to n
+
+```javascript
+var sum_to_n_b = function (n) {
+  if (n <= 0) return 0;
+  let sum = 0;
+  for (let i = 1; i <= n; i++) {
+    sum += i;
+  }
+  return sum;
+};
+```
+
+### Solution C: Array Reduce Approach
+
+Creates an array from 1 to n and uses reduce to sum all elements
+
+```javascript
+var sum_to_n_c = function (n) {
+  if (n <= 0) return 0;
+  return Array.from({ length: n }, (_, i) => i + 1).reduce(
+    (acc, curr) => acc + curr,
+    0
+  );
+};
+```
+
+## Comparison Table
+
+| Solution | Approach             | Time Complexity                                 | Space Complexity                                    | Pros                                                                        | Cons                                                                                        |
+| -------- | -------------------- | ----------------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| **A**    | Mathematical Formula | O(1) - constant time, single calculation        | O(1) - no additional memory used                    | • Fastest execution<br>• Constant time and space<br>• No loops or recursion | • Requires knowledge of formula<br>• Less intuitive                                         |
+| **B**    | Iterative Loop       | O(n) - linear time, iterates n times            | O(1) - only uses a single variable for accumulation | • Easy to understand<br>• Minimal memory usage                              | • Linear time complexity<br>• Slower for large n                                            |
+| **C**    | Array Reduce         | O(n) - linear time, iterates through n elements | O(n) - creates an array of size n                   | • Functional programming style                                              | • Creates temporary array which causes higher memory usage<br>• Slower than other solutions |
+
+## Testing
+
+Implemented 6 test cases with following `n` values:
+
+- Test Case 1 - Zero: `n = 0`
+- Test Case 2 - Single element: `n = 1`
+- Test Case 3 - Small positive number: `n = 5`
+- Test Case 4 - Medium positive number: `n = 100`
+- Test Case 5 - Big positive number: `n = 1000`
+- Test Case 6 - Negative number: `n = -3`
+
+Test results:
+
+```javascript
+Test Case 1 - Zero: n = 0. Expected result: 0
+  sum_to_n_a(0): 0
+  sum_to_n_b(0): 0
+  sum_to_n_c(0): 0
+
+Test Case 2 - Single element: n = 1. Expected result: 1
+  sum_to_n_a(1): 1
+  sum_to_n_b(1): 1
+  sum_to_n_c(1): 1
+
+Test Case 3 - Small positive number: n = 5. Expected result: 15
+  sum_to_n_a(5): 15
+  sum_to_n_b(5): 15
+  sum_to_n_c(5): 15
+
+Test Case 4 - Medium positive number: n = 100. Expected result: 5050
+  sum_to_n_a(100): 5050
+  sum_to_n_b(100): 5050
+  sum_to_n_c(100): 5050
+
+Test Case 5 - Big positive number: n = 1000. Expected result: 500500
+  sum_to_n_a(1000): 500500
+  sum_to_n_b(1000): 500500
+  sum_to_n_c(1000): 500500
+
+Test Case 6 - Negative number: n = -3. Expected result: 0
+  sum_to_n_a(-3): 0
+  sum_to_n_b(-3): 0
+  sum_to_n_c(-3): 0
+```

src/problem1/sum_to_n.js

@@ -0,0 +1,64 @@
+/**
+ * Solution A
+ */
+var sum_to_n_a = function(n) {
+    if (n <= 0) return 0;
+    return n * (n + 1) / 2;
+};
+
+/**
+ * Solution B
+ */
+var sum_to_n_b = function(n) {
+    if (n <= 0) return 0;
+    let sum = 0;
+    for (let i = 1; i <= n; i++) {
+        sum += i;
+    }
+    return sum;
+};
+
+/**
+ * Solution C
+ */
+var sum_to_n_c = function(n) {
+    if (n <= 0) return 0;
+    return Array.from({ length: n }, (_, i) => i + 1).reduce((acc, curr) => acc + curr, 0);
+};
+
+// Test Cases
+console.log("Test Case 1 - Zero: n = 0. Expected result: 0");
+console.log("  sum_to_n_a(0):", sum_to_n_a(0));
+console.log("  sum_to_n_b(0):", sum_to_n_b(0));
+console.log("  sum_to_n_c(0):", sum_to_n_c(0));
+console.log();
+
+console.log("Test Case 2 - Single element: n = 1. Expected result: 1");
+console.log("  sum_to_n_a(1):", sum_to_n_a(1));
+console.log("  sum_to_n_b(1):", sum_to_n_b(1));
+console.log("  sum_to_n_c(1):", sum_to_n_c(1));
+console.log();
+
+console.log("Test Case 3 - Small positive number: n = 5. Expected result: 15");
+console.log("  sum_to_n_a(5):", sum_to_n_a(5));
+console.log("  sum_to_n_b(5):", sum_to_n_b(5));
+console.log("  sum_to_n_c(5):", sum_to_n_c(5));
+console.log();
+
+console.log("Test Case 4 - Medium positive number: n = 100. Expected result: 5050");
+console.log("  sum_to_n_a(100):", sum_to_n_a(100));
+console.log("  sum_to_n_b(100):", sum_to_n_b(100));
+console.log("  sum_to_n_c(100):", sum_to_n_c(100));
+console.log();
+
+console.log("Test Case 5 - Big positive number: n = 1000. Expected result: 500500");
+console.log("  sum_to_n_a(1000):", sum_to_n_a(1000));
+console.log("  sum_to_n_b(1000):", sum_to_n_b(1000));
+console.log("  sum_to_n_c(1000):", sum_to_n_c(1000));
+console.log();
+
+console.log("Test Case 6 - Negative number: n = -3. Expected result: 0");
+console.log("  sum_to_n_a(-3):", sum_to_n_a(-3));
+console.log("  sum_to_n_b(-3):", sum_to_n_b(-3));
+console.log("  sum_to_n_c(-3):", sum_to_n_c(-3));
+console.log();

src/problem2/.env.example

@@ -0,0 +1,2 @@
+VITE_API_BASE_URL=https://interview.switcheo.com/
+VITE_TOKEN_ICON_BASE_URL=https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/

src/problem2/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment variables
+.env
+.env.local

src/problem2/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

src/problem2/PROBLEM.md

@@ -0,0 +1,21 @@
+# Problem 2: Fancy Form
+
+Create a currency swap form based on the template provided in the folder. A user would use this form to swap assets from one currency to another.
+
+*You may use any third party plugin, library, and/or framework for this problem.*
+
+1. You may add input validation/error messages to make the form interactive.
+2. Your submission will be rated on its usage intuitiveness and visual attractiveness.
+3. Show us your frontend development and design skills, feel free to totally disregard the provided files for this problem.
+4. You may use this [repo](https://github.com/Switcheo/token-icons/tree/main/tokens) for token images, e.g. [SVG image](https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/SWTH.svg).
+5. You may use this [URL](https://interview.switcheo.com/prices.json) for token price information and to compute exchange rates (not every token has a price, those that do not can be omitted).
+
+```
+✨ Bonus: extra points if you use [Vite](https://vite.dev/) for this task!
+```
+
+Please submit your solution using the files provided in the skeletal repo, including any additional files your solution may use.
+
+```
+💡 Hint: feel free to simulate or mock interactions with a backend service, e.g. implement a loading indicator with a timeout delay for the submit button is good enough.
+```