+
+
+ {isOpen && (
+
+ );
+};
diff --git a/src/problem2/src/components/swap/SwapCard.tsx b/src/problem2/src/components/swap/SwapCard.tsx
new file mode 100644
index 000000000..c8c507a36
--- /dev/null
+++ b/src/problem2/src/components/swap/SwapCard.tsx
@@ -0,0 +1,232 @@
+import React, { useState } from 'react';
+import { ArrowDownUp, Settings } from 'lucide-react';
+import { useSwap } from '../../hooks/useSwap';
+import { useToast } from '../ui/Toast';
+import { TokenInput } from './TokenInput';
+import { Button } from '../ui/Button';
+import { TokenModal } from './TokenModal';
+import { OrderDetails } from './OrderDetails';
+import { MOCK_TOKENS } from '../../constants/tokens';
+import { Token } from '../../types';
+import { Modal } from '../ui/Modal';
+
+export const SwapCard: React.FC = () => {
+ const {
+ fromToken, setFromToken,
+ toToken, setToToken,
+ fromAmount, setFromAmount,
+ toAmount,
+ exchangeRate,
+ loading,
+ slippage, setSlippage,
+ handleSwitch
+ } = useSwap();
+
+ const { addToast } = useToast();
+
+ const [isTokenModalOpen, setIsTokenModalOpen] = useState(false);
+ const [activeSide, setActiveSide] = useState<'from' | 'to'>('from');
+ const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+ const [settingsOpen, setSettingsOpen] = useState(false);
+ const [tab, setTab] = useState<'market' | 'limit'>('market');
+
+ const handleTokenSelect = (token: Token) => {
+ if (activeSide === 'from') {
+ if (token.symbol === toToken.symbol) {
+ handleSwitch();
+ } else {
+ setFromToken(token);
+ }
+ } else {
+ if (token.symbol === fromToken.symbol) {
+ handleSwitch();
+ } else {
+ setToToken(token);
+ }
+ }
+ };
+
+ const openTokenModal = (side: 'from' | 'to') => {
+ setActiveSide(side);
+ setIsTokenModalOpen(true);
+ };
+
+ const handleSwap = () => {
+ // Validation
+ if (!fromAmount || Number(fromAmount) <= 0) {
+ addToast('Please enter an amount', 'error');
+ return;
+ }
+ if (Number(fromAmount) > fromToken.balance) {
+ addToast('Insufficient balance', 'error');
+ return;
+ }
+
+ setIsConfirmModalOpen(true);
+ };
+
+ const executeSwap = () => {
+ setIsConfirmModalOpen(false);
+ // Simulate API call
+ setTimeout(() => {
+ addToast(`Swapped ${fromAmount} ${fromToken.symbol} for ${toAmount} ${toToken.symbol}`, 'success');
+ setFromAmount('');
+ }, 500);
+ };
+
+ return (
+
+
+ )}
+
+ Price Impact
+ 2 ? 'text-danger' : 'text-success'}>
+ < {priceImpact}%
+
+
+
+ Liquidity Provider Fee
+ {fee} {fromSymbol}
+
+
+ Minimum Received
+ {minReceived} {toSymbol}
+
+
+ setIsTokenModalOpen(false)}
+ onSelect={handleTokenSelect}
+ tokens={MOCK_TOKENS}
+ />
+
+ setIsConfirmModalOpen(false)}
+ title="Confirm Swap"
+ >
+
+
+ );
+};
diff --git a/src/problem2/src/components/swap/TokenInput.tsx b/src/problem2/src/components/swap/TokenInput.tsx
new file mode 100644
index 000000000..036da0e4e
--- /dev/null
+++ b/src/problem2/src/components/swap/TokenInput.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { Token } from '../../types';
+import { cn } from '../../utils/cn';
+import { Skeleton } from '../ui/Skeleton';
+
+interface TokenInputProps {
+ label: string;
+ amount: string;
+ token: Token;
+ onAmountChange?: (val: string) => void;
+ onTokenClick: () => void;
+ readOnly?: boolean;
+ balance?: number;
+ loading?: boolean;
+ error?: string;
+}
+
+export const TokenInput: React.FC
+
+
+
+
+
+ {settingsOpen && (
+
+
+
+
+
+
+
+ )}
+
+
+ Slippage Tolerance
+ Your transaction will revert if the price changes unfavorably by more than this percentage.
+
+
+ {[0.1, 0.5, 1.0].map((val) => (
+
+ ))}
+
+
+ openTokenModal('from')}
+ balance={fromToken.balance}
+ error={Number(fromAmount) > fromToken.balance ? "Insufficient balance" : undefined}
+ />
+
+ openTokenModal('to')}
+ readOnly
+ loading={loading}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {fromAmount}
+ {fromToken.symbol}
+
+
+
+
+
+
+
+
+ 
+
+
+
+ {toAmount}
+ {toToken.symbol}
+
+
+
+
+
+ Rate
+ 1 {fromToken.symbol} = {exchangeRate.toFixed(6)} {toToken.symbol}
+
+
+ Network Fee
+ 0.001 {fromToken.symbol}
+
+
+ Price Impact
+ 0.05%
+
+
+
+ );
+};
diff --git a/src/problem2/src/components/swap/TokenModal.tsx b/src/problem2/src/components/swap/TokenModal.tsx
new file mode 100644
index 000000000..1cfd03102
--- /dev/null
+++ b/src/problem2/src/components/swap/TokenModal.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Modal } from '../ui/Modal';
+import { Token } from '../../types';
+import { Input } from '../ui/Input';
+
+interface TokenModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ onSelect: (token: Token) => void;
+ tokens: Token[];
+}
+
+export const TokenModal: React.FC
+
+ {balance !== undefined && (
+
+
+
+ Balance: {balance}
+
+ )}
+
+ {loading ? (
+
+ {error && {error}
}
+
+ setSearch(e.target.value)}
+ className="bg-background"
+ />
+
+
+
+
+
+ Hot Tokens
+
+ {tokens.slice(0, 4).map(token => (
+
+ ))}
+
+
+ {filteredTokens.map(token => (
+
+ ))}
+ {filteredTokens.length === 0 && (
+
+
+ No tokens found
+
+ )}
+
+ {label && }
+
+ {error && {error}}
+
+ );
+ }
+);
diff --git a/src/problem2/src/components/ui/Modal.tsx b/src/problem2/src/components/ui/Modal.tsx
new file mode 100644
index 000000000..b3cefeec0
--- /dev/null
+++ b/src/problem2/src/components/ui/Modal.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Modal as AntModal } from 'antd';
+import { cn } from '../../utils/cn';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ title: string;
+ children: React.ReactNode;
+ className?: string;
+}
+
+export const Modal: React.FC
+ {toasts.map((toast) => (
+
+
+ {toast.type === 'success' &&
+ ))}
+ {toast.message}
+ +{rows}
;
+};
diff --git a/src/problem3/inefficiencies-and-anti-patterns.MD b/src/problem3/inefficiencies-and-anti-patterns.MD
new file mode 100644
index 000000000..4d5f4dab5
--- /dev/null
+++ b/src/problem3/inefficiencies-and-anti-patterns.MD
@@ -0,0 +1,47 @@
+1. Logic Errors
+
+ - "lhsPriority" is undefined, should be "balancePriority"
+
+ - this code below is wrong in logic:
+ if (balance.amount <= 0) {
+ return true;
+ }
+
+ issues: the logic is wrong, it should be "balance.amount > 0"
+ correct: balance.amount > 0 is right logic
+
+ - this code below is wrong in logic:
+ rows = sortedBalances.map((balance: FormattedWalletBalance, index: number)) => {}
+
+ issues: rows constant maps over sortedBalances, but the type is declared as FormattedWalletBalance. However, sortedBalances hasn't been formatted yet; that happens in formattedBalances
+ correct:
+ rows = formattedBalances.map((balance: FormattedWalletBalance, index: number)) => {}
+
+
+2. Performance Inefficiencies
+
+ - Unnecessary Dependency, in code below:
+ const sortedBalances = useMemo(() => {
+ return balances.filter((balance: WalletBalance) => {
+ ...
+ });
+ }, [balances, prices]);
+
+ issues: useMemo for sortedBalances depends on prices, but prices are never used inside that calculation. This causes the entire list to re-sort whenever price data updates
+ correct: Remove prices from the dependency array
+
+ - constant re-declaration of PRIORITY_MAP:
+
+ issues: PRIORITY_MAP is a constant that doesn't change.
+ correct: Declare it outside the component to avoid re-declaring it on every render.
+
+ - overuse iteration: map over the data three times (filter/sort, then map for formatting, then map for rows)
+
+ - Hardcoded Keys: Using index as a key in React is an anti-pattern when the list can be re-sorted or filtered. It leads to UI glitches and poor performance. Use a unique identifier (like currency).
+
+
+
+ 3. Typescript Anti-patterns
+
+ - Usage of any
+ - Missing Interface Properties: The WalletBalance interface is missing the blockchain property, yet the code attempts to access balance.blockchain
diff --git a/src/problem5/.gitignore b/src/problem5/.gitignore
new file mode 100644
index 000000000..9f62ec0b8
--- /dev/null
+++ b/src/problem5/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+# Keep environment variables out of version control
+.env
+
+/generated/prisma
diff --git a/src/problem5/.keep b/src/problem5/.keep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/problem5/README.md b/src/problem5/README.md
new file mode 100644
index 000000000..408e157f9
--- /dev/null
+++ b/src/problem5/README.md
@@ -0,0 +1,103 @@
+# Resource API (Problem 5)
+
+A production-grade RESTful CRUD API built with Express, TypeScript, and Prisma.
+
+## Prerequisites
+
+- Node.js (v18 or higher)
+- npm or yarn
+
+## Installation
+
+1. Navigate to the project folder:
+ ```bash
+ cd src/problem5
+ ```
+
+2. Install dependencies:
+ ```bash
+ npm install
+ ```
+
+3. Configure Environment Variables:
+ Ensure a `.env` file exists in the root of `src/problem5` with the following content:
+ ```env
+ DATABASE_URL="file:./dev.db"
+ PORT=3000
+ ```
+ *Note: You can switch `DATABASE_URL` to a PostgreSQL connection string if preferred.*
+
+4. Initialize the Database:
+ ```bash
+ npx prisma generate
+ npx prisma db push
+ ```
+
+## Running the Application
+
+- **Development Mode** (with hot-reload):
+ ```bash
+ npm run dev
+ ```
+ Server will start at `http://localhost:3000`.
+
+- **Production Build**:
+ ```bash
+ npm run build
+ npm start
+ ```
+
+## API Documentation
+
+### Resources
+
+#### Create a Resource
+- **URL**: `POST /api/resources`
+- **Body**:
+ ```json
+ {
+ "name": "Resource Name",
+ "description": "Optional description",
+ "status": "active"
+ }
+ ```
+- **Response**: `201 Created`
+
+#### List Resources
+- **URL**: `GET /api/resources`
+- **Query Params**:
+ - `status`: Filter by status (e.g., `?status=active`)
+ - `name`: Filter by name substring (e.g., `?name=Resource`)
+- **Response**: `200 OK`
+
+#### Get a Resource
+- **URL**: `GET /api/resources/:id`
+- **Response**: `200 OK` or `404 Not Found`
+
+#### Update a Resource
+- **URL**: `PATCH /api/resources/:id`
+- **Body**: (Partial update)
+ ```json
+ {
+ "status": "inactive"
+ }
+ ```
+- **Response**: `200 OK`
+
+#### Delete a Resource
+- **URL**: `DELETE /api/resources/:id`
+- **Response**: `204 No Content`
+
+## Architecture
+
+This project follows a layered architecture:
+- **Controller**: Handles HTTP requests and responses.
+- **Service**: Contains business logic.
+- **Repository**: Handles direct database interactions (Prisma).
+
+Technologies used:
+- **ExpressJS**: Web framework.
+- **TypeScript**: Language.
+- **Prisma**: ORM.
+- **Zod**: Validation.
+- **SQLite**: Default database (easy to swap).
diff --git a/src/problem5/dist/app.js b/src/problem5/dist/app.js
new file mode 100644
index 000000000..d2fdce009
--- /dev/null
+++ b/src/problem5/dist/app.js
@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const cors_1 = __importDefault(require("cors"));
+const helmet_1 = __importDefault(require("helmet"));
+const morgan_1 = __importDefault(require("morgan"));
+const resourceRoutes_1 = __importDefault(require("./routes/resourceRoutes"));
+const errorMiddleware_1 = require("./middleware/errorMiddleware");
+const app = (0, express_1.default)();
+// Middleware
+app.use((0, cors_1.default)());
+app.use((0, helmet_1.default)());
+app.use((0, morgan_1.default)('dev'));
+app.use(express_1.default.json());
+app.use(express_1.default.urlencoded({ extended: true }));
+// Routes
+app.use('/api/resources', resourceRoutes_1.default);
+// Health Check
+app.get('/health', (req, res) => {
+ res.status(200).json({ status: 'ok' });
+});
+// Error Handling
+app.use(errorMiddleware_1.errorMiddleware);
+exports.default = app;
diff --git a/src/problem5/dist/controllers/resourceController.js b/src/problem5/dist/controllers/resourceController.js
new file mode 100644
index 000000000..98ce2fcf4
--- /dev/null
+++ b/src/problem5/dist/controllers/resourceController.js
@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteResource = exports.updateResource = exports.getResource = exports.getResources = exports.createResource = void 0;
+const resourceService_1 = require("../services/resourceService");
+const http_status_codes_1 = require("http-status-codes");
+const resourceService = new resourceService_1.ResourceService();
+const createResource = async (req, res) => {
+ const resource = await resourceService.createResource(req.body);
+ res.status(http_status_codes_1.StatusCodes.CREATED).json({ status: 'success', data: resource });
+};
+exports.createResource = createResource;
+const getResources = async (req, res) => {
+ const { status, name, page, limit } = req.query;
+ const result = await resourceService.getResources(status, name, page ? parseInt(page) : undefined, limit ? parseInt(limit) : undefined);
+ res.status(http_status_codes_1.StatusCodes.OK).json({ status: 'success', data: result.items, meta: result.meta });
+};
+exports.getResources = getResources;
+const getResource = async (req, res) => {
+ const id = parseInt(req.params.id);
+ const resource = await resourceService.getResourceById(id);
+ res.status(http_status_codes_1.StatusCodes.OK).json({ status: 'success', data: resource });
+};
+exports.getResource = getResource;
+const updateResource = async (req, res) => {
+ const id = parseInt(req.params.id);
+ const resource = await resourceService.updateResource(id, req.body);
+ res.status(http_status_codes_1.StatusCodes.OK).json({ status: 'success', data: resource });
+};
+exports.updateResource = updateResource;
+const deleteResource = async (req, res) => {
+ const id = parseInt(req.params.id);
+ await resourceService.deleteResource(id);
+ res.status(http_status_codes_1.StatusCodes.NO_CONTENT).send();
+};
+exports.deleteResource = deleteResource;
diff --git a/src/problem5/dist/middleware/errorMiddleware.js b/src/problem5/dist/middleware/errorMiddleware.js
new file mode 100644
index 000000000..77b78eb6f
--- /dev/null
+++ b/src/problem5/dist/middleware/errorMiddleware.js
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorMiddleware = void 0;
+const AppError_1 = require("../utils/AppError");
+const http_status_codes_1 = require("http-status-codes");
+const errorMiddleware = (err, // AppError | Error
+req, res, next) => {
+ let error = err;
+ if (!(error instanceof AppError_1.AppError)) {
+ console.error('Unexpected Error:', err);
+ error = new AppError_1.AppError('Something went wrong', http_status_codes_1.StatusCodes.INTERNAL_SERVER_ERROR);
+ }
+ const appError = error;
+ res.status(appError.statusCode).json({
+ status: appError.status,
+ message: appError.message,
+ });
+};
+exports.errorMiddleware = errorMiddleware;
diff --git a/src/problem5/dist/middleware/validate.js b/src/problem5/dist/middleware/validate.js
new file mode 100644
index 000000000..c7c907e6d
--- /dev/null
+++ b/src/problem5/dist/middleware/validate.js
@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validate = void 0;
+const zod_1 = require("zod");
+const AppError_1 = require("../utils/AppError");
+const http_status_codes_1 = require("http-status-codes");
+const validate = (schema) => (req, res, next) => {
+ try {
+ schema.parse({
+ body: req.body,
+ query: req.query,
+ params: req.params,
+ });
+ next();
+ }
+ catch (error) {
+ if (error instanceof zod_1.ZodError) {
+ const messages = error.errors.map((e) => e.message).join(', ');
+ next(new AppError_1.AppError(`Validation Error: ${messages}`, http_status_codes_1.StatusCodes.BAD_REQUEST));
+ }
+ else {
+ next(error);
+ }
+ }
+};
+exports.validate = validate;
diff --git a/src/problem5/dist/repositories/resourceRepository.js b/src/problem5/dist/repositories/resourceRepository.js
new file mode 100644
index 000000000..8e7a9d47e
--- /dev/null
+++ b/src/problem5/dist/repositories/resourceRepository.js
@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceRepository = void 0;
+const prisma_1 = __importDefault(require("../utils/prisma"));
+class ResourceRepository {
+ async create(data) {
+ return prisma_1.default.resource.create({ data });
+ }
+ async findAll(filter, skip, take) {
+ return prisma_1.default.resource.findMany({ where: filter, skip, take, orderBy: { updatedAt: 'desc' } });
+ }
+ async count(filter) {
+ return prisma_1.default.resource.count({ where: filter });
+ }
+ async findById(id) {
+ return prisma_1.default.resource.findUnique({ where: { id } });
+ }
+ async update(id, data) {
+ return prisma_1.default.resource.update({ where: { id }, data });
+ }
+ async delete(id) {
+ return prisma_1.default.resource.delete({ where: { id } });
+ }
+}
+exports.ResourceRepository = ResourceRepository;
diff --git a/src/problem5/dist/routes/resourceRoutes.js b/src/problem5/dist/routes/resourceRoutes.js
new file mode 100644
index 000000000..4f65be843
--- /dev/null
+++ b/src/problem5/dist/routes/resourceRoutes.js
@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+ if (k2 === undefined) k2 = k;
+ var desc = Object.getOwnPropertyDescriptor(m, k);
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+ desc = { enumerable: true, get: function() { return m[k]; } };
+ }
+ Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+ if (k2 === undefined) k2 = k;
+ o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+ o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+ var ownKeys = function(o) {
+ ownKeys = Object.getOwnPropertyNames || function (o) {
+ var ar = [];
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+ return ar;
+ };
+ return ownKeys(o);
+ };
+ return function (mod) {
+ if (mod && mod.__esModule) return mod;
+ var result = {};
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+ __setModuleDefault(result, mod);
+ return result;
+ };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = require("express");
+const resourceController = __importStar(require("../controllers/resourceController"));
+const validate_1 = require("../middleware/validate");
+const validationSchemas_1 = require("../utils/validationSchemas");
+const asyncWrapper_1 = require("../utils/asyncWrapper");
+const router = (0, express_1.Router)();
+router.post('/', (0, validate_1.validate)(validationSchemas_1.createResourceSchema), (0, asyncWrapper_1.asyncWrapper)(resourceController.createResource));
+router.get('/', (0, asyncWrapper_1.asyncWrapper)(resourceController.getResources));
+router.get('/:id', (0, asyncWrapper_1.asyncWrapper)(resourceController.getResource));
+router.patch('/:id', (0, validate_1.validate)(validationSchemas_1.updateResourceSchema), (0, asyncWrapper_1.asyncWrapper)(resourceController.updateResource));
+router.delete('/:id', (0, asyncWrapper_1.asyncWrapper)(resourceController.deleteResource));
+exports.default = router;
diff --git a/src/problem5/dist/server.js b/src/problem5/dist/server.js
new file mode 100644
index 000000000..ba5dab4e8
--- /dev/null
+++ b/src/problem5/dist/server.js
@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const app_1 = __importDefault(require("./app"));
+const dotenv_1 = __importDefault(require("dotenv"));
+const prisma_1 = __importDefault(require("./utils/prisma"));
+dotenv_1.default.config();
+const PORT = process.env.PORT || 3000;
+async function start() {
+ try {
+ await prisma_1.default.$connect();
+ }
+ catch (err) {
+ console.error('Prisma connection error');
+ process.exit(1);
+ }
+ app_1.default.listen(PORT, () => {
+ console.log(`Server running on port ${PORT}`);
+ });
+}
+start();
diff --git a/src/problem5/dist/services/resourceService.js b/src/problem5/dist/services/resourceService.js
new file mode 100644
index 000000000..9b047475d
--- /dev/null
+++ b/src/problem5/dist/services/resourceService.js
@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceService = void 0;
+const resourceRepository_1 = require("../repositories/resourceRepository");
+const AppError_1 = require("../utils/AppError");
+const http_status_codes_1 = require("http-status-codes");
+class ResourceService {
+ constructor() {
+ this.resourceRepository = new resourceRepository_1.ResourceRepository();
+ }
+ async createResource(data) {
+ return this.resourceRepository.create(data);
+ }
+ async getResources(status, name, page = 1, limit = 10) {
+ const filter = {};
+ if (status)
+ filter.status = status;
+ if (name)
+ filter.name = { contains: name, mode: 'insensitive' };
+ const skip = (page - 1) * limit;
+ const [items, total] = await Promise.all([
+ this.resourceRepository.findAll(filter, skip, limit),
+ this.resourceRepository.count(filter),
+ ]);
+ const totalPages = Math.max(1, Math.ceil(total / limit));
+ return { items, meta: { page, limit, total, totalPages } };
+ }
+ async getResourceById(id) {
+ const resource = await this.resourceRepository.findById(id);
+ if (!resource) {
+ throw new AppError_1.AppError('Resource not found', http_status_codes_1.StatusCodes.NOT_FOUND);
+ }
+ return resource;
+ }
+ async updateResource(id, data) {
+ await this.getResourceById(id); // Ensure exists
+ return this.resourceRepository.update(id, data);
+ }
+ async deleteResource(id) {
+ await this.getResourceById(id); // Ensure exists
+ await this.resourceRepository.delete(id);
+ }
+}
+exports.ResourceService = ResourceService;
diff --git a/src/problem5/dist/utils/AppError.js b/src/problem5/dist/utils/AppError.js
new file mode 100644
index 000000000..2fd1e1ad8
--- /dev/null
+++ b/src/problem5/dist/utils/AppError.js
@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppError = void 0;
+class AppError extends Error {
+ constructor(message, statusCode) {
+ super(message);
+ this.statusCode = statusCode;
+ this.status = `${statusCode}`.startsWith('4') ? 'fail' : 'error';
+ this.isOperational = true;
+ Error.captureStackTrace(this, this.constructor);
+ }
+}
+exports.AppError = AppError;
diff --git a/src/problem5/dist/utils/asyncWrapper.js b/src/problem5/dist/utils/asyncWrapper.js
new file mode 100644
index 000000000..6431fea86
--- /dev/null
+++ b/src/problem5/dist/utils/asyncWrapper.js
@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asyncWrapper = void 0;
+const asyncWrapper = (fn) => {
+ return (req, res, next) => {
+ fn(req, res, next).catch(next);
+ };
+};
+exports.asyncWrapper = asyncWrapper;
diff --git a/src/problem5/dist/utils/prisma.js b/src/problem5/dist/utils/prisma.js
new file mode 100644
index 000000000..a3a357632
--- /dev/null
+++ b/src/problem5/dist/utils/prisma.js
@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const client_1 = require("@prisma/client");
+const prisma = new client_1.PrismaClient();
+exports.default = prisma;
diff --git a/src/problem5/dist/utils/validationSchemas.js b/src/problem5/dist/utils/validationSchemas.js
new file mode 100644
index 000000000..a92a4b8cc
--- /dev/null
+++ b/src/problem5/dist/utils/validationSchemas.js
@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateResourceSchema = exports.createResourceSchema = void 0;
+const zod_1 = require("zod");
+exports.createResourceSchema = zod_1.z.object({
+ body: zod_1.z.object({
+ name: zod_1.z.string().min(1, 'Name is required'),
+ description: zod_1.z.string().optional(),
+ status: zod_1.z.enum(['active', 'inactive']).optional(),
+ }),
+});
+exports.updateResourceSchema = zod_1.z.object({
+ body: zod_1.z.object({
+ name: zod_1.z.string().min(1).optional(),
+ description: zod_1.z.string().optional(),
+ status: zod_1.z.enum(['active', 'inactive']).optional(),
+ }),
+});
diff --git a/src/problem5/frontend/.gitignore b/src/problem5/frontend/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/src/problem5/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/src/problem5/frontend/README.md b/src/problem5/frontend/README.md
new file mode 100644
index 000000000..d2e77611f
--- /dev/null
+++ b/src/problem5/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+
+ // Remove tseslint.configs.recommended and replace with this
+ tseslint.configs.recommendedTypeChecked,
+ // Alternatively, use this for stricter rules
+ tseslint.configs.strictTypeChecked,
+ // Optionally, add this for stylistic rules
+ tseslint.configs.stylisticTypeChecked,
+
+ // Other configs...
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+ globalIgnores(['dist']),
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [
+ // Other configs...
+ // Enable lint rules for React
+ reactX.configs['recommended-typescript'],
+ // Enable lint rules for React DOM
+ reactDom.configs.recommended,
+ ],
+ languageOptions: {
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ // other options...
+ },
+ },
+])
+```
diff --git a/src/problem5/frontend/eslint.config.js b/src/problem5/frontend/eslint.config.js
new file mode 100644
index 000000000..5e6b472f5
--- /dev/null
+++ b/src/problem5/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+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: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ },
+])
diff --git a/src/problem5/frontend/index.html b/src/problem5/frontend/index.html
new file mode 100644
index 000000000..072a57e8e
--- /dev/null
+++ b/src/problem5/frontend/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/problem5/frontend/src/components/layout/Sidebar.tsx b/src/problem5/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 000000000..1310a60fb
--- /dev/null
+++ b/src/problem5/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Menu, X, LogOut, Package } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { Link, useLocation } from 'react-router-dom';
+
+export const Sidebar = () => {
+ const [isOpen, setIsOpen] = useState(false);
+ const location = useLocation();
+
+ const menuItems = [
+ // { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
+ { icon: Package, label: 'Resources', path: '/resources' },
+ // { icon: Settings, label: 'Settings', path: '/settings' },
+ ];
+
+ const toggleSidebar = () => setIsOpen(!isOpen);
+
+ return (
+ <>
+ {/* Mobile Menu Button */}
+
+
+ {/* Overlay */}
+ {isOpen && (
+
+
+
+ {children}
+
+ setIsOpen(false)}
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+ );
+};
diff --git a/src/problem5/frontend/src/components/ui/Button.tsx b/src/problem5/frontend/src/components/ui/Button.tsx
new file mode 100644
index 000000000..80018a12d
--- /dev/null
+++ b/src/problem5/frontend/src/components/ui/Button.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { Loader2 } from 'lucide-react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes {
+ variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+ size?: 'sm' | 'md' | 'lg' | 'icon';
+ isLoading?: boolean;
+}
+
+export const Button: React.FC = ({
+ className,
+ variant = 'primary',
+ size = 'md',
+ isLoading,
+ children,
+ disabled,
+ ...props
+}) => {
+ const variants = {
+ primary: 'bg-primary text-background hover:bg-primary-hover border-none shadow-lg shadow-primary/20',
+ secondary: 'bg-background-secondary text-text-primary hover:bg-background-tertiary border border-gray-700',
+ outline: 'bg-transparent border-2 border-primary text-primary hover:bg-primary-dim',
+ ghost: 'bg-transparent text-text-secondary hover:text-text-primary hover:bg-white/5',
+ danger: 'bg-status-danger/10 text-status-danger hover:bg-status-danger/20 border border-status-danger/20',
+ };
+
+ const sizes = {
+ sm: 'h-8 px-3 text-xs',
+ md: 'h-10 px-4 text-sm',
+ lg: 'h-12 px-6 text-base',
+ icon: 'h-10 w-10 p-0 flex items-center justify-center',
+ };
+
+ return (
+
+ );
+};
diff --git a/src/problem5/frontend/src/components/ui/Input.tsx b/src/problem5/frontend/src/components/ui/Input.tsx
new file mode 100644
index 000000000..62d65c0c0
--- /dev/null
+++ b/src/problem5/frontend/src/components/ui/Input.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { cn } from '../../utils/cn';
+
+interface InputProps extends React.InputHTMLAttributes {
+ label?: string;
+ error?: string;
+ leftIcon?: React.ReactNode;
+ rightIcon?: React.ReactNode;
+}
+
+export const Input: React.FC = ({
+ className,
+ label,
+ error,
+ leftIcon,
+ rightIcon,
+ id,
+ ...props
+}) => {
+ return (
+
+
+
+ ,
+)
diff --git a/src/problem5/frontend/src/pages/resources/ResourceDetail.tsx b/src/problem5/frontend/src/pages/resources/ResourceDetail.tsx
new file mode 100644
index 000000000..90e7af87a
--- /dev/null
+++ b/src/problem5/frontend/src/pages/resources/ResourceDetail.tsx
@@ -0,0 +1,81 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { resourceService } from '../../services/api'
+import { Layout } from '../../components/layout/Layout'
+import { Button } from '../../components/ui/Button'
+import { Tag } from 'antd'
+
+export const ResourceDetail = () => {
+ const { id } = useParams()
+ const navigate = useNavigate()
+
+ const { data, isLoading } = useQuery({
+ queryKey: ['resource', id],
+ queryFn: async () => {
+ const resource = await resourceService.getById(Number(id))
+ return resource
+ },
+ enabled: !!id,
+ })
+
+ if (isLoading) {
+ return (
+
+
+ )
+ }
+
+ if (!data) {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/problem5/frontend/src/pages/resources/ResourceList.tsx b/src/problem5/frontend/src/pages/resources/ResourceList.tsx
new file mode 100644
index 000000000..f766fd5c0
--- /dev/null
+++ b/src/problem5/frontend/src/pages/resources/ResourceList.tsx
@@ -0,0 +1,442 @@
+import { useEffect, useState } from 'react';
+import { Layout } from '../../components/layout/Layout';
+import { Button } from '../../components/ui/Button';
+import { Input } from '../../components/ui/Input';
+import type { Resource, CreateResourceDTO } from '../../services/api';
+import { resourceService } from '../../services/api';
+import { Plus, Search, Edit2, Trash2, Grid2X2, Table2Icon} from 'lucide-react';
+import { Modal, Form, Select, Input as AntInput, message, Popconfirm, Tag, Pagination, Table } from 'antd';
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+const { Option } = Select;
+
+export const ResourceList = () => {
+ const queryClient = useQueryClient();
+ const navigate = useNavigate();
+ const [resources, setResources] = useState([]);
+ const [view, setView] = useState<'table' | 'grid'>('table');
+ const [search, setSearch] = useState('');
+ const [statusFilter, setStatusFilter] = useState(undefined);
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(9);
+ const [total, setTotal] = useState(0);
+
+ // Modal State
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [editingId, setEditingId] = useState(null);
+ const [form] = Form.useForm();
+ const [submitting, setSubmitting] = useState(false);
+
+ const { isLoading } = useQuery({
+ queryKey: ['resources', { search, statusFilter, page, pageSize }],
+ queryFn: async () => {
+ const result = await resourceService.getAll({ name: search, status: statusFilter, page, limit: pageSize });
+ setResources(result.data);
+ setTotal(result.meta.total);
+ return result;
+ },
+ placeholderData: keepPreviousData,
+ });
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ queryClient.invalidateQueries({ queryKey: ['resources'] });
+ }, 300);
+ return () => clearTimeout(timer);
+ }, [search, statusFilter, page, pageSize, queryClient]);
+
+ useEffect(() => {
+ setPage(1);
+ }, [search, statusFilter]);
+
+ const handleCreate = () => {
+ setEditingId(null);
+ form.resetFields();
+ setIsModalOpen(true);
+ };
+
+ const handleEdit = (resource: Resource) => {
+ setEditingId(resource.id);
+ form.setFieldsValue(resource);
+ setIsModalOpen(true);
+ };
+
+ const deleteMutation = useMutation({
+ mutationFn: (id: number) => resourceService.delete(id),
+ onSuccess: () => {
+ message.success('Resource deleted successfully');
+ queryClient.invalidateQueries({ queryKey: ['resources'] });
+ },
+ onError: () => {
+ message.error('Failed to delete resource');
+ },
+ });
+
+ const handleSubmit = async (values: CreateResourceDTO) => {
+ setSubmitting(true);
+ try {
+ if (editingId) {
+ await resourceService.update(editingId, values);
+ message.success('Resource updated successfully');
+ } else {
+ await resourceService.create(values);
+ message.success('Resource created successfully');
+ }
+ setIsModalOpen(false);
+ queryClient.invalidateQueries({ queryKey: ['resources'] });
+ } catch (error) {
+ message.error('Operation failed');
+ } finally {
+ setSubmitting(false);
+ }
+ };
+
+ return (
+
+ {
+ setPage(pagination.current || 1);
+ setPageSize(pagination.pageSize || 9);
+ }}
+ onRow={(record) => ({
+ onClick: () => navigate(`/resources/${record.id}`),
+ })}
+ columns={[
+ {
+ title: "Name",
+ dataIndex: "name",
+ key: "name",
+ render: (text: string) => (
+ {text}
+ ),
+ },
+ {
+ title: "Description",
+ dataIndex: "description",
+ key: "description",
+ render: (text: string) => (
+ {text || "—"}
+ ),
+ },
+ {
+ title: "Status",
+ dataIndex: "status",
+ key: "status",
+ render: (status: string) => (
+
+ {label && (
+
+ )}
+
+ );
+};
diff --git a/src/problem5/frontend/src/index.css b/src/problem5/frontend/src/index.css
new file mode 100644
index 000000000..5222bbbb9
--- /dev/null
+++ b/src/problem5/frontend/src/index.css
@@ -0,0 +1,84 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ body {
+ @apply bg-background text-text-primary antialiased;
+ }
+}
+
+@layer utilities {
+ .custom-scrollbar::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ }
+
+ .custom-scrollbar::-webkit-scrollbar-track {
+ @apply bg-transparent;
+ }
+
+ .custom-scrollbar::-webkit-scrollbar-thumb {
+ @apply bg-gray-600 rounded-full hover:bg-gray-500;
+ }
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
+
+/* Ant Design Dark Theme Overrides */
+.ant-modal-content {
+ @apply !bg-background-secondary !text-text-primary !border !border-gray-800 !rounded-2xl;
+}
+
+.ant-modal-header {
+ @apply !bg-background-secondary !border-b !border-gray-800 !mb-4;
+}
+
+.ant-modal-title {
+ @apply !text-text-primary !text-xl !font-bold;
+}
+
+.ant-modal-close {
+ @apply !text-text-secondary hover:!text-text-primary;
+}
+
+.ant-form-item-label > label {
+ @apply !text-text-secondary;
+}
+
+.ant-input, .ant-input-password, .ant-input-number, .ant-select-selector {
+ @apply !bg-background !border-gray-700 !text-text-primary placeholder:!text-gray-600;
+}
+
+.ant-input:hover, .ant-input:focus, .ant-select-selector:hover, .ant-select-selector:focus {
+ @apply !border-primary;
+}
+
+.ant-select-arrow {
+ @apply !text-text-secondary;
+}
+
+.ant-select-dropdown {
+ @apply !bg-background-secondary !border !border-gray-700;
+}
+
+.ant-select-item {
+ @apply !text-text-primary;
+}
+
+.ant-select-item-option-selected {
+ @apply !bg-background-tertiary !text-primary;
+}
+
+.ant-select-item-option-active {
+ @apply !bg-background-tertiary;
+}
diff --git a/src/problem5/frontend/src/main.tsx b/src/problem5/frontend/src/main.tsx
new file mode 100644
index 000000000..b26be9d95
--- /dev/null
+++ b/src/problem5/frontend/src/main.tsx
@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import 'antd/dist/reset.css'
+import './index.css'
+import App from './App.tsx'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById('root')!).render(
+
+ {leftIcon && (
+
+ {error && (
+
+ {leftIcon}
+
+ )}
+
+ {rightIcon && (
+
+ {rightIcon}
+
+ )}
+ {error}
+ )} +
+
+
+
+
+
+
+
+
+ Resource Not Found
+ +The requested resource does not exist.
+
+
+
+
+ {data.name}
+ +
+
+ {data.status.toUpperCase()}
+
+ ID: #{data.id}
+
+ {data.description || 'No description provided.'}
+
+
+
+
+ Created At
+ {new Date(data.createdAt).toLocaleString()}
+
+
+ Updated At
+ {new Date(data.updatedAt).toLocaleString()}
+
+
+
+ {/* Filters */}
+
+
+ + Resources +
++ Manage your system resources efficiently. +
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+
+
+
+
+ {/* Table or Grid View */}
+ {view === "table" ? (
+