Now if I wanted to add "tryhackme" to this file named "passwords" but also keep "passwords123", what would my command be
', order: 3, @@ -170,7 +183,8 @@ const questions = [ correct: false, attempts: 0, }, - answerDescription: "Answer format: ***{*********_**_****}", + answerDescription: "Answer format: **** ********** ** *********", + answer: "echo tryhackme >> passwords", task: 7, }, { @@ -182,7 +196,8 @@ const questions = [ correct: false, attempts: 0, }, - answerDescription: "Answer format: ***{*********_**_****}", + answerDescription: "No answer needed", + answer: null, task: 7, }, { @@ -194,32 +209,35 @@ const questions = [ correct: false, attempts: 0, }, - answerDescription: "Answer format: ***{*********_**_****}", + answerDescription: "No answer needed", + answer: null, task: 8, }, { hint: "", - question: "Terminate the machine deployed in this room from task 3.Β
", + question: "Terminate the machine deployed in this room from task 3.
", order: 1, roomCode: "linux-fundamentals-part1", progress: { correct: false, attempts: 0, }, - answerDescription: "Answer format: ***{*********_**_****}", + answerDescription: "No answer needed", + answer: null, task: 9, }, { hint: "", question: - 'JoinΒ Linux Fundamentals Part 2!
', + 'Join Linux Fundamentals Part 2!
', order: 2, roomCode: "linux-fundamentals-part1", progress: { correct: false, attempts: 0, }, - answerDescription: "Answer format: ***{*********_**_****}", + answerDescription: "No answer needed", + answer: null, task: 9, }, ]; diff --git a/packages/api/db/seeds/tasks.js b/packages/api/db/seeds/tasks.js index 01c3752..03fc8cb 100644 --- a/packages/api/db/seeds/tasks.js +++ b/packages/api/db/seeds/tasks.js @@ -73,4 +73,4 @@ const tasks = [ }, ]; -module.exports = { tasks }; \ No newline at end of file +module.exports = { tasks }; diff --git a/packages/api/jest.config.js b/packages/api/jest.config.js new file mode 100644 index 0000000..c10d7b4 --- /dev/null +++ b/packages/api/jest.config.js @@ -0,0 +1,24 @@ +/** @type {import('jest').Config} */ +export default { + preset: "ts-jest/presets/default-esm", + testEnvironment: "node", + extensionsToTreatAsEsm: [".ts"], + moduleNameMapper: { + "^(\\.{1,2}/.*)\\.js$": "$1", + "^@/(.*)$": "
-
-
-
-
-
-
+
+
+
+
+
+
- {tasks.map((task) => {
- const isCompleted = isTaskCompleted(task);
- return (
-
- );
-};
-
-export default Accordion;
diff --git a/packages/client/src/components/Header.css b/packages/client/src/components/Header.css
deleted file mode 100644
index 8d6a36b..0000000
--- a/packages/client/src/components/Header.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.header {
- background-color: #212c42;
- width: 100%;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1000;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.header-content {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- padding: 0.8rem 2rem;
- height: 90px;
- max-width: 1200px;
- margin: 0 auto;
- gap: 2rem;
-}
-
-.logo-container {
- display: flex;
- align-items: center;
- text-decoration: none;
- color: white;
-}
-
-.logo {
- height: 70px;
- width: auto;
-}
-
-.header-nav {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-
-.nav-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.25rem;
- padding: 0.5rem 1rem;
- text-decoration: none;
- color: #bdc3c7;
- border-radius: 4px;
- transition: all 0.2s ease;
- font-family: "Source Sans Pro", sans-serif;
- font-weight: 400;
-}
-
-.nav-item:hover {
- background-color: rgba(255, 255, 255, 0.1);
- color: white;
-}
-
-.nav-icon {
- width: 2rem;
- height: 1.5rem;
-}
-
-.nav-text {
- font-size: 1.25rem;
-}
diff --git a/packages/client/src/components/Header.tsx b/packages/client/src/components/Header.tsx
deleted file mode 100644
index edc67fd..0000000
--- a/packages/client/src/components/Header.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link } from "react-router-dom";
-import thmLogo from "/thm-logo-full.svg";
-import "./Header.css";
-
-const Header = () => {
- return (
-
-
-
- {expandedTask === task.order && (
-
- );
- })}
-
-
-
- {task.questions.length > 0 && (
-
- )}
-
-
-
- )}
- Answer the questions below
- {task.questions.map((question) => { - const questionKey = getQuestionKey(task.order, question.order); - const hasAnswered = question.progress.correct; - - return ( -
-
- );
- })}
- {question.question}
-
- handleAnswerChange(questionKey, e.target.value)}
- />
-
-
-
-
- 
-
-
-
-
-
+
+ );
+}
diff --git a/packages/client/src/features/room/RoomPage.tsx b/packages/client/src/features/room/RoomPage.tsx
new file mode 100644
index 0000000..c9b972b
--- /dev/null
+++ b/packages/client/src/features/room/RoomPage.tsx
@@ -0,0 +1,111 @@
+import { useParams } from "react-router-dom";
+import { SafeHTML } from "../../shared/components/SafeHTML";
+import { Accordion } from "./components/Accordion";
+import { useRoomData } from "./hooks/useRoomData";
+
+function LoadingSkeleton() {
+ return (
+
+
+
+
+ + Live coding challenge +
+ ++ Practice your skills with live coding challenges. +
+
+
+
+
+ + This coding challenge is designed to assess your ability to work with a full-stack + TypeScript application. The application should already running locally on the candidates + machine and they'll spend the session extending and improving existing functionality. +
+ ++ The application is a TryHackMe-inspired learning platform that displays + interactive rooms with tasks and questions. It's built as a monorepo using: +
+ +-
+
- + Backend: Node.js + Express + + TypeScript + MongoDB + +
- + Frontend: React + TypeScript + + Vite + React Query + +
- + Tooling: pnpm + Turborepo + + Biome + +
+ Database +
++ The project has been setup with a MongoDB docker container instance and + has been pre-seeded with data. +
+ +
+
+ + Disclaimer +
++ This application is a demonstration project created for educational + and interview purposes only. It is not affiliated with or part of TryHackMe's official + codebase. This dummy application replicates some of TryHackMe's functionality for + learning purposes, and none of the code contained herein will be incorporated into + TryHackMe's actual platform. +
+
+
+ );
+}
+
+function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+
+
+ );
+}
+
+export function RoomPage() {
+ const { roomCode } = useParams<{ roomCode: string }>();
+ const { data: roomData, isPending, isError, error, refetch } = useRoomData(roomCode || "");
+
+ if (isPending) {
+ return
+
+ !
+ Failed to load room
+{message}
+ +
+
+ );
+}
diff --git a/packages/client/src/features/room/components/Accordion.tsx b/packages/client/src/features/room/components/Accordion.tsx
new file mode 100644
index 0000000..6814e35
--- /dev/null
+++ b/packages/client/src/features/room/components/Accordion.tsx
@@ -0,0 +1,104 @@
+import { faCheck, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Task } from "@live-code-challenge/shared";
+import { useEffect, useState } from "react";
+import { SafeHTML } from "../../../shared/components/SafeHTML";
+import { useQuestionSubmission } from "../hooks/useQuestionSubmission";
+import { QuestionRow } from "./QuestionRow";
+
+interface AccordionProps {
+ tasks: Task[];
+ roomCode: string;
+}
+
+export function Accordion({ tasks, roomCode }: AccordionProps) {
+ const [expandedTask, setExpandedTask] = useState
+
+
+
+ 
+
+
+
+
+
+
+
+
+ {Math.round(progress)}% Complete
+
+
+
+
+ {tasks.map((task) => {
+ const isCompleted = isTaskCompleted(task);
+ const isExpanded = expandedTask === task.order;
+
+ return (
+
+ );
+}
diff --git a/packages/client/src/features/room/components/QuestionRow.tsx b/packages/client/src/features/room/components/QuestionRow.tsx
new file mode 100644
index 0000000..fbffb37
--- /dev/null
+++ b/packages/client/src/features/room/components/QuestionRow.tsx
@@ -0,0 +1,86 @@
+import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Question } from "@live-code-challenge/shared";
+import { SafeHTML } from "../../../shared/components/SafeHTML";
+
+interface QuestionRowProps {
+ question: Question;
+ answer: string;
+ isSubmitting: boolean;
+ result?: { correct: boolean; hint?: string };
+ onAnswerChange: (value: string) => void;
+ onSubmit: () => void;
+}
+
+export function QuestionRow({
+ question,
+ answer,
+ isSubmitting,
+ result,
+ onAnswerChange,
+ onSubmit,
+}: QuestionRowProps) {
+ const hasAnswered = question.progress.correct;
+ const showError = result && !result.correct;
+ const noAnswerNeeded = !question.requiresAnswer;
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !hasAnswered && !isSubmitting) {
+ onSubmit();
+ }
+ };
+
+ return (
+
+
+
+ {isExpanded && (
+
+ );
+ })}
+
+
+ )}
+
+
+
+ submission.setAnswer(task.order, question.order, value)
+ }
+ onSubmit={() =>
+ submission.submit(task.order, question.order, question.requiresAnswer)
+ }
+ />
+ ))}
+
+ )}
+ + Answer the questions below +
+ {task.questions.map((question) => ( +
+
+ );
+}
diff --git a/packages/client/src/features/room/components/__tests__/Accordion.test.tsx b/packages/client/src/features/room/components/__tests__/Accordion.test.tsx
new file mode 100644
index 0000000..e339496
--- /dev/null
+++ b/packages/client/src/features/room/components/__tests__/Accordion.test.tsx
@@ -0,0 +1,111 @@
+import type { Task } from "@live-code-challenge/shared";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Accordion } from "../Accordion";
+
+const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+});
+
+const renderWithProviders = (ui: React.ReactElement) => {
+ return render(
+ onAnswerChange(e.target.value)}
+ onKeyDown={handleKeyDown}
+ />
+
+
+ {showError && (
+
+ Incorrect, try again
+ {result.hint && (
+ Hint: {result.hint}
+ )}
+
+ )}
+ Task 1 description
", + questions: [ + { + hint: "", + question: "What is 1+1?", + order: 1, + task: 1, + roomCode: "test-room", + answerDescription: "Enter a number", + progress: { correct: false, attempts: 0 }, + requiresAnswer: true, + }, + ], + }, + { + roomCode: "test-room", + order: 2, + title: "Task 2", + created: "2024-01-01", + description: "Task 2 description
", + questions: [ + { + hint: "", + question: "What is 2+2?", + order: 1, + task: 2, + roomCode: "test-room", + answerDescription: "Enter a number", + progress: { correct: true, attempts: 1 }, + requiresAnswer: true, + }, + ], + }, +]; + +describe("Accordion", () => { + it("renders all tasks", () => { + renderWithProviders(Safe content
', + questions: [], + }, + ]; + + renderWithProviders(
-
- );
-};
-
-export default Home;
diff --git a/packages/client/src/pages/Room.css b/packages/client/src/pages/Room.css
deleted file mode 100644
index c39ce69..0000000
--- a/packages/client/src/pages/Room.css
+++ /dev/null
@@ -1,105 +0,0 @@
-.room-page {
- margin-top: 70px; /* Account for fixed header */
- min-height: calc(100vh - 70px);
-}
-.room-content {
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.page-header {
- background: #141c2b;
- padding: 3rem 2rem;
-}
-
-.room-header-content {
- display: flex;
- align-items: flex-start;
- gap: 2rem;
- margin-bottom: 2rem;
-}
-
-.room-image {
- width: 120px;
- height: 120px;
- border-radius: 12px;
- object-fit: cover;
- flex-shrink: 0;
-}
-
-.room-header-text {
- flex: 1;
- text-align: left;
-}
-
-.room-header-text h1 {
- font-family: "Source Sans Pro", sans-serif;
- font-size: 2.5rem;
- font-weight: 700;
- color: white;
- margin: 0 0 1rem 0;
-}
-
-.room-description {
- font-family: "Source Sans Pro", sans-serif;
- font-size: 1.2rem;
- color: #bdc3c7;
- margin: 0;
- line-height: 1.6;
-}
-
-.progress-bar-container {
- width: 100%;
- height: 15px;
- background-color: rgba(255, 255, 255, 0.2);
- overflow: hidden;
- position: relative;
-}
-
-.progress-bar {
- height: 100%;
- background: linear-gradient(90deg, #a3ea2a 0%, #27ae60 100%);
- transition: width 0.3s ease;
-}
-
-.progress-text {
- font-family: "Source Sans Pro", sans-serif;
- font-size: 0.8rem;
- color: #bdc3c7;
- text-align: center;
- font-weight: 600;
- position: absolute;
- top: -3px;
- width: 100vw;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
- .room-header-content {
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: 1rem;
- }
-
- .room-image {
- width: 80px;
- height: 80px;
- }
-
- .room-header-text h1 {
- font-size: 2rem;
- }
-
- .room-description {
- font-size: 1rem;
- }
-
- .page-header {
- padding: 2rem 1rem;
- }
-
- .room-header-text {
- text-align: center;
- }
-}
diff --git a/packages/client/src/pages/Room.tsx b/packages/client/src/pages/Room.tsx
deleted file mode 100644
index 2815f25..0000000
--- a/packages/client/src/pages/Room.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useParams } from "react-router-dom";
-import Accordion from "../components/Accordion";
-import { useRoomData } from "../hooks/useRoomData";
-import "./Room.css";
-
-const Room = () => {
- const { roomCode } = useParams<{ roomCode: string }>();
- const { data: roomData } = useRoomData(roomCode || "");
-
- const progress = 10;
-
- return (
-
-
-
- Live coding challenge
- -Practice your skills with live coding challenges.
-
-
-
-
- - This coding challenge is designed to assess your ability to work with a full-stack - TypeScript application. The application should already running locally on the candidates - machine and they'll spend the session extending and improving existing functionality. -
- -- The application is a TryHackMe-inspired learning platform that displays - interactive rooms with tasks and questions. It's built as a monorepo using: -
- --
-
- - Backend: Node.js + Express + TypeScript + MongoDB - -
- - Frontend: React + TypeScript + Vite + React Query - -
- - Tooling: pnpm + Turborepo + Biome - -
Database
-- The project has been setup with a MongoDB docker container instance and - has been pre-seeded with data. -
- -
-
- Disclaimer
-- This application is a demonstration project created for educational - and interview purposes only. It is not affiliated with or part of TryHackMe's official - codebase. This dummy application replicates some of TryHackMe's functionality for - learning purposes, and none of the code contained herein will be incorporated into - TryHackMe's actual platform. -
-
-
- );
-};
-
-export default Room;
diff --git a/packages/client/src/shared/components/ErrorBoundary.tsx b/packages/client/src/shared/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..6da08a7
--- /dev/null
+++ b/packages/client/src/shared/components/ErrorBoundary.tsx
@@ -0,0 +1,64 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { logger } from "../lib/logger";
+
+interface Props {
+ children: ReactNode;
+ fallback?: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error?: Error;
+}
+
+export class ErrorBoundary extends Component
-
-
-
-
-
-
- {roomData?.title}
-{roomData?.describe}
-
-
-
-
-
-
-
- {Math.round(progress)}% Complete
-
-
-
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/packages/client/src/shared/components/Header.tsx b/packages/client/src/shared/components/Header.tsx
new file mode 100644
index 0000000..32a759c
--- /dev/null
+++ b/packages/client/src/shared/components/Header.tsx
@@ -0,0 +1,26 @@
+import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "react-router-dom";
+import thmLogo from "/thm-logo-full.svg";
+
+export function Header() {
+ return (
+
+
+ !
+ Something went wrong
++ {this.state.error?.message || "An unexpected error occurred"} +
+ +
+
+
+
+
+
+
+