feat: implement front-end scaffolding

client/.env.example

@@ -0,0 +1,6 @@
+# Client Environment Variables
+# Copy this file to .env.local and update the values as needed
+
+# URL of the Express API server
+# Default: http://localhost:3001 (for local development)
+API_URL=http://localhost:3001

client/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+package-lock.json
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

client/app/components/MovieCard/MovieCard.module.css

@@ -0,0 +1,156 @@
+/**
+ * Movies Page Styles
+ * 
+ * CSS Module for the movies page component.
+ * Provides responsive grid layout and movie card styling.
+ */
+
+.moviesGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+  width: 100%;
+  max-width: 1200px;
+}
+
+.movieCard {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.movieCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.moviePoster {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  margin-bottom: 16px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.moviePoster img {
+  border-radius: 4px;
+}
+
+.posterPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #666;
+  font-size: 14px;
+  text-align: center;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.movieInfo {
+  margin-bottom: 16px;
+}
+
+.movieTitle {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #333;
+}
+
+.movieYear {
+  margin: 0 0 4px 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.movieRating {
+  margin: 0 0 4px 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.movieGenres {
+  margin: 0;
+  color: #888;
+  font-size: 12px;
+  font-style: italic;
+}
+
+.detailsButton {
+  width: 100%;
+  background: #0066cc;
+  color: white;
+  border: none;
+  padding: 12px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.detailsButton:hover {
+  background: #0052a3;
+}
+
+.noMovies {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+.pageTitle {
+  margin: 0 0 16px 0;
+  font-size: 32px;
+  color: #333;
+}
+
+.movieCount {
+  margin: 0 0 32px 0;
+  color: #666;
+  font-size: 16px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .moviesGrid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 16px;
+  }
+
+  .moviePoster {
+    height: 240px;
+  }
+
+  .pageTitle {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 480px) {
+  .moviesGrid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .movieCard {
+    padding: 12px;
+  }
+
+  .moviePoster {
+    height: 200px;
+  }
+
+  .pageTitle {
+    font-size: 24px;
+  }
+}

client/app/components/MovieCard/MovieCard.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Image from 'next/image';
+import movieStyles from "./MovieCard.module.css";
+import { MovieCardProps } from "../../types/movie";
+
+/**
+ * Movie Card Client Component
+ * 
+ * This component handles the interactive parts of the movie card,
+ * such as image error handling, while the parent remains a Server Component.
+ */
+export default function MovieCard({ movie }: MovieCardProps) {
+  const handleImageError = () => {
+    // This will be handled by the Image component's onError prop
+    console.warn(`Failed to load poster for: ${movie.title}`);
+  };
+
+  return (
+    <div className={movieStyles.movieCard}>
+      <div className={movieStyles.moviePoster}>
+        {movie.poster ? (
+          <Image
+            src={movie.poster}
+            alt={`${movie.title} poster`}
+            fill
+            sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 280px"
+            style={{ objectFit: 'cover' }}
+            onError={handleImageError}
+            placeholder="blur"
+            blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R7Dh5zq6esmOk2cWkgaWKJZoSGEa5qKUlPP45++P//Z"
+          />
+        ) : (
+          <div className={movieStyles.posterPlaceholder}>
+            No Poster Available
+          </div>
+        )}
+      </div>
+
+      <div className={movieStyles.movieInfo}>
+        <h3 className={movieStyles.movieTitle}>{movie.title}</h3>
+        {movie.year && (
+          <p className={movieStyles.movieYear}>({movie.year})</p>
+        )}
+        {movie.imdb?.rating && (
+          <p className={movieStyles.movieRating}>⭐ {movie.imdb.rating}/10</p>
+        )}
+        {movie.genres && movie.genres.length > 0 && (
+          <p className={movieStyles.movieGenres}>
+            {movie.genres.slice(0, 3).join(', ')}
+          </p>
+        )}
+      </div>
+
+      <button className={movieStyles.detailsButton} type="button">
+        Get Details
+      </button>
+    </div>
+  );
+}

client/app/components/MovieCard/index.ts

@@ -0,0 +1 @@
+export { default } from './MovieCard';

client/app/components/index.ts

@@ -0,0 +1,2 @@
+// Components
+export { default as MovieCard } from './MovieCard';

client/app/components/ui/ErrorDisplay.tsx

@@ -0,0 +1,55 @@
+/**
+ * Error component for displaying error states
+ */
+
+interface ErrorDisplayProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export default function ErrorDisplay({ 
+  message = "Something went wrong", 
+  onRetry 
+}: ErrorDisplayProps) {
+  return (
+    <div className="error-display">
+      <h2>Error</h2>
+      <p>{message}</p>
+      {onRetry && (
+        <button onClick={onRetry} type="button">
+          Try Again
+        </button>
+      )}
+
+      <style jsx>{`
+        .error-display {
+          text-align: center;
+          padding: 2rem;
+          border: 1px solid #fee2e2;
+          border-radius: 8px;
+          background-color: #fef2f2;
+          color: #991b1b;
+        }
+
+        .error-display h2 {
+          margin: 0 0 1rem 0;
+          color: #dc2626;
+        }
+
+        .error-display button {
+          margin-top: 1rem;
+          padding: 0.5rem 1rem;
+          background: #dc2626;
+          color: white;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        .error-display button:hover {
+          background: #b91c1c;
+        }
+      `}</style>
+    </div>
+  );
+}

client/app/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/**
+ * Loading spinner component
+ */
+
+interface LoadingSpinnerProps {
+  size?: 'small' | 'medium' | 'large';
+  message?: string;
+}
+
+export default function LoadingSpinner({ 
+  size = 'medium', 
+  message = 'Loading...' 
+}: LoadingSpinnerProps) {
+  const sizeClasses = {
+    small: 'w-4 h-4',
+    medium: 'w-8 h-8', 
+    large: 'w-12 h-12'
+  };
+
+  return (
+    <div className="loading-container">
+      <div className={`loading-spinner ${sizeClasses[size]}`}></div>
+      {message && <p className="loading-message">{message}</p>}
+
+      <style jsx>{`
+        .loading-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+          padding: 2rem;
+        }
+
+        .loading-spinner {
+          border: 2px solid #f3f3f3;
+          border-top: 2px solid #3498db;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+
+        .w-4 { width: 1rem; height: 1rem; }
+        .w-8 { width: 2rem; height: 2rem; }
+        .w-12 { width: 3rem; height: 3rem; }
+
+        .loading-message {
+          color: #666;
+          margin: 0;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}