FE Movie Search: add movie search and movie detail views

jobs/Frontend/sprado-movie-app/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

jobs/Frontend/sprado-movie-app/README.md

@@ -0,0 +1,62 @@
+# **Movie Search Application**
+
+A modern, responsive movie search application built with React, TypeScript, and Tailwind CSS. Powered by [The Movie Database (TMDB) API](https://www.themoviedb.org/), users can search for movies, view details, and navigate through paginated results.
+
+---
+
+## **Features**
+
+- 🎥 **Search Functionality**: Search for movies by title using The Movie Database API.
+- 🧩 **Pagination**: Navigate through multiple pages of movie results.
+- ⭐ **Movie Details**: View comprehensive details about a selected movie, including its overview, release date, and rating.
+- ⚡ **Real-Time Feedback**: Displays loading states, error messages, and "no results" feedback.
+- 🧵 **Debounced Search**: Ensures efficient API calls by debouncing the input.
+- 🖥️ **Responsive UI**: Fully responsive design built with Tailwind CSS.
+- ♿ **Accessibility**: Keyboard navigation and ARIA attributes for better accessibility.
+
+---
+
+## **Tech Stack**
+
+| **Technology**     | **Purpose**                         |
+|---------------------|-------------------------------------|
+| **React**          | Component-based UI development      |
+| **TypeScript**     | Static typing and code reliability  |
+| **Tailwind CSS**   | Utility-first CSS framework         |
+| **React Router**   | Routing for navigation              |
+| **Cypress**        | End-to-end testing                  |
+| **Jest**           | Unit testing for hooks and components |
+| **TMDB API**       | Fetching movie data                 |
+
+---
+
+## **Folder Structure**
+
+```bash
+src/
+├── assets/               # Images and static assets
+├── components/           # UI components (e.g., MovieCard, SearchBar)
+├── hooks/                # Custom React hooks (e.g., useFetchMovies)
+├── pages/                # Application pages (e.g., SearchPage, MovieDetailPage)
+├── utils/                # Utility functions (e.g., pagination functions)
+├── types/                # TypeScript interfaces and types
+└── App.tsx               # Root component
+```
+
+---
+
+## **Available Scripts**
+
+- `yarn start`: Runs the application in development mode.
+- `yarn test`: Runs the unit tests with Jest.
+- `yarn lint`: Runs ESLint to check code for errors and enforce coding standards.
+- `yarn cypress:open`: Opens Cypress for end-to-end testing.
+- `yarn cypress:run`: Runs Cypress tests.
+
+---
+
+## **Future Enhancements**
+
+- 🔍 **Filter by Genre**: Allow users to filter movies based on their genre.
+- 🎚️ **Sort by Rating**: Add sorting options for movies (e.g., ascending/descending ratings).
+

jobs/Frontend/sprado-movie-app/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:3000",
+    supportFile: "cypress/support/e2e.{js,jsx,ts,tsx}",
+    fixturesFolder: "cypress/fixtures",
+  },
+});

jobs/Frontend/sprado-movie-app/cypress/e2e/SearchPage.cy.ts

@@ -0,0 +1,46 @@
+describe("SearchPage", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("allows the user to search for a movie and see results", () => {
+    cy.get('[data-testid="search-input"]').should("be.visible");
+
+    cy.get('[data-testid="search-input"]').type("Inception");
+
+    cy.get('[data-testid="loading-indicator"]').should("be.visible");
+    cy.get('[data-testid="loading-indicator"]').should("not.exist");
+
+    cy.get('[data-testid="movie-list"]')
+      .find('[data-testid="movie-card"]')
+      .should("have.length.at.least", 1);
+
+    cy.contains("Inception").should("be.visible");
+  });
+
+  it("navigates to the next page and fetches more movies", () => {
+    cy.get('[data-testid="search-input"]').type("Lord");
+
+    cy.get('[data-testid="loading-indicator"]').should("not.exist");
+
+    cy.get('[data-testid="next-page-button"]').click();
+
+    cy.get('[data-testid="loading-indicator"]').should("not.exist");
+
+    cy.get('[data-testid="movie-list"]')
+      .find('[data-testid="movie-card"]')
+      .should("have.length.at.least", 1);
+  });
+
+  it("navigates to the detail page when a movie card is clicked", () => {
+    cy.get('[data-testid="search-input"]').type("Inception");
+
+    cy.get('[data-testid="loading-indicator"]').should("not.exist");
+
+    cy.get('[data-testid="movie-card"]').first().click();
+
+    cy.url().should("include", "/movie/");
+  });
+});
+
+export {};

jobs/Frontend/sprado-movie-app/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

jobs/Frontend/sprado-movie-app/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

jobs/Frontend/sprado-movie-app/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

jobs/Frontend/sprado-movie-app/eslint.config.mjs

@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

jobs/Frontend/sprado-movie-app/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "sprado-movie-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.122",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
+    "eslint": "^9.17.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dom-testing": "^1.12.0",
+    "react-router-dom": "6",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/cypress": "^1.1.6",
+    "cypress": "^13.16.1",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "jest": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-watch-typeahead": "^2.2.2",
+    "prettier": "^3.4.2",
+    "tailwindcss": "^3.4.16",
+    "typescript-eslint": "^8.18.0"
+  }
+}

jobs/Frontend/sprado-movie-app/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Movie-search-app" />
+    <title>Movie Search App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

jobs/Frontend/sprado-movie-app/src/App.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { SearchPage } from "./pages/SearchPage/SearchPage";
+import { MovieDetailPage } from "./pages/MovieDetailPage/MovieDetailPage";
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<SearchPage />} />
+        <Route path="/movie/:id" element={<MovieDetailPage />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;

jobs/Frontend/sprado-movie-app/src/components/MovieCard/MovieCard.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import FallbackPoster from "../../assets/fallback-poster.png";
+
+import type { Movie } from "../../types";
+import { useNavigate } from "react-router-dom";
+
+export const MovieCard = ({ movie }: { movie: Movie }) => {
+  const navigate = useNavigate();
+
+  const handleMovieClick = () => {
+    navigate(`/movie/${movie.id}`);
+  };
+
+  return (
+    <div
+      className="bg-darkSoft rounded-lg overflow-hidden shadow-lg transition-transform duration-200 hover:scale-105 hover:shadow-2xl flex flex-col h-full cursor-pointer"
+      onClick={handleMovieClick}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          handleMovieClick();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      aria-label={`View details for ${movie.title}`}
+      data-testid="movie-card"
+    >
+      <img
+        src={
+          movie.poster_path
+            ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+            : FallbackPoster
+        }
+        loading="lazy"
+        alt={movie.title}
+        className="w-full h-56 object-cover"
+      />
+      <div className="p-4">
+        <h2 className="text-lg font-semibold text-white mb-2 line-clamp-2">
+          {movie.title}
+        </h2>
+        <p className="text-gray-400">
+          Rating:{" "}
+          {movie.vote_average !== undefined && movie.vote_average !== null
+            ? movie.vote_average.toFixed(2)
+            : "N/A"}
+        </p>
+      </div>
+    </div>
+  );
+};

jobs/Frontend/sprado-movie-app/src/components/MovieList/MovieList.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Movie } from "../../types";
+import { MovieCard } from "../MovieCard/MovieCard";
+
+export const MovieList = ({ movies }: { movies: Movie[] }) => {
+  if (movies.length === 0) {
+    return <p className="text-2xl text-center mt-6">No movies found</p>;
+  }
+
+  return (
+    <div
+      data-testid="movie-list"
+      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+    >
+      {movies.map((movie) => (
+        <MovieCard movie={movie} key={movie.id} />
+      ))}
+    </div>
+  );
+};