React Frontend Application

Overview

The Movie List frontend is a React.js application that provides an interactive user interface for browsing movies, watching trailers, and reading/writing reviews. It uses modern React patterns including hooks, routing, and component-based architecture.

Application Structure

Entry Point (index.js)

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

Key Features:

• ReactDOM.createRoot: Modern React 18 rendering method
• BrowserRouter: Enables client-side routing for single-page application behavior
• Bootstrap CSS: Provides pre-built styling components
• React.StrictMode: Helps identify potential problems in development

Main Application Component (App.js)

State Management

const [movies, setMovies] = useState();
const [movie, setMovie] = useState();
const [reviews, setReviews] = useState([]);

State Variables:

• movies: Array of all movies for the home page carousel
• movie: Currently selected movie for detailed view
• reviews: Array of reviews for the selected movie

API Integration

const getMovies = async () => {
  try {
    const response = await api.get("/api/v1/movies");
    setMovies(response.data);
  } catch(err) {
    console.log(err);
  }
}

const getMovieData = async (movieId) => {
  try {
    const response = await api.get(`/api/v1/movies/${movieId}`);
    const singleMovie = response.data;
    setMovie(singleMovie);
    setReviews(singleMovie.reviews);
  } catch (error) {
    console.error(error);
  }
}

API Functions:

• getMovies(): Fetches all movies from the backend API
• getMovieData(movieId): Fetches specific movie details and reviews

Routing Configuration

<Routes>
  <Route path="/" element={<Layout/>}>
    <Route path="/" element={<Home movies={movies} />} />
    <Route path="/Trailer/:ytTrailerId" element={<Trailer/>} />
    <Route path="/Reviews/:movieId" element={<Reviews getMovieData={getMovieData} movie={movie} reviews={reviews} setReviews={setReviews} />} />
    <Route path="*" element={<NotFound/>} />
  </Route>
</Routes>

Route Structure:

• / - Home page displaying movie carousel
• /Trailer/:ytTrailerId - Movie trailer page with YouTube video
• /Reviews/:movieId - Movie reviews page with review form
• ****** - Catch-all route for 404 pages

API Configuration (axiosConfig.js)

import axios from 'axios';

export default axios.create({
    baseURL: 'http://localhost:8080',
    headers: {"ngrok-skip-browser-warning": "true"}
});

Configuration Details:

• baseURL: Points to the Spring Boot backend API
• ngrok-skip-browser-warning: Header for development tunneling tools
• Axios: HTTP client library for making API requests

Component Architecture

Layout Component

const Layout = () => {
  return (
    <main>
      <Outlet/>
    </main>
  )
}

Purpose: Provides a consistent layout wrapper for all pages using React Router's Outlet component.

Header Component

const Header = () => {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container fluid>
        <Navbar.Brand href="/" style={{"color":'gold'}}>
          <FontAwesomeIcon icon={faVideoSlash}/>Gold
        </Navbar.Brand>
        <Nav className="me-auto my-2 my-lg-0">
          <NavLink className="nav-link" to="/">Home</NavLink>
          <NavLink className="nav-link" to="/watchList">Watch List</NavLink>      
        </Nav>
        <Button variant="outline-info">Login</Button>
        <Button variant="outline-info">Register</Button>
      </Container>
    </Navbar>
  )
}

Features:

• React Bootstrap Navbar: Responsive navigation bar
• FontAwesome Icons: Video icon for branding
• NavLink: React Router navigation with active state styling
• Placeholder Buttons: Login/Register (not yet implemented)

Home Component

const Home = ({movies}) => {
  return (
    <Hero movies={movies} />
  )
}

Purpose: Simple wrapper that passes movie data to the Hero component for display.

Hero Component (Movie Carousel)

const Hero = ({movies}) => {
  const navigate = useNavigate();

  function reviews(movieId) {
    navigate(`/Reviews/${movieId}`);
  }

  return (
    <div className='movie-carousel-container'>
      <Carousel>
        {movies?.map((movie) => {
          return(
            <Paper key={movie.imdbId}>
              <div className='movie-card-container'>
                <div className="movie-card" style={{"--img": `url(${movie.backdrops[0]})`}}>
                  <div className="movie-detail">
                    <div className="movie-poster">
                      <img src={movie.poster} alt="" />
                    </div>
                    <div className="movie-title">
                      <h4>{movie.title}</h4>
                    </div>
                    <div className="movie-buttons-container">
                      <Link to={`/Trailer/${movie.trailerLink.substring(movie.trailerLink.length - 11)}`}>
                        <FontAwesomeIcon icon={faCirclePlay} />
                      </Link>
                      <Button variant="info" onClick={() => reviews(movie.imdbId)}>
                        Reviews
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </Paper>
          )
        })}
      </Carousel>
    </div>
  )
}

Key Features:

• Material-UI Carousel: Displays movies in a rotating carousel
• Dynamic Styling: Uses CSS custom properties for background images
• Navigation:
  • Play button links to trailer page
  • Reviews button navigates to reviews page
• YouTube ID Extraction: Extracts video ID from YouTube URL for trailer links

React Concepts Used

Hooks

• useState: Manages component state for movies, reviews, and selected movie
• useEffect: Fetches initial movie data when app loads
• useNavigate: Programmatic navigation between routes

Props

Components receive data through props:

• movies: Passed from App to Home to Hero
• getMovieData: Function passed to Reviews component
• reviews/setReviews: State and setter passed for review management

Conditional Rendering

{movies?.map((movie) => { ... })}

Uses optional chaining (?.) to safely render only when movies data is available.

Key Libraries Used

UI Libraries

• React Bootstrap: Pre-styled components (Navbar, Button, Container)
• Material-UI: Carousel and Paper components
• FontAwesome: Icons for play buttons and branding

Routing

• React Router DOM: Client-side routing with BrowserRouter, Routes, Route, Link, NavLink

HTTP Client

• Axios: Promise-based HTTP client for API requests

Component Communication Flow

1. App Component:

   • Fetches movie data from API
   • Manages global state
   • Provides data to child components

2. Header Component:

   • Independent navigation component
   • Always visible across all pages

3. Home → Hero:

   • Displays movie carousel
   • Handles navigation to trailers and reviews

4. Reviews Component:

   • Receives movie data and review functions
   • Allows users to view and create reviews

Benefits of This Architecture

1. Component Reusability: Each component has a single responsibility
2. State Management: Centralized state in App component with prop drilling
3. Responsive Design: Bootstrap ensures mobile-friendly interface
4. Client-Side Routing: Fast navigation without page reloads
5. API Integration: Clean separation between frontend and backend
6. Modern React Patterns: Uses hooks and functional components throughout