[FE] Pham Van Phu Thinh (thinhphamdn1999@gmail.com)

src/problem1/three-ways-to-sum-to-n.ts

@@ -0,0 +1,42 @@
+/**
+ * Solution 1: Using for to calculate the sum from 1 to n
+ * Time complexity: O(n)
+ * Space complexity: O(1)
+ * @param n - The input number
+ * @returns - The number that is the sum from 1 to n
+ */
+var sum_to_n_a = function (n: number) {
+	let result = 0;
+
+	for (let index = 1; index <= n; index++) {
+		result += index;
+	}
+
+	return result;
+};
+
+/**
+ * Solution 2: Using the mathematical formula:
+ * The sum from 1 to n is: (n * (n + 1)) / 2
+ * Time complexity: O(1)
+ * Space complexity: O(1)
+ * @param n - The input number
+ * @returns - The number that is the sum from 1 to n
+ */
+var sum_to_n_b = function (n: number) {
+	return Math.floor((n * (n + 1)) / 2);
+};
+
+/**
+ * Solution 3: Using recursion to reduce n down to the base case (n <= 1)
+ * Time complexity: O(n)
+ * Space complexity: O(n)
+ * @param n 
+ * @returns 
+ */
+var sum_to_n_c = function (n: number): number {
+  if (n <= 1) return n;
+
+  return n + sum_to_n_c(n - 1);
+};
+

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/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

src/problem2/README.md

@@ -0,0 +1,43 @@
+# Currency Swap
+
+A real-time currency swap form that lets users convert between crypto tokens using live price data.
+
+## Requirements
+
+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 for token images, e.g. SVG image.
+5. You may use this URL for token price information and to compute exchange rates (not every token has a price, those that do not can be omitted).
+
+## Tech Stack
+
+- [React 19](https://react.dev/)
+- [TypeScript 6](https://www.typescriptlang.org/)
+- [Vite](https://vite.dev/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/) — component library built on Radix UI
+- [Lucide React](https://lucide.dev/) — icons
+- [class-variance-authority](https://cva.style/) — component variants
+- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/)
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
+
+## Available Scripts
+
+| Script | Description |
+|---|---|
+| `npm run dev` | Start development server |
+| `npm run build` | Type-check and build for production |
+| `npm run lint` | Run ESLint |
+| `npm run preview` | Preview the production build |
+
+## Data Sources
+
+- Token prices: `https://interview.switcheo.com/prices.json`
+- Token icons: `https://raw.githubusercontent.com/Switcheo/token-icons/main/tokens/{currency}.svg`

src/problem2/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

src/problem2/eslint.config.js

@@ -0,0 +1,32 @@
+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';
+import prettierConfig from 'eslint-config-prettier';
+import prettierPlugin from 'eslint-plugin-prettier';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      prettierConfig,
+    ],
+    plugins: {
+      prettier: prettierPlugin,
+    },
+    rules: {
+      'prettier/prettier': 'warn',
+      'react-refresh/only-export-components': ['off', { allowConstantExport: true }],
+    },
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+]);

src/problem2/index.html

@@ -1,27 +1,13 @@
-<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">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>problem-2-currency-swap</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>