FE: [Code Challenge] Dang Nguyen Trieu Nguyen

src/problem1/README.md

@@ -0,0 +1,50 @@
+# Problem 1 — Sum to n
+
+**Input:** `n` (integer). **Output:** `1 + 2 + ... + n`. Result < `Number.MAX_SAFE_INTEGER`.
+
+## Run
+
+```bash
+npm install
+npm run start
+```
+
+## Implementations
+
+**A — Formula**
+
+```ts
+var sum_to_n_a = function(n: number): number {
+    if (n <= 0) return 0;
+    return n * (n + 1) / 2;
+};
+```
+
+**B — Loop**
+
+```ts
+var sum_to_n_b = function(n: number): number {
+    if (n <= 0) return 0;
+    let sum = 0;
+    for (let i = 1; i <= n; i++) sum += i;
+    return sum;
+};
+```
+
+**C — Recursion**
+
+```ts
+var sum_to_n_c = function(n: number): number {
+    if (n <= 0) return 0;
+    return n + sum_to_n_c(n - 1);
+};
+```
+
+## Structure
+
+```
+problem1/
+├── index.ts
+├── package.json
+└── README.md
+```

src/problem1/index.ts

@@ -0,0 +1,40 @@
+
+/*
+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.
+*/ 
+
+var sum_to_n_a = function(n: number): number {
+    // using the formula for the sum of an arithmetic series
+    if (n <= 0) return 0
+    return n * (n + 1) / 2;
+};
+
+var sum_to_n_b = function(n: number): number {
+    // using a loop
+    if (n <= 0) return 0;
+
+    let sum = 0;
+    for (let i = 1; i <= n; i++) {
+        sum += i;
+    }
+
+    return sum;
+};
+
+var sum_to_n_c = function(n: number): number {
+    // using recursion
+    if (n <= 0) return 0;
+
+    return n + sum_to_n_c(n - 1);
+};
+
+const numbers = 5;
+
+console.log(sum_to_n_a(numbers));
+console.log(sum_to_n_b(numbers));
+console.log(sum_to_n_c(numbers));
+
+// RUN: npm run start

src/problem1/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "problem1",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "npx tsx index.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

src/problem2/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

src/problem2/README.md

@@ -0,0 +1,56 @@
+# Currency Swap
+
+Token exchange at best rates — convert between tokens with live prices.
+
+**Demo:** https://fe-code-challenge-9ixy.onrender.com/
+
+## Screenshots
+
+**Desktop (light)**
+
+![Desktop](src/assets/imgs/problem2-pc.png)
+
+**Dark mode**
+
+![Dark mode](src/assets/imgs/problem2-darkmode.png)
+
+**Mobile**
+
+![Mobile](src/assets/imgs/problem2-mb.png)
+
+## Tech
+
+- React 18 + TypeScript
+- Vite 5
+- Vanilla CSS (no Tailwind)
+
+## Run locally
+
+```bash
+yarn install
+yarn dev
+```
+
+Open http://localhost:3000
+
+Build: `yarn build` → output in `dist/`
+
+## Features
+
+- **Landing** — Hero, swap section, feature cards (“Why swap with us”), footer
+- **Swap form** — Pick From/To token, enter amount; see estimated output and “1 FROM ≈ X TO” rate
+- **Swap direction** — One-click button to swap From and To tokens
+- **Max** — Button to fill a demo max amount
+- **Token modal** — Open from token dropdown: search, token icons, price and last updated per token
+- **Result modal** — Success or error with swap summary; form resets on close
+- **Validation** — Positive amount only; From and To must differ; errors after input or submit
+- **Loading** — Skeleton while prices load; retry button if fetch fails; “Last updated” relative time
+- **Dark/light theme** — Toggle in header; preference saved in browser; respects system preference
+- **Animations** — Hero entrance, scroll-triggered sections, button and modal transitions
+- **Accessibility** — ARIA, keyboard support, focus management
+- **Performance** — Lazy-loaded swap form, single price API call (deduped)
+
+## Data
+
+- Prices: https://interview.switcheo.com/prices.json
+- Icons: Switcheo token-icons repo (fallback to letter if missing)

src/problem2/index.html

@@ -1,27 +1,24 @@
-<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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Swap tokens at best rates. Convert between tokens in seconds with live prices." />
+    <title>Swap — Token exchange at best rates</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+      media="print"
+      onload="this.media='all'"
+    />
+    <noscript>
+      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+    </noscript>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

src/problem2/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "problem2",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build:preview": "vite build && vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  },
+  "main": "index.js",
+  "license": "MIT"
+}