CodeSignal: React + TypeScript

/**
 * Task board: the types and endpoints the levels refer to. Read-only, the way
 * a CodeSignal task's provided files are; your code goes in src/.
 */
export type Status = "TO_DO" | "IN_PROGRESS" | "DONE";

/** A task as data.json stores it (Level 1). */
export interface Task {
  id: string;
  title: string;
  description: string;
  status: Status;
}

/** The shape of data.json. */
export interface BoardData {
  todoItems: Task[];
  inProgressItems: Task[];
  doneItems: Task[];
}

/** A task as `GET /api/tasks` returns it (Level 3). Note the extra field. */
export interface ApiTask extends Task {
  assignedUser?: string;
}

/** `GET /api/tasks` responds with `{ data: ApiTask[] }`. */
export interface TasksResponse {
  data: ApiTask[];
}

/** `GET /api/users/{id}` responds with one of these. */
export interface User {
  id: string;
  firstName: string;
  lastName: string;
}

export const API = {
  tasks: "/api/tasks",
  user: (id: string) => `/api/users/${encodeURIComponent(id)}`,
} as const;

{
  "todoItems": [
    {
      "id": "t3",
      "title": "Write release notes",
      "description": "Summarise the sprint for customers",
      "status": "TO_DO"
    },
    {
      "id": "t4",
      "title": "Fix flaky test",
      "description": "checkout.spec times out on CI",
      "status": "TO_DO"
    },
    {
      "id": "t5",
      "title": "Fix flaky test",
      "description": "search.spec fails on Mondays",
      "status": "TO_DO"
    }
  ],
  "inProgressItems": [
    {
      "id": "t1",
      "title": "Design review",
      "description": "Walk through the new dashboard",
      "status": "IN_PROGRESS"
    }
  ],
  "doneItems": []
}

import type { BoardData } from "../contract";
import data from "../data.json";

/**
 * TASK BOARD: your workspace. Level 1 starts here.
 *
 * The designer's static template is rendered below as-is. Replace the
 * hard-coded column and card with the tasks from data.json, following the
 * Level 1 spec on the prep page. Keep every className and data-testid the
 * spec names: the grader looks elements up by them.
 *
 *   npm run level -- task-board 1      run Level 1's specs
 *   npm run dev → ?mock=task-board     live preview
 */
const board = data as BoardData;

export default function App() {
  void board;

  return (
    <div className="board">
      <h2 className="board__title">Tasks</h2>
      <div className="board__columns">
        <section className="column" data-testid="column-TO_DO">
          <h2 className="column__title">To do</h2>
          <span className="column__count" data-testid="count-TO_DO">
            1
          </span>
          <div className="column__cards">
            <div className="card" data-testid="card-t1">
              <h3 className="card__title">Task 1</h3>
              <p className="card__description">Detailed task 1 description</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

/**
 * Workshop shortlist: the types and endpoints the levels refer to.
 * Read-only; your code goes in src/.
 */
export type Track = "Frontend" | "Architecture" | "AI";

export const TRACKS = ["Frontend", "Architecture", "AI"] as const satisfies readonly Track[];

/** A session as sessions.json stores it (Level 1), and as your UI should hold it. */
export interface Session {
  id: string;
  title: string;
  track: Track;
  seatsRemaining: number;
}

/** A session as `GET /api/sessions` returns it (Level 3). Same data, other names. */
export interface ApiSession {
  session_id: string;
  session_title: string;
  category: Track;
  available_spots: number;
}

export const API = {
  sessions: "/api/sessions",
} as const;

/** Level 2: nobody may shortlist more than this many sessions. */
export const MAX_SELECTED = 3;

[
  { "id": "s1", "title": "Intro to React Server Components", "track": "Frontend", "seatsRemaining": 12 },
  { "id": "s2", "title": "Designing Event-Driven Systems", "track": "Architecture", "seatsRemaining": 0 },
  { "id": "s3", "title": "Prompt Engineering for Developers", "track": "AI", "seatsRemaining": 1 },
  { "id": "s4", "title": "CSS Layout Deep Dive", "track": "Frontend", "seatsRemaining": 5 },
  { "id": "s5", "title": "Scaling Postgres", "track": "Architecture", "seatsRemaining": 3 },
  { "id": "s6", "title": "Evaluating LLM Apps", "track": "AI", "seatsRemaining": 8 },
  { "id": "s7", "title": "Accessible React Components", "track": "Frontend", "seatsRemaining": 2 }
]

import type { Session } from "../contract";
import sessions from "../sessions.json";

/**
 * WORKSHOP SHORTLIST: your workspace. Level 1 starts here.
 *
 * The static markup below is the designer's template for one card. Render
 * every session from sessions.json with it, following the Level 1 spec on the
 * prep page. Keep every data-testid and every string exactly as specified.
 *
 *   npm run level -- session-shortlist 1
 *   npm run dev → ?mock=session-shortlist
 */
const catalogue = sessions as Session[];

export default function App() {
  void catalogue;

  return (
    <section>
      <p data-testid="selected-summary">0 selected</p>
      <ul>
        <li data-testid="session-card-s0">
          <h3>Session title</h3>
          <span>Track</span>
          <span data-testid="seats-s0">10 seats left</span>
          <button type="button" data-testid="toggle-btn-s0">
            Select
          </button>
        </li>
      </ul>
    </section>
  );
}

/**
 * Expense ledger: the types and endpoints the levels refer to.
 * Read-only; your code goes in src/.
 */
export interface Employee {
  id: string;
  firstName: string;
  lastName: string;
}

export interface Transaction {
  id: string;
  /** Dollars, e.g. 1234.5. */
  amount: number;
  merchant: string;
  /** A calendar date, `YYYY-MM-DD`, with no time and no timezone. */
  date: string;
  employee: Employee;
  approved: boolean;
}

/** Page-based pagination. `nextPage` is null on the last page. */
export interface PaginatedResponse<TData> {
  data: TData;
  nextPage: number | null;
}

export const API = {
  /** GET → PaginatedResponse<Transaction[]>. Pages hold 5 rows and start at 0. */
  transactions: (page: number) => `/api/transactions?page=${page}`,
  /** PUT, body `{ "approved": boolean }` → 200 `{ id, approved }`. */
  approval: (transactionId: string) => `/api/transactions/${encodeURIComponent(transactionId)}/approval`,
  /** GET → Employee[]. */
  employees: "/api/employees",
  /** GET → Transaction[]: every transaction of one employee, not paginated. */
  employeeTransactions: (employeeId: string) => `/api/employees/${encodeURIComponent(employeeId)}/transactions`,
} as const;

[
  {
    "id": "t1",
    "amount": 18.4,
    "merchant": "Uber Eats",
    "date": "2026-03-01",
    "employee": { "id": "e1", "firstName": "James", "lastName": "Smith" },
    "approved": false
  },
  {
    "id": "t2",
    "amount": 1234.5,
    "merchant": "Delta Air Lines",
    "date": "2026-03-01",
    "employee": { "id": "e2", "firstName": "Mary", "lastName": "Jones" },
    "approved": true
  },
  {
    "id": "t3",
    "amount": 7,
    "merchant": "AWS",
    "date": "2026-03-02",
    "employee": { "id": "e3", "firstName": "Ana", "lastName": "Lee" },
    "approved": false
  },
  {
    "id": "t4",
    "amount": 89.99,
    "merchant": "Staples",
    "date": "2026-03-03",
    "employee": { "id": "e1", "firstName": "James", "lastName": "Smith" },
    "approved": true
  },
  {
    "id": "t5",
    "amount": 450,
    "merchant": "WeWork",
    "date": "2026-03-04",
    "employee": { "id": "e2", "firstName": "Mary", "lastName": "Jones" },
    "approved": false
  }
]

import type { Transaction } from "../contract";
import transactions from "../transactions.json";

/**
 * EXPENSE LEDGER: your workspace. Level 1 starts here.
 *
 * Below is the designer's static row. Render every transaction from
 * transactions.json with it, then the total, following the Level 1 spec on the
 * prep page. Watch the money and date formats: the specs compare exact text.
 *
 *   npm run level -- ledger 1
 *   npm run dev → ?mock=ledger
 */
const rows = transactions as Transaction[];

export default function App() {
  void rows;

  return (
    <main>
      <table>
        <thead>
          <tr>
            <th>Merchant</th>
            <th>Employee</th>
            <th>Date</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr data-testid="txn-t0">
            <td>Merchant</td>
            <td>First Last</td>
            <td>Jan 1, 2026</td>
            <td>$0.00</td>
          </tr>
        </tbody>
      </table>
      <p data-testid="ledger-total">Total: $0.00</p>
    </main>
  );
}

/**
 * In-memory database. A record is identified by a `key` and holds `field` →
 * `value` pairs, all strings. Implement the levels in order; later levels must
 * keep earlier behaviour intact. Do not change these signatures.
 */
export interface InMemoryDB {
  // ── Level 1: basic operations ────────────────────────────────────────────
  /** Inserts the field into the record (creating the record), or updates it. */
  set(key: string, field: string, value: string): void;
  /** The field's value, or null when the record or the field does not exist. */
  get(key: string, field: string): string | null;
  /** Removes the field. True if it existed, false otherwise. */
  delete(key: string, field: string): boolean;

  // ── Level 2: scans ───────────────────────────────────────────────────────
  /**
   * Every field of the record as `"field(value)"`, sorted by field name
   * (plain string order). An empty list when the record does not exist.
   */
  scan(key: string): string[];
  /** Like `scan`, keeping only fields whose name starts with `prefix`. */
  scanByPrefix(key: string, prefix: string): string[];

  // ── Level 3: timestamps and TTL ──────────────────────────────────────────
  // Every call now carries a timestamp. Timestamps strictly increase across
  // calls, and the specs never mix these methods with Levels 1–2 on one instance.
  /** `set` at a moment in time; the field never expires (this clears any old TTL). */
  setAt(key: string, field: string, value: string, timestamp: number): void;
  /** `set` with a time to live: the field exists for timestamps in [timestamp, timestamp + ttl). */
  setAtWithTtl(key: string, field: string, value: string, timestamp: number, ttl: number): void;
  /** `delete` at a moment in time. An expired field counts as not existing. */
  deleteAt(key: string, field: string, timestamp: number): boolean;
  /** `get` at a moment in time. An expired field counts as not existing. */
  getAt(key: string, field: string, timestamp: number): string | null;
  /** `scan` at a moment in time, leaving out expired fields. */
  scanAt(key: string, timestamp: number): string[];
  /** `scanByPrefix` at a moment in time, leaving out expired fields. */
  scanByPrefixAt(key: string, prefix: string, timestamp: number): string[];

  // ── Level 4: backup and restore ──────────────────────────────────────────
  /**
   * Saves the whole database as it is at `timestamp`, remembering how much
   * time each expiring field has left. Returns how many records hold at least
   * one live field.
   */
  backup(timestamp: number): number;
  /**
   * Replaces the database with the latest backup taken at or before
   * `timestampToRestore` (one always exists). A field that had `r` ms left
   * when it was backed up now expires at `timestamp + r`.
   */
  restore(timestamp: number, timestampToRestore: number): void;
}

import type { InMemoryDB } from "../contract";

/**
 * IN-MEMORY DATABASE: your workspace (Industry Coding Framework, TypeScript).
 *
 * Read contract.ts for each method's rules. Implement Level 1 first, run its
 * specs, then move on: the next level's rules assume the earlier ones.
 *
 *   npm run level -- in-memory-db 1
 */
export class InMemoryDBImpl implements InMemoryDB {
  set(key: string, field: string, value: string): void {}

  get(key: string, field: string): string | null {
    return null;
  }

  delete(key: string, field: string): boolean {
    return false;
  }

  scan(key: string): string[] {
    return [];
  }

  scanByPrefix(key: string, prefix: string): string[] {
    return [];
  }

  setAt(key: string, field: string, value: string, timestamp: number): void {}

  setAtWithTtl(key: string, field: string, value: string, timestamp: number, ttl: number): void {}

  deleteAt(key: string, field: string, timestamp: number): boolean {
    return false;
  }

  getAt(key: string, field: string, timestamp: number): string | null {
    return null;
  }

  scanAt(key: string, timestamp: number): string[] {
    return [];
  }

  scanByPrefixAt(key: string, prefix: string, timestamp: number): string[] {
    return [];
  }

  backup(timestamp: number): number {
    return 0;
  }

  restore(timestamp: number, timestampToRestore: number): void {}
}

/**
 * Banking system. Every call carries a `timestamp` in milliseconds; timestamps
 * strictly increase from one call to the next. Amounts are whole numbers.
 * Implement the levels in order and do not change these signatures.
 */
export interface BankingSystem {
  // ── Level 1: accounts, deposits, transfers ───────────────────────────────
  /** Creates an empty account. False if the id is already taken. */
  createAccount(timestamp: number, accountId: string): boolean;
  /** Adds money. The new balance, or null if the account does not exist. */
  deposit(timestamp: number, accountId: string, amount: number): number | null;
  /**
   * Moves money between two accounts. The source's new balance, or null when
   * either account is missing, both ids are the same, or the source cannot
   * cover the amount.
   */
  transfer(timestamp: number, sourceAccountId: string, targetAccountId: string, amount: number): number | null;

  // ── Level 2: ranking ─────────────────────────────────────────────────────
  /**
   * The `n` accounts that spent the most, as `"accountId(outgoing)"`.
   * Outgoing = successful transfers out + successful payments (Level 3).
   * Highest first; ties by account id ascending. Fewer than n accounts →
   * all of them. Accounts that spent nothing are included with (0).
   */
  topSpenders(timestamp: number, n: number): string[];

  // ── Level 3: payments with cashback ──────────────────────────────────────
  /**
   * Withdraws `amount`. Returns a payment id, "payment1", "payment2", ...
   * numbered across the whole system and counting successful payments only, or
   * null when the account is missing or cannot cover the amount. 2% of the amount, rounded down, is credited back
   * to the account at `timestamp + 86_400_000` (24 h). Cashback that falls due
   * at or before a call's timestamp is credited before that call does anything.
   */
  pay(timestamp: number, accountId: string, amount: number): string | null;
  /**
   * "IN_PROGRESS" until the payment's cashback is credited, then
   * "CASHBACK_RECEIVED". Null when the account does not exist, the payment does
   * not exist, or the payment belongs to a different account.
   */
  getPaymentStatus(timestamp: number, accountId: string, payment: string): string | null;

  // ── Level 4: merging and history ─────────────────────────────────────────
  /**
   * Folds account 2 into account 1: balance, outgoing total, payments and
   * pending cashback all move to account 1, and account 2 stops existing (its
   * id may be created again later). False when the ids are equal or either is
   * missing.
   */
  mergeAccounts(timestamp: number, accountId1: string, accountId2: string): boolean;
  /**
   * The balance `accountId` had at `timeAt` (after everything that happened at
   * `timeAt`), where timeAt <= timestamp. Null if no account had that id then.
   */
  getBalance(timestamp: number, accountId: string, timeAt: number): number | null;
}

import type { BankingSystem } from "../contract";

/**
 * BANKING SYSTEM: your workspace (Industry Coding Framework, TypeScript).
 *
 * Read contract.ts for each method's rules. Implement Level 1 first, run its
 * specs, then move on. Design Level 1 knowing that payments, merges and
 * balance history are coming: the earlier the data model can hold them, the
 * less you rewrite later.
 *
 *   npm run level -- banking 1
 */
export class BankingSystemImpl implements BankingSystem {
  createAccount(timestamp: number, accountId: string): boolean {
    return false;
  }

  deposit(timestamp: number, accountId: string, amount: number): number | null {
    return null;
  }

  transfer(timestamp: number, sourceAccountId: string, targetAccountId: string, amount: number): number | null {
    return null;
  }

  topSpenders(timestamp: number, n: number): string[] {
    return [];
  }

  pay(timestamp: number, accountId: string, amount: number): string | null {
    return null;
  }

  getPaymentStatus(timestamp: number, accountId: string, payment: string): string | null {
    return null;
  }

  mergeAccounts(timestamp: number, accountId1: string, accountId2: string): boolean {
    return false;
  }

  getBalance(timestamp: number, accountId: string, timeAt: number): number | null {
    return null;
  }
}

/**
 * Cloud storage. Files have unique names and a size in bytes. Implement the
 * levels in order and do not change these signatures.
 */
export interface CloudStorage {
  // ── Level 1: files ───────────────────────────────────────────────────────
  /** Stores a file. False if a file with that name already exists. */
  addFile(name: string, size: number): boolean;
  /** The file's size, or null if it does not exist. */
  getFileSize(name: string): number | null;
  /** Deletes the file and returns its size, or null if it does not exist. */
  deleteFile(name: string): number | null;

  // ── Level 2: queries ─────────────────────────────────────────────────────
  /**
   * The `n` largest files whose names start with `prefix`, formatted as
   * `"name1(size1), name2(size2)"`: largest first, ties by name ascending.
   * An empty string when nothing matches.
   */
  getNLargest(prefix: string, n: number): string;

  // ── Level 3: users and capacity ──────────────────────────────────────────
  // Files added with addFile belong to the built-in user "admin", who has no
  // capacity limit and cannot be added, merged, backed up or restored.
  /** Adds a user with a capacity in bytes. False if the user already exists. */
  addUser(userId: string, capacity: number): boolean;
  /**
   * Stores a file owned by `userId`. Returns the user's remaining capacity, or
   * null if the user does not exist, the name is taken, or it does not fit.
   */
  addFileBy(userId: string, name: string, size: number): number | null;
  /**
   * Moves every file of user 2 to user 1, adds user 2's capacity to user 1's,
   * and removes user 2 (and any backup of theirs). Returns user 1's remaining
   * capacity, or null when the ids are equal, either user is missing, or either
   * is "admin".
   */
  mergeUser(userId1: string, userId2: string): number | null;

  // ── Level 4: backups ─────────────────────────────────────────────────────
  /**
   * Saves the user's current files (names and sizes), replacing any earlier
   * backup. Returns how many files were saved, or null if the user is missing.
   */
  backupUser(userId: string): number | null;
  /**
   * Deletes all the user's files, then brings back the files from their
   * latest backup, skipping any whose name now belongs to another user. With
   * no backup, the user simply ends up with no files. Returns how many files
   * were restored, or null if the user is missing.
   */
  restoreUser(userId: string): number | null;
}

import type { CloudStorage } from "../contract";

/**
 * CLOUD STORAGE: your workspace (Industry Coding Framework, TypeScript).
 *
 * Read contract.ts for each method's rules. Implement Level 1 first, run its
 * specs, then move on.
 *
 *   npm run level -- cloud-storage 1
 */
export class CloudStorageImpl implements CloudStorage {
  addFile(name: string, size: number): boolean {
    return false;
  }

  getFileSize(name: string): number | null {
    return null;
  }

  deleteFile(name: string): number | null {
    return null;
  }

  getNLargest(prefix: string, n: number): string {
    return "";
  }

  addUser(userId: string, capacity: number): boolean {
    return false;
  }

  addFileBy(userId: string, name: string, size: number): number | null {
    return null;
  }

  mergeUser(userId1: string, userId2: string): number | null {
    return null;
  }

  backupUser(userId: string): number | null {
    return null;
  }

  restoreUser(userId: string): number | null {
    return null;
  }
}