+ {rows}
+
+ )
+}
+```
diff --git a/docs/problem3/readme.md b/docs/problem3/readme.md
new file mode 100644
index 0000000000..1575c7b5bd
--- /dev/null
+++ b/docs/problem3/readme.md
@@ -0,0 +1,215 @@
+I have a table generated to document the issues in the original code and compare them with the refactored code.
+Here is the updated component that fixed all the issues:
+[WalletPage.tsx](../../frontend/src/pages/WalletPage.tsx)
+
+## Code Analysis: Before & After
+
+| Issue | Original Code (Before) | Refactored Code (After) | Improvement |
+| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------- |
+| **Undefined Variables** | Used `lhsPriority` and `leftPriority` which were never declared, causing runtime crashes. | Properly scoped variables `priorityA` and `priorityB` extracted directly from the items being compared. | **Bug Fix**: Code now executes without throwing `ReferenceError`. |
+| **Inverted Filter Logic** | `if (balance.amount <= 0) return true;` kept empty/negative balances and discarded positive ones. | `return priority > -99 && balance.amount > 0;` correctly filters out empty balances and unsupported chains. | **Bug Fix**: Displays correct data to the user. |
+| **Missing Sort Return** | The sort function did not return `0` for items with equal priority, leading to unstable sorting. | Added a fallback `return 0;` to ensure strict sorting contract compliance. | **Bug Fix**: Stable and predictable array sorting across all browsers. |
+| **Redundant Dependency** | `prices` was included in the `useMemo` dependency array but never actually used inside the block. | Removed unused dependencies and integrated pricing calculation cleanly in one pass. | **Performance**: Prevents unnecessary re-computations when prices update but balances do not. |
+| **Inefficient Lookups** | `getPriority` used an O(N) `switch` statement that was re-evaluated constantly. | Replaced with a static O(1) `HashMap` (`Record
+ {rows}
+
+ )
+}
+```
+
+# After
+
+```typescript
+// Problem 3 Fix: Define BLOCKCHAIN_PRIORITY as a HashMap for O(1) lookup instead of O(n) switch
+const BLOCKCHAIN_PRIORITY: Record
+
+ );
+}
+```
diff --git a/docs/problem5/detail.md b/docs/problem5/detail.md
new file mode 100644
index 0000000000..6e46a91576
--- /dev/null
+++ b/docs/problem5/detail.md
@@ -0,0 +1,12 @@
+# Task
+
+Develop a backend server with ExpressJS. You are required to build a set of CRUD interface that allow a user to interact with the service. You are required to use TypeScript for this task.
+
+1. Interface functionalities:
+ 1. Create a resource.
+ 2. List resources with basic filters.
+ 3. Get details of a resource.
+ 4. Update resource details.
+ 5. Delete a resource.
+2. You should connect your backend service with a simple database for data persistence.
+3. Provide [`README.md`](http://README.md) for the configuration and the way to run application.
diff --git a/docs/problem5/readme.md b/docs/problem5/readme.md
new file mode 100644
index 0000000000..e5f1a3d355
--- /dev/null
+++ b/docs/problem5/readme.md
@@ -0,0 +1,15 @@
+For this problem i have created an ExpressJS server for coin management. I have added 5 API endpoints for CRUD operations.
+
+### Endpoints [coins.ts](../../backend/src/routes/coins.ts)
+
+- **`GET /api/coins`**: Fetches all coins. Supports filtering by `blockchain`, `search` string, and price ranges (`minPrice`, `maxPrice`).
+- **`GET /api/coins/:id`**: Fetches a single coin by its ID.
+- **`POST /api/coins`**: Creates a new coin. Expects `currency`, `blockchain`, `price`, `date`, and `iconFilename`.
+- **`PUT /api/coins/:id`**: Updates an existing coin's details.
+- **`DELETE /api/coins/:id`**: Removes a coin from the database.
+
+The coins image need to have icon in folder frontend\public\icons\coins\
+I wont be having a upload file form in order to avoid the complexity of file upload. We can add the icon in the folder and use the filename as the icon name.
+I also created a coins page to interact with the API.
+As you can check in the coin tab file
+[CoinsPage.tsx](../../frontend/src/pages/CoinsPage.tsx)
diff --git a/docs/problem6/detail.md b/docs/problem6/detail.md
new file mode 100644
index 0000000000..34b3062f70
--- /dev/null
+++ b/docs/problem6/detail.md
@@ -0,0 +1,16 @@
+# Task
+
+Write the specification for a software module on the API service (backend application server).
+
+1. Create a documentation for this module on a `README.md` file.
+2. Create a diagram to illustrate the flow of execution.
+3. Add additional comments for improvement you may have in the documentation.
+4. Your specification will be given to a backend engineering team to implement.
+
+### Software Requirements
+
+1. We have a website with a score board, which shows the top 10 user’s scores.
+2. We want live update of the score board.
+3. User can do an action (which we do not need to care what the action is), completing this action will increase the user’s score.
+4. Upon completion the action will dispatch an API call to the application server to update the score.
+5. We want to prevent malicious users from increasing scores without authorisation.
diff --git a/docs/problem6/readme.md b/docs/problem6/readme.md
new file mode 100644
index 0000000000..e9fc6e8b21
--- /dev/null
+++ b/docs/problem6/readme.md
@@ -0,0 +1,80 @@
+For this problem i have generated and updated a detail architecture. The solution was using token based authentication and WebSockets for real-time updates.
+As we need to prevent user from increasing scores without authorisation.
+There are many way to achive this such as with sever scoring or validation on every score update,rate limiting, signed request, replay events, etc.
+
+I choosed token based authentication and serverside scoring. It is minimal and secure enough for this problem.
+
+## Trigger action
+
+My action will be the swap action from problem2 whenever you swap a coin you will get +1 score.
+
+## Related file:
+
+[scores.ts](../../backend/src/routes/scores.ts)
+[scoreboard.ts](../../backend/src/websocket/scoreboard.ts)
+[ScoreboardPage.tsx](../../frontend/src/pages/ScoreboardPage.tsx)
+
+## Architecture Overview
+
+Our implementation spans a full-stack solution utilizing React on the frontend and Node.js/Express with WebSockets on the backend.
+
+### 1. Security & Anti-Cheat Mechanisms
+
+A primary requirement for this architecture is preventing users from sending arbitrary scores to the server (e.g., `{"score": 999999}`).
+
+To solve this, we implemented a **Token-Based Authentication & Server-Side Validation** model:
+
+- **Session Creation**: When a user first opens the app, the frontend calls `POST /api/scores/session`. The server generates a random username, a secure `sessionToken`, and initializes their score to `30` in the SQLite database. Only the `username` and `token` are stored in `localStorage` — **the score is never cached client-side**.
+- **Score on Init**: After restoring a session from `localStorage`, the frontend immediately calls `GET /api/scores/me` with the token in the `Authorization` header. The server returns the current live score for that user. If the token is invalid (e.g., the database was wiped), the frontend automatically creates a fresh session.
+- **Action Verification**: When the user performs an action (e.g., executing a token swap), they do _not_ send their new score. Instead, the swap endpoint (`POST /api/swap`) receives the `sessionToken` and the server atomically increments the score.
+- **Server-Side Increment**: The server executes `UPDATE scores SET score = score + 1 WHERE sessionToken = ?` and then returns `{ newScore }` in the HTTP response. The frontend updates the header score directly from this value — no WebSocket lookup required.
+
+### 2. Real-Time Updates (WebSockets)
+
+Instead of relying on inefficient frontend HTTP polling to keep the top 10 list fresh, we implemented a push-based WebSocket architecture.
+
+- **WebSocket Server**: Attached to the Express HTTP server using the `ws` library.
+- **Broadcasting Mechanism**: Whenever an action successfully alters _any_ user's score in the database, the server invokes a `broadcastScores()` function. This queries the database for the new `LIMIT 10` top scores and pushes a JSON stringified array to all active WebSocket connections.
+- **Frontend Hook (`useWebSocket.ts`)**: The React frontend maintains a persistent connection to `ws://localhost:3001`. Upon receiving a message, it updates the local `scores` React state for the leaderboard display.
+- **User's Own Score**: The WebSocket only broadcasts the **top 10**. New users with 30 points will not appear there. Their personal score is managed separately via `GET /api/scores/me` on init and via `newScore` in the swap response.
+
+### 3. Database (SQLite)
+
+- A `scores` table stores `id`, `username`, `sessionToken`, and `score`.
+- Queries fetching the scoreboard are optimized using `ORDER BY score DESC LIMIT 10`.
+
+---
+
+## Data Flow Diagram
+
+```mermaid
+sequenceDiagram
+ participant User
+ participant Frontend as React Frontend
+ participant API as Backend API
+ participant DB as SQLite DB
+ participant WS as WebSocket Server
+ participant Clients as Connected Clients
+
+ Note over Frontend,API: App Init
+ Frontend->>API: GET /api/scores/me (Authorization: Bearer token)
+ API->>DB: SELECT score WHERE sessionToken = token
+ DB-->>API: { score: 30 }
+ API-->>Frontend: { username, score }
+ Frontend->>Frontend: setLocalScore(30)
+
+ Note over User,Clients: User performs a Swap
+ User->>Frontend: Click Confirm Swap
+ Frontend->>API: POST /api/swap (sessionToken in body)
+ API->>DB: UPDATE score = score + 1 WHERE sessionToken = ?
+ DB-->>API: changes: 1
+ API->>DB: SELECT score WHERE sessionToken = ?
+ DB-->>API: { score: 31 }
+ API->>WS: broadcastScores()
+ WS->>DB: SELECT top 10 scores
+ DB-->>WS: Top 10 rows
+ WS->>Clients: Broadcast JSON (top 10 only)
+ API-->>Frontend: { success, newScore: 31 }
+ Frontend->>Frontend: setLocalScore(31) from HTTP response
+ Clients-->>Frontend: WebSocket updates Scoreboard UI
+```
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000000..a547bf36d8
--- /dev/null
+++ b/frontend/.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?
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 0000000000..ef614d25c1
--- /dev/null
+++ b/frontend/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,
+ },
+ },
+])
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000000..0fca6f0434
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+ {showComparison ? (
+
+
+
+ Your Wallet
+Refactored version of the Problem 3 component
+
+ {processedBalances.map((balance) => (
+
+ )}
+
+
+ ))}
+ {processedBalances.length === 0 && (
+
+ {balance.iconFilename ? (
+ 
+ ) : (
+
+
+ {balance.currency[0]}
+
+ )}
+
+
+ {balance.currency}
+ + {balance.blockchain} + +
+
+ {balance.formatted}
+ ${balance.usdValue.toFixed(2)}
+
+ No balances found matching priority criteria.
+
+ )}
+
+ Loading dashboard...
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Background gradients */}
+
+
+
+
+
+
+
+ {children}
+
+
+ {/* Mobile nav */}
+
+ );
+};
diff --git a/frontend/src/components/SumCalculator.tsx b/frontend/src/components/SumCalculator.tsx
new file mode 100644
index 0000000000..6a6cdc57da
--- /dev/null
+++ b/frontend/src/components/SumCalculator.tsx
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import type { FC } from 'react';
+import { Calculator, X } from 'lucide-react';
+import { sum_to_n_a, sum_to_n_b, sum_to_n_c } from '../utils/sum';
+
+interface SumCalculatorProps {
+ onSelectResult: (result: number) => void;
+ onClose: () => void;
+}
+
+export const SumCalculator: FC
+
+
+
+
+
+ {tabs.map(tab => {
+ const Icon = tab.icon;
+ return (
+
+ );
+ })}
+
+
+
+ {username && (
+
+
+
+ {username}
+ {score} pts
+
+ )}
+
+
+
+ {tabs.map(tab => {
+ const Icon = tab.icon;
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
+
+const ResultRow = ({ label, result, badge, badgeColor }: { label: string, result: number | null, badge: string, badgeColor: string }) => (
+
+
+
+
+
+
+
+
+
+
+ setInputVal(e.target.value)}
+ className="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-cyan-500 text-sm"
+ placeholder="e.g. 5"
+ />
+
+
+ {bestResult !== null && (
+
+
+ )}
+
+
+);
diff --git a/frontend/src/hooks/useCoins.ts b/frontend/src/hooks/useCoins.ts
new file mode 100644
index 0000000000..8363460166
--- /dev/null
+++ b/frontend/src/hooks/useCoins.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import type { Coin } from '../types';
+
+export const useCoins = () => {
+ const [coins, setCoins] = useState
+ {label}
+
+ {badge}
+
+
+ {result}
+
+ setIsEditModalOpen(false)}
+ onSuccess={() => {
+ setIsEditModalOpen(false);
+ refetch();
+ }}
+ />
+ )}
+
+ {isDeleteModalOpen && selectedCoin && (
+ setIsDeleteModalOpen(false)}
+ onSuccess={() => {
+ setIsDeleteModalOpen(false);
+ refetch();
+ }}
+ />
+ )}
+
+ );
+};
+
+interface EditModalProps {
+ coin: Coin | null;
+ onClose: () => void;
+ onSuccess: () => void;
+}
+
+const EditModal: FC
+
+
+
+
+
+ Coin Management
+Create, edit, or delete coins from the database.
+
+
+
+ {isEditModalOpen && (
+
+
+
+ Currency
+ Blockchain
+ Price (USD)
+ Actions
+
+ {coins.map((coin) => (
+
+
+
+ ))}
+ {coins.length === 0 && (
+
+ {coin.iconFilename ? (
+ 
+ ) : (
+
+
+ {coin.currency[0]}
+
+ )}
+ {coin.currency}
+
+
+ {coin.blockchain}
+
+
+
+ ${coin.price.toFixed(4)}
+
+
+
+
+
+ No coins found in database.
+ )}
+
+
+ );
+};
+
+interface DeleteModalProps {
+ coin: Coin;
+ onClose: () => void;
+ onSuccess: () => void;
+}
+
+const DeleteModal: FC
+
+
+
+
+
+ {isEdit ? 'Edit Coin' : 'Add New Coin'}
+ +
+
+ );
+};
diff --git a/frontend/src/pages/ScoreboardPage.tsx b/frontend/src/pages/ScoreboardPage.tsx
new file mode 100644
index 0000000000..72658759db
--- /dev/null
+++ b/frontend/src/pages/ScoreboardPage.tsx
@@ -0,0 +1,70 @@
+import type { FC } from 'react';
+import type { Score } from '../types';
+import { Trophy, Medal } from 'lucide-react';
+
+interface ScoreboardPageProps {
+ scores: Score[];
+ currentUsername?: string;
+}
+
+export const ScoreboardPage: FC
+
+
+
+
+
+ Delete Coin?
++ Are you sure you want to delete {coin.currency}? This action cannot be undone. +
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/pages/SwapPage.tsx b/frontend/src/pages/SwapPage.tsx
new file mode 100644
index 0000000000..381c475c3e
--- /dev/null
+++ b/frontend/src/pages/SwapPage.tsx
@@ -0,0 +1,253 @@
+import { useState, useEffect, useRef } from 'react';
+import type { FC } from 'react';
+import { Loader2 } from 'lucide-react';
+import type { Coin } from '../types';
+import '../swap.css';
+
+interface SwapPageProps {
+ coins: Coin[];
+ sessionToken?: string;
+ onScoreUpdate?: (newScore: number) => void;
+}
+
+export const SwapPage: FC
+
+
+
+
+ Top Swappers
+Compete with others by making swaps to earn points!
+
+
+
+
+
+ Rank
+ User
+ Score
+
+ {scores.length === 0 ? (
+
+ Loading scores...
+ ) : (
+ scores.map((score, index) => {
+ const isCurrentUser = score.username === currentUsername;
+ return (
+
+ {isCurrentUser && (
+
+ )}
+
+
+ );
+ })
+ )}
+
+ {index === 0 ?
+
+
+
+ {score.username}
+
+ {isCurrentUser && You}
+
+
+
+ {score.score}
+
+
+ {toast && (
+
+ );
+};
+
+const TokenSelector = ({ coins, selected, onSelect }: { coins: Coin[], selected: Coin | null, onSelect: (c: Coin) => void }) => {
+ const [open, setOpen] = useState(false);
+ const dropdownRef = useRef
+ {toast.msg}
+
+ )}
+
+
+
+
+
+
+
+
+ Swap Assets
+ +
+
+
+
+
+
+ You pay
+
+ setAmount(e.target.value)}
+ />
+
+ {
+ if (c.currency === toCoin?.currency) setToCoin(fromCoin);
+ setFromCoin(c);
+ }}
+ />
+
+
+
+
+ {
+ setFromCoin(toCoin);
+ setToCoin(fromCoin);
+ }}
+ >
+ ⇌
+
+
+
+ You receive
+
+
+
+ {
+ if (c.currency === fromCoin?.currency) setFromCoin(toCoin);
+ setToCoin(c);
+ }}
+ />
+
+
+ Exchange Rate
+
+ {loadingRate ?
+
+
+
+
+
+
+ {open && (
+
+ );
+};
diff --git a/frontend/src/pages/WalletPage.tsx b/frontend/src/pages/WalletPage.tsx
new file mode 100644
index 0000000000..7d2b15a57c
--- /dev/null
+++ b/frontend/src/pages/WalletPage.tsx
@@ -0,0 +1,204 @@
+import { useState, useMemo } from 'react';
+import type { FC } from 'react';
+import type { Coin } from '../types';
+
+interface WalletPageProps {
+ coins: Coin[];
+}
+
+// Problem 3 Fix: Use a HashMap for O(1) lookup instead of O(n) switch
+const BLOCKCHAIN_PRIORITY: Record
+ {coins.map(c => (
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+const WalletComparison = () => {
+ return (
+
+
+
+ {showComparison ? (
+
+
+
+ Your Wallet
+Refactored version of the Problem 3 component
+
+ {processedBalances.map((balance) => (
+
+ )}
+
+
+ ))}
+ {processedBalances.length === 0 && (
+
+ {balance.iconFilename ? (
+
+ ) : (
+
+
+ {balance.currency[0]}
+
+ )}
+
+
+ {balance.currency}
+ + {balance.blockchain} + +
+
+ {balance.formatted}
+ ${balance.usdValue.toFixed(2)}
+
+ No balances found matching priority criteria.
+
+ )}
+
+
+ );
+};
diff --git a/frontend/src/swap.css b/frontend/src/swap.css
new file mode 100644
index 0000000000..4870910f77
--- /dev/null
+++ b/frontend/src/swap.css
@@ -0,0 +1,238 @@
+/* d:\Test\99tech\frontend\src\swap.css */
+
+/* Light Mode Defaults */
+.swap-card {
+ width: 100%;
+ max-width: 460px;
+ background-color: #f6f7f9;
+ border-radius: 24px;
+ padding: 30px;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+ position: relative;
+ transition: all 0.3s ease;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+
+.card-title {
+ color: #1a1e29;
+ font-size: 24px;
+ font-weight: 600;
+ margin-bottom: 24px;
+}
+
+.input-section {
+ background: transparent;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-radius: 16px;
+ padding: 16px 20px;
+ transition: all 0.3s ease;
+}
+
+.you-pay { margin-bottom: 6px; }
+.you-receive { margin-top: 6px; }
+
+.input-header {
+ color: #8c909a;
+ font-size: 14px;
+ font-weight: 400;
+ margin-bottom: 8px;
+}
+
+.input-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.amount-input {
+ background: transparent;
+ border: none;
+ color: #1a1e29;
+ font-size: 32px;
+ font-weight: 500;
+ width: 60%;
+ outline: none;
+}
+
+.amount-input::placeholder {
+ color: rgba(0, 0, 0, 0.3);
+}
+
+.token-selector {
+ background-color: rgba(255, 255, 255, 0.9);
+ color: #1a1e29;
+ border-radius: 30px;
+ padding: 8px 16px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.token-icon {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ margin-right: 8px;
+}
+
+.token-symbol {
+ margin-right: 12px;
+}
+
+.dropdown-icon {
+ font-size: 10px;
+ color: rgba(0, 0, 0, 0.5);
+}
+
+.swap-icon-container {
+ display: flex;
+ justify-content: center;
+ position: absolute;
+ top: calc(50% - 24px);
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 10;
+}
+
+.swap-icon-button {
+ width: 48px;
+ height: 48px;
+ background: #e9ebee;
+ border: 3px solid #f6f7f9;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #1a1e29;
+ font-size: 20px;
+ cursor: pointer;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ transition: transform 0.2s, background 0.3s;
+}
+.swap-icon-button:hover {
+ transform: rotate(180deg);
+}
+
+.info-row {
+ display: flex;
+ justify-content: space-between;
+ margin: 20px 0 24px;
+ padding: 0 4px;
+ font-size: 14px;
+ color: #8c909a;
+}
+.info-value { color: #1a1e29; font-weight: 500; }
+
+/* Dark Mode Overrides */
+.theme-dark .swap-card {
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+.theme-dark .card-title { color: #ffffff; }
+.theme-dark .input-section {
+ background: rgba(0, 0, 0, 0.2);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.theme-dark .input-header { color: rgba(255, 255, 255, 0.6); }
+.theme-dark .amount-input { color: #ffffff; }
+.theme-dark .amount-input::placeholder { color: rgba(255, 255, 255, 0.3); }
+.theme-dark .token-selector {
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: #ffffff;
+}
+.theme-dark .token-selector:hover { background: rgba(255, 255, 255, 0.15); }
+.theme-dark .dropdown-icon { color: rgba(255, 255, 255, 0.5); }
+.theme-dark .swap-icon-button {
+ background: #1a1e27;
+ border: 3px solid #0d1117;
+ color: rgba(255, 255, 255, 0.8);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+.theme-dark .info-row { color: rgba(255, 255, 255, 0.6); }
+.theme-dark .info-value { color: #ffffff; }
+
+/* Confirm swap btn styles */
+.confirm-swap-btn {
+ width: 100%;
+ height: 56px;
+ border: none;
+ border-radius: 16px;
+ background: linear-gradient(90deg, #37d3e4 0%, #1c8bff 100%);
+ color: #ffffff;
+ font-size: 18px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: opacity 0.2s, transform 0.1s;
+ outline: none;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 4px 15px rgba(23, 196, 229, 0.25);
+}
+.confirm-swap-btn:hover {
+ opacity: 0.95;
+ box-shadow: 0 6px 20px rgba(23, 196, 229, 0.35);
+}
+.confirm-swap-btn:active {
+ transform: scale(0.98);
+ box-shadow: 0 2px 10px rgba(23, 196, 229, 0.2);
+}
+.confirm-swap-btn::before {
+ content: '';
+ position: absolute;
+ bottom: -30px;
+ left: -20px;
+ width: 120px;
+ height: 120px;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
+ border-radius: 50%;
+ opacity: 0.8;
+}
+.confirm-swap-btn::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: 16px;
+ pointer-events: none;
+ box-shadow: inset 2px 2px 5px rgba(11, 89, 102, 0.2), inset -1px -1px 3px rgba(255, 255, 255, 0.1);
+}
+
+/* Theme Toggle */
+.theme-toggle-container {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: -15px;
+ position: relative;
+ z-index: 20;
+}
+
+.theme-toggle-btn {
+ background: rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ padding: 8px;
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #1a1e29;
+ transition: all 0.2s ease;
+}
+
+.theme-toggle-btn .icon-moon { display: none; }
+.theme-toggle-btn .icon-sun { display: block; }
+
+.theme-dark .theme-toggle-btn {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.1);
+ color: #fff;
+}
+.theme-dark .theme-toggle-btn .icon-sun { display: none; }
+.theme-dark .theme-toggle-btn .icon-moon { display: block; }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000000..a7342c114c
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,18 @@
+export interface Coin {
+ id: number;
+ currency: string;
+ blockchain: string;
+ price: number;
+ date: string;
+ iconFilename: string;
+}
+
+export interface Score {
+ username: string;
+ score: number;
+}
+
+export interface AuthSession {
+ username: string;
+ token: string;
+}
diff --git a/frontend/src/utils/sum.ts b/frontend/src/utils/sum.ts
new file mode 100644
index 0000000000..105568010a
--- /dev/null
+++ b/frontend/src/utils/sum.ts
@@ -0,0 +1,35 @@
+/**
+ * Problem 1: Three ways to sum to n
+ */
+
+/**
+ * Implementation A: Mathematical formula (Gauss)
+ * Time Complexity: O(1) - Constant time arithmetic operations
+ * Space Complexity: O(1) - Constant space
+ */
+export const sum_to_n_a = (n: number): number => {
+ return (n * (n + 1)) / 2;
+};
+
+/**
+ * Implementation B: Iterative approach
+ * Time Complexity: O(n) - Loops n times
+ * Space Complexity: O(1) - Constant space for sum variable
+ */
+export const sum_to_n_b = (n: number): number => {
+ let sum = 0;
+ for (let i = 1; i <= n; i++) {
+ sum += i;
+ }
+ return sum;
+};
+
+/**
+ * Implementation C: Recursive approach
+ * Time Complexity: O(n) - n recursive calls
+ * Space Complexity: O(n) - Call stack grows to n
+ */
+export const sum_to_n_c = (n: number): number => {
+ if (n <= 1) return n;
+ return n + sum_to_n_c(n - 1);
+};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000000..d37737fc01
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000000..3199abe671
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "incremental": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2022",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": false,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000000..1b76d9006b
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "incremental": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2022",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000000..8b0f57b91a
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
diff --git a/readme.md b/readme.md
index 1ff4bc95b4..ca967b06d4 100644
--- a/readme.md
+++ b/readme.md
@@ -1,10 +1,26 @@
-# 99Tech Code Challenge #1 #
+This is a PR for the 99tech coding tasks.
-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.
+Even though I applied as a frontend developer, I wanted to do the fullstack code challenge as i have experience in both frontend and backend, so I made a minimal but complete project to show the result of the function, UI, and use mockup api in the backend folder to show the result of the function following the problem requirement as I combine the spec together to make a complete project.
+If you wanted just to see the minimal solution to each problem you can check the docs folder for each problem and see the readme.md file.
+If you wanted to view the full project you can check the frontend and backend folder and run the project locally by using the run.sh.
+I also grouped problem1-4 together as they are the same as they have same requirement.
-It is important that you minimally attempt the problems, even if you do not arrive at a working solution.
+Docs organization:
-## 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.
+- [docs/problem1and4/](./docs/problem1and4/)
+ - [readme.md](./docs/problem1and4/readme.md)
+ - [detail.md](./docs/problem1and4/detail.md)
+- [docs/problem2/](./docs/problem2/)
+ - [readme.md](./docs/problem2/readme.md)
+ - [detail.md](./docs/problem2/detail.md)
+- [docs/problem3/](./docs/problem3/)
+ - [readme.md](./docs/problem3/readme.md)
+ - [detail.md](./docs/problem3/detail.md)
+- [docs/problem5/](./docs/problem5/)
+ - [readme.md](./docs/problem5/readme.md)
+ - [detail.md](./docs/problem5/detail.md)
+- [docs/problem6/](./docs/problem6/)
+ - [readme.md](./docs/problem6/readme.md)
+ - [detail.md](./docs/problem6/detail.md)
+- [frontend/](./frontend/)
+- [backend/](./backend/)
diff --git a/run.sh b/run.sh
new file mode 100644
index 0000000000..15f6cdf403
--- /dev/null
+++ b/run.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Navigate to the project root
+cd "$(dirname "$0")"
+
+echo "Starting Backend Server..."
+(cd backend && npm run dev) &
+BACKEND_PID=$!
+
+echo "Starting Frontend Server..."
+(cd frontend && npm run dev) &
+FRONTEND_PID=$!
+
+echo "Both servers are starting up!"
+echo "Press [CTRL+C] to stop both servers."
+
+# Catch CTRL+C and kill both background processes
+trap "echo 'Stopping servers...'; kill $BACKEND_PID $FRONTEND_PID; exit" SIGINT
+
+# Wait for both processes
+wait $BACKEND_PID
+wait $FRONTEND_PID
diff --git a/src/problem1/.keep b/src/problem1/.keep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/problem2/index.html b/src/problem2/index.html
deleted file mode 100644
index 4058a68bff..0000000000
--- a/src/problem2/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
-
+
+
+
+
+ Before (Original Code)
+
+
+ {`// 1. O(n) switch statement recreated every render
+const getPriority = (blockchain: any): number => {
+ switch (blockchain) {
+ case 'Osmosis': return 100
+ // ...
+ }
+}
+
+const sortedBalances = useMemo(() => {
+ return balances.filter((balance: WalletBalance) => {
+ // 2. lhsPriority is undefined (should be balancePriority)
+ const balancePriority = getPriority(balance.blockchain);
+ if (lhsPriority > -99) {
+ // 3. Inverted logic: keeps empty balances!
+ if (balance.amount <= 0) {
+ return true;
+ }
+ }
+ return false
+ }).sort((lhs: WalletBalance, rhs: WalletBalance) => {
+ // 4. Missing return 0 for equal cases
+ if (leftPriority > rightPriority) return -1;
+ else if (rightPriority > leftPriority) return 1;
+ });
+// 5. prices is a dependency but not used in the block
+}, [balances, prices]);
+
+// 6. formattedBalances computed but not used for rows
+const formattedBalances = sortedBalances.map(...)
+
+// 7. key={index} is an anti-pattern
+const rows = sortedBalances.map((balance, index) => {
+
+
+ After (Refactored)
+
+
+ {`// 1. O(1) HashMap lookup, defined outside component
+const PRIORITY: Record = {
+ 'Osmosis': 100, /* ... */
+};
+const getPriority = (chain: string) => PRIORITY[chain] ?? -99;
+
+// 5. Removed unused 'prices' dependency
+// 6. Combined filter, sort, and format into one pass
+const processedBalances = useMemo(() => {
+ return balances
+ .filter(balance => {
+ // 2. Fixed variable name
+ const priority = getPriority(balance.blockchain);
+ // 3. Fixed logic to keep non-empty balances
+ return priority > -99 && balance.amount > 0;
+ })
+ .sort((a, b) => {
+ const pA = getPriority(a.blockchain);
+ const pB = getPriority(b.blockchain);
+ if (pA > pB) return -1;
+ if (pA < pB) return 1;
+ // 4. Added missing return 0
+ return 0;
+ })
+ .map(balance => ({
+ ...balance,
+ formatted: balance.amount.toFixed(4),
+ usdValue: prices[balance.currency] * balance.amount
+ }));
+}, [balances, prices]);
+
+// 7. Used currency as unique key
+const rows = processedBalances.map((balance) => {
+