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' );
if (loading) return <div className="text-center p-10">Loading trending content...</div>; xxx-av20432
);
useEffect(() => const getTrending = async () => const data = await fetchTrending(); setTrending(data); setLoading(false); ; getTrending(); , []); console.log('Server running on port 5000'))
const handleSearch = async (e) => e.preventDefault(); if (!query.trim()) return; setLoading(true); const data = await searchContent(query); setResults(data); setLoading(false); ; if (loading) return <
</p> <p className="text-yellow-500 text-sm">⭐ item.vote_average?.toFixed(1)/10</p> </div> </div> ); ;
<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> ); ;