feat(frontend): add SemanticSearchBar component, basic VideoCard, Cypress E2E test and Next.js scaffolding for semantic search UI

Author: pmcfadin

frontend/components/SemanticSearchBar.tsx

@@ -0,0 +1,113 @@
+import React, { useState, FormEvent } from "react";
+import VideoCard from "./VideoCard";
+
+export interface VideoSummary {
+  videoId: string;
+  title: string;
+  thumbnailUrl?: string | null;
+  userId: string;
+  submittedAt: string;
+  content_rating?: string | null;
+  category?: string | null;
+  views: number;
+  averageRating?: number | null;
+}
+
+interface Pagination {
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  totalPages: number;
+}
+
+interface PaginatedResponse {
+  data: VideoSummary[];
+  pagination: Pagination;
+}
+
+interface SemanticSearchBarProps {
+  /**
+   * Optional base URL for the API. Defaults to relative path
+   * so that the component works when the front-end and backend
+   * are served from the same origin (e.g. behind a reverse proxy).
+   */
+  apiBaseUrl?: string;
+  /**
+   * Number of results to request per page (default: 10)
+   */
+  pageSize?: number;
+}
+
+const SemanticSearchBar: React.FC<SemanticSearchBarProps> = ({
+  apiBaseUrl = "",
+  pageSize = 10,
+}) => {
+  const [query, setQuery] = useState<string>("");
+  const [results, setResults] = useState<VideoSummary[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!query.trim()) {
+      return;
+    }
+    await performSearch(query.trim());
+  };
+
+  const performSearch = async (q: string) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const params = new URLSearchParams();
+      params.set("query", q);
+      params.set("mode", "semantic");
+      params.set("page", "1");
+      params.set("pageSize", pageSize.toString());
+
+      const response = await fetch(
+        `${apiBaseUrl}/api/v1/search/videos?${params.toString()}`
+      );
+
+      if (!response.ok) {
+        throw new Error(`Backend search failed: ${response.status}`);
+      }
+
+      const payload: PaginatedResponse = await response.json();
+      setResults(payload.data);
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message ?? "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="semantic-search-bar">
+      <form onSubmit={handleSubmit} className="search-form">
+        <input
+          type="text"
+          placeholder="Search videos…"
+          aria-label="Search videos"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          disabled={loading}
+        />
+        <button type="submit" disabled={loading || !query.trim()}>
+          {loading ? "Searching…" : "Search"}
+        </button>
+      </form>
+
+      {error && <p className="error">{error}</p>}
+
+      <div className="results">
+        {results.map((video) => (
+          <VideoCard key={video.videoId} video={video} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SemanticSearchBar; 

frontend/components/VideoCard.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { VideoSummary } from "./SemanticSearchBar";
+
+interface VideoCardProps {
+  video: VideoSummary;
+}
+
+const VideoCard: React.FC<VideoCardProps> = ({ video }) => {
+  return (
+    <div className="video-card">
+      {video.thumbnailUrl && (
+        // eslint-disable-next-line @next/next/no-img-element -- plain img is fine here
+        <img
+          src={video.thumbnailUrl}
+          alt={video.title}
+          className="thumbnail"
+        />
+      )}
+      <h3>{video.title}</h3>
+    </div>
+  );
+};
+
+export default VideoCard; 

frontend/cypress/e2e/semantic_search.cy.ts

@@ -0,0 +1,31 @@
+describe("Semantic Search", () => {
+  it("returns results when user searches", () => {
+    cy.intercept("GET", "/api/v1/search/videos*", {
+      statusCode: 200,
+      body: {
+        data: [
+          {
+            videoId: "00000000-0000-0000-0000-000000000001",
+            title: "Test Video",
+            thumbnailUrl: null,
+            userId: "user",
+            submittedAt: new Date().toISOString(),
+            views: 0,
+            averageRating: null,
+          },
+        ],
+        pagination: {
+          currentPage: 1,
+          pageSize: 10,
+          totalItems: 1,
+          totalPages: 1,
+        },
+      },
+    }).as("search");
+
+    cy.visit("/");
+    cy.get('input[aria-label="Search videos"]').type("test{enter}");
+    cy.wait("@search");
+    cy.contains("Test Video");
+  });
+}); 

frontend/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "killrvideo-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "cypress": "cypress open"
+  },
+  "dependencies": {
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/react": "^18.2.42",
+    "@types/node": "^20.6.1",
+    "eslint": "^8.53.0",
+    "eslint-config-next": "^14.0.0",
+    "cypress": "^13.3.0"
+  }
+}