Add fetchDataFromTMDB function for TMDB API integration

[ahmedalsanadi]

This pull request introduces a reusable fetchDataFromTMDB function to handle API requests to the TMDB (The Movie Database) API. The function abstracts the logic for making fetch requests to the TMDB API by dynamically constructing the endpoint URL and including the required API key, which is stored in the .env.local file for security.

Changes:

• Created the fetchDataFromTMDB function in utile/fetchDataFromTMDB.js.
• The function takes a path parameter that specifies the API route and appends it to the TMDB base URL.
• API key is loaded from environment variables using process.env.Public_API_KEY.
• Error handling is implemented to catch any issues during the API request and log meaningful error messages.

Usage: The fetchDataFromTMDB function can be reused throughout the project to fetch data from the TMDB API by passing a suitable endpoint. For example, it can be used in a component like this:

import { useEffect, useState } from 'react';
import { fetchDataFromTMDB } from '../utile/fetchDataFromTMDB';

const PopularMovies = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      const data = await fetchDataFromTMDB('/movie/popular');
      if (data) {
        setMovies(data.results);
      }
    };

    fetchMovies();
  }, []);

  return (
    <div>
      <h2>Popular Movies</h2>
      <ul>
        {movies.map(movie => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default PopularMovies;