Here Is my New upcomming project Movie Explorer:

import { useState, useEffect } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
// FIXED: Initialize with an empty array so .map() doesn't break or render an empty card on load
const [product, setProduct] = useState([]);

// Integrated useEffect to load data automatically when the component mounts
useEffect(() => {
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
// Safe access: uses optional chaining and fallback to prevent empty array crashes
setProduct(res.data?.data || []);
console.log(res);
})
.catch((err) => console.error("Error fetching movies:", err));
}, []); // Empty dependency array ensures this runs exactly once on page load

return (

Movie Explorer

  <div className="movie-container">
    {product.map((s) => (
      <div className="movie-card" key={s.id}>
        <img
          src={s.poster_path}
          alt={s.original_title}
          className="movie-image"
        />

        <div className="movie-details">
          <h2>{s.original_title}</h2>
          <p>
            <b>Overview:</b> {s.overview}
          </p>
          <p>
            <b>Release Date:</b> {s.release_date}
          </p>
          <p>
            <b>Rating:</b> {s.vote_average} ★
          </p>
        </div>
      </div>
    ))}
  </div>
</div>

);
}

export default Api_fetching;