Xxx-av20432 -

loading && <p>Searching...</p>

);

export const fetchDetails = (type, id) => API.get( /details/$type/$id ); import React from 'react'; const ContentCard = ( item, onClick ) => const imageUrl = item.poster_path ? https://image.tmdb.org/t/p/w500$item.poster_path : 'https://via.placeholder.com/500x750?text=No+Image'; xxx-av20432

app.listen(5000, () => console.log('Server running on port 5000')); 1. Install dependencies npx create-react-app frontend cd frontend npm install axios react-router-dom 2. src/services/api.js import axios from 'axios'; const API = axios.create( baseURL: 'http://localhost:5000/api' ); loading && &lt;p&gt;Searching

export default ContentCard; import React, useEffect, useState from 'react'; import fetchTrending from '../services/api'; import ContentCard from '../components/ContentCard'; import useNavigate from 'react-router-dom'; const Home = () => const [trending, setTrending] = useState([]); const [loading, setLoading] = useState(true); const navigate = useNavigate(); src/services/api

return ( <div className="container mx-auto p-4"> <form onSubmit=handleSearch className="mb-6"> <input type="text" value=query onChange=(e) => setQuery(e.target.value) placeholder="Search movies, TV shows, people..." className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" /> <button type="submit" className="mt-2 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"> Search </button> </form>

);