[FE] - NGUYEN TRONG NGHIA (nghia14302@gmail.com)

src/problem1/README.md

@@ -0,0 +1,22 @@
+# Three way to sum to n
+
+A solution for three way to sum to n problem
+
+## The problem
+
+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`.
+
+## Running the code
+
+Open terminal then running the script:
+
+```bash
+npx tsc three-way-sum.ts
+node .\three-way-sum.js
+```

src/problem1/three-way-sum.ts

@@ -0,0 +1,53 @@
+// Solution 1: Iterative
+const sum_to_n_a = function (n: number) {
+  let s = 0;
+  for (let i = 1; i <= n; i++) {
+    s += i;
+  }
+  return s;
+};
+
+// Solution 2: Array functional using reduce
+const sum_to_n_b = function (n: number) {
+  const arr = Array.from({ length: n }, (_, i) => i + 1);
+  return arr.reduce((a, v) => a + v, 0);
+};
+
+// Solution 3: Mathematical formula
+const sum_to_n_c = function (n: number) {
+  return (n * (n + 1)) / 2;
+};
+
+// Test Case
+const test = () => {
+  // Replace this test case whenever you want to change
+  const test_cases = [
+    { n: 0, expected: 0 },
+    { n: 1, expected: 1 },
+    { n: 50, expected: 1275 },
+    { n: 100, expected: 5050 },
+    { n: 5000, expected: 12502500 },
+    { n: 10000, expected: 50005000 },
+  ];
+
+  test_cases.forEach(({ n, expected }) => {
+    console.log(`\nTest case: n=${n}`);
+    const result_a = sum_to_n_a(n);
+    console.log(
+      `Function: Iterative, Input: ${n}, Output: ${result_a}`,
+      result_a === expected ? "✅ Correct" : `❌ Wrong Expected: ${expected}`,
+    );
+    const result_b = sum_to_n_b(n);
+    console.log(
+      `Function: Functional, Input: ${n}, Output: ${result_b}`,
+      result_b === expected ? "✅ Correct" : `❌ Wrong Expected: ${expected}`,
+    );
+    const result_c = sum_to_n_c(n);
+    console.log(
+      `Function: Mathematical, Input: ${n}, Output: ${result_c}`,
+      result_c === expected ? "✅ Correct" : `❌ Wrong Expected: ${expected}`,
+    );
+  });
+};
+
+test();

src/problem2/fancy-form/.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/fancy-form/.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint:fix

src/problem2/fancy-form/.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

src/problem2/fancy-form/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+
+}

src/problem2/fancy-form/README.md

@@ -0,0 +1,45 @@
+# Fancy Form
+
+This project is a functional web application for swapping tokens, built with React, TypeScript, Tailwind CSS, and Shadcn UI. It demonstrates a complete flow from form submission with validation to mock API interaction.
+
+## Screenshots
+
+![Screenshot](./screenshot.png)
+
+## Features
+
+- **Token Swapping Interface**: A clean, responsive form for swapping tokens.
+- **Form Management**: Built with `react-hook-form` for robust form handling.
+- **Input Validation**: Schema-based validation using `zod` to ensure data integrity.
+- **Dynamic States**: Handles loading, success, and error states for a seamless user experience.
+- **Custom Hooks**: Features hooks for currency input formatting and currency calculations.
+- **Mock API**: Simulates blockchain transaction delays and responses.
+
+## Installation
+
+1.  Clone the repository (if applicable).
+2.  Navigate to the project directory.
+3.  Install dependencies:
+
+    ```bash
+    npm install
+    ```
+
+## Usage
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+The application will be accessible at `http://localhost:5173`.
+
+## Technology Stack
+
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Framework**: [React](https://react.dev/) + [Vite](https://vitejs.dev/)
+- **State Management**: [Zustand](https://zustand.dev/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+- **UI Components**: [Shadcn UI](https://ui.shadcn.com/)
+- **Icons**: [lucide-react](https://lucide.dev/)

src/problem2/fancy-form/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-luma",
+  "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/fancy-form/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js';
+import prettier from 'eslint-plugin-prettier/recommended';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+      prettier,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+        },
+      ],
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react/prop-types': 'off',
+      'react/jsx-no-unescaped-entities': 'off',
+      'no-unused-vars': 'off',
+    },
+  },
+]);

src/problem2/fancy-form/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <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>Fancy form</title>
+    <meta name="description" content="Swap blockchain assets instantly " />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>