// Search content app.get('/api/search', async (req, res) => const query, page = 1 = req.query; if (!query) return res.status(400).json( error: 'Query parameter required' ); try const response = await axios.get( $TMDB_BASE/search/multi?api_key=$API_KEY&query=$encodeURIComponent(query)&page=$page ); res.json(response.data.results); catch (error) res.status(500).json( error: error.message );
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' ); xxx-av20432
// Get details by ID app.get('/api/details/:type/:id', async (req, res) => const type, id = req.params; // type: 'movie' or 'tv' try const response = await axios.get( $TMDB_BASE/$type/$id?api_key=$API_KEY&append_to_response=videos,credits ); res.json(response.data); catch (error) res.status(500).json( error: error.message ); // Search content app
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> results.map((item) => ( <ContentCard key=item.id item=item onClick=() => navigate(`/details/$item.media_type/$item.id`) /> )) </div> </div> ); ; // Search content app.get('/api/search'
useEffect(() => const getTrending = async () => const data = await fetchTrending(); setTrending(data); setLoading(false); ; getTrending(); , []);
loading && <p>Searching...</p>
return ( <div className="cursor-pointer rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition transform hover:-translate-y-1 bg-white" onClick=() => onClick(item) > <img src=imageUrl alt= className="w-full h-64 object-cover" /> <div className="p-4"> <h3 className="font-bold text-lg truncate"></h3> <p className="text-gray-600 text-sm">