FE Tech Solution

src/problem1/README.md

@@ -0,0 +1,39 @@
+# Problem 1: Sum to N
+
+This folder contains three unique JavaScript implementations of a function that calculates the summation of numbers from 1 to `n`.
+
+## Implementations
+
+### Implementation A: Iterative Approach
+- **Function:** `sum_to_n_a(n)`
+- **Logic:** Uses a simple `for` loop to iterate from 1 to `n`, cumulatively adding each number to a sum variable.
+- **Time Complexity:** O(n)
+- **Space Complexity:** O(1)
+
+### Implementation B: Mathematical Formula
+- **Function:** `sum_to_n_b(n)`
+- **Logic:** Uses the arithmetic progression sum formula `n * (n + 1) / 2` to compute the sum directly. This is the most optimal approach.
+- **Time Complexity:** O(1)
+- **Space Complexity:** O(1)
+
+### Implementation C: Recursive Approach
+- **Function:** `sum_to_n_c(n)`
+- **Logic:** Recursively adds the current `n` to the summation of numbers up to `n - 1`. It uses a base case of `n <= 1` to terminate the recursion.
+- **Time Complexity:** O(n)
+- **Space Complexity:** O(n) due to the call stack overhead.
+
+## How to Run
+
+You will need [Node.js](https://nodejs.org/) installed on your machine to execute the JavaScript file.
+
+1. Open your terminal.
+2. Navigate to this directory (`src/problem1`) if you aren't already there:
+   ```bash
+   cd src/problem1
+   ```
+3. Run the script using Node.js:
+   ```bash
+   node index.js
+   ```
+
+By default, the script will output the summation of numbers up to `10` for all three implementations (which is `55`). You can modify the `console.log()` statements at the bottom of `index.js` to test different values of `n`.

src/problem1/index.js

@@ -0,0 +1,38 @@
+/**
+ * Iterative approach using a loop
+ * Logic: Initializes a sum variable and adds every integer from 1 to n.
+ * Time Complexity: O(n), Space Complexity: O(1)
+ */
+var sum_to_n_a = function (n) {
+    let sum = 0;
+    for (let i = 1; i <= n; i++) {
+        sum += i;
+    }
+    return sum;
+};
+
+/**
+ * Mathematical formula approach
+ * Logic: Uses the arithmetic progression sum formula n * (n + 1) / 2.
+ * Time Complexity: O(1), Space Complexity: O(1)
+ */
+var sum_to_n_b = function(n) {
+    return (n * (n + 1)) / 2;
+};
+
+/**
+ * Recursive approach
+ * Logic: Recursively adds the current n to the sum of numbers up to n - 1.
+ * Time Complexity: O(n), Space Complexity: O(n) due to call stack
+ */
+var sum_to_n_c = function(n) {
+    if (n <= 1) {
+        return n; // Handles base case
+    }
+    return n + sum_to_n_c(n - 1);
+};
+
+
+console.log(sum_to_n_a(10));
+console.log(sum_to_n_b(10));
+console.log(sum_to_n_c(10));

src/problem1/task.md

@@ -0,0 +1,23 @@
+# Task
+
+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/problem2/.gitignore

@@ -0,0 +1,24 @@
+# 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?

src/problem2/README.md

@@ -0,0 +1,40 @@
+# Fancy Currency Swap Form
+
+A highly optimized, accessible, and responsive Currency Swap UI built with React, TypeScript, and Tailwind CSS.
+
+![Project Screenshot](./screenshot.png)
+
+## Features
+
+- **Modern UI/UX**: Sleek, fully responsive design with Light/Dark mode support seamlessly adapting to system preferences.
+- **Glassmorphism Design**: Uses backdrop filters and transparent surfaces for a modern, premium aesthetic.
+- **Custom Accessible Dropdown**:
+  - Implements a custom `<CurrencySelect />` component that acts like a native `<select>`.
+  - Supports full keyboard navigation: `ArrowUp`, `ArrowDown`, `Enter` to select, and `Escape` to close.
+  - Automatically scrolls the dropdown list to ensure the focused token is always visible.
+- **Robust Error Handling & Fallbacks**:
+  - Live data fetching with error boundaries.
+  - Token icons gracefully fall back to a generic default avatar if a token icon is missing from the API.
+- **Extreme Performance Optimizations**:
+  - `React.memo` and `useCallback` prevent unnecessary re-renders of the form inputs on every keystroke.
+  - Token icons are `loading="lazy"`, preventing the browser from instantly attempting to download 100+ SVGs when opening the dropdown.
+  - Click-outside detection uses native React `onBlur` events, completely eliminating the need for expensive global `document` event listeners!
+
+## Architecture Highlights
+
+1. **Modular Components**: The monolithic form was broken down into `CurrencyInput.tsx` and `CurrencySelect.tsx`, maximizing reusability.
+2. **Business Logic Extraction**: Pure math and format conversions are isolated in `utils/swap.ts`.
+3. **Custom Hooks**: API fetching and data caching are handled exclusively in `useTokenPrices.ts`.
+4. **Strict TypeScript**: Ensures absolute type safety across the entire application, utilizing `verbatimModuleSyntax` for proper type imports.
+
+## Running Locally
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+2. Start the Vite development server:
+   ```bash
+   npm run dev
+   ```
+3. Open `http://localhost:5173/` in your browser.

src/problem2/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

src/problem2/index.html

@@ -1,27 +1,21 @@
-<html>
-
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Fancy Form</title>
-
-  <!-- You may add more stuff here -->
-  <link href="style.css" rel="stylesheet" />
-</head>
-
-<body>
-
-  <!-- You may reorganise the whole HTML, as long as your form achieves the same effect. -->
-  <form onsubmit="return !1">
-    <h5>Swap</h5>
-    <label for="input-amount">Amount to send</label>
-    <input id="input-amount" />
-
-    <label for="output-amount">Amount to receive</label>
-    <input id="output-amount" />
-
-    <button>CONFIRM SWAP</button>
-  </form>
-  <script src="script.js"></script>
-</body>
-
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Currency Swap Form</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {}
+        }
+      }
+    </script>
+  </head>
+  <body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-50 antialiased transition-colors duration-200">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>