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' );
export const fetchTrending = (mediaType = 'all', timeWindow = 'week') => API.get( /trending?mediaType=$mediaType&timeWindow=$timeWindow ); xxx-av20432
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> console.log('Server running on port 5000'))
// Get trending movies/TV app.get('/api/trending', async (req, res) => const mediaType = 'all', timeWindow = 'week' = req.query; try const response = await axios.get( $TMDB_BASE/trending/$mediaType/$timeWindow?api_key=$API_KEY ); res.json(response.data.results); catch (error) res.status(500).json( error: error.message ); timeWindow = 'week') =>
return ( <div className="container mx-auto p-4"> <h1 className="text-3xl font-bold mb-6">🔥 Trending This Week</h1> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> trending.map((item) => ( <ContentCard key=item.id item=item onClick=() => navigate( /details/$item.media_type/$item.id ) /> )) </div> </div> ); ;