await prisma.$transaction([ prisma.trendingContent.update( where: id: contentId , data: [type === 'like' ? 'likes' : type === 'share' ? 'shares' : 'views']: increment: 1 ), prisma.userInteraction.create( data: userId: req.user.id, contentId, type ) ]);

res.json( data: trendingContent, hasMore: trendingContent.length === limit ); });

export default function TrendingFeed() const [items, setItems] = useState<TrendingItem[]>([]); const [loading, setLoading] = useState(false); const [page, setPage] = useState(0); const observerTarget = useRef(null);

The Trending Score is calculated every 15 minutes via a background job (Celery/Bull).

const trendingContent = await prisma.trendingContent.findMany( where: whereClause, orderBy: trendScore: 'desc' , take: parseInt(limit), skip: parseInt(offset), include: _count: select: userBookmarks: true

Simplified implementation:

/* Masonry/Grid Feed */ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> items.map((item, idx) => ( <motion.div key=item.id initial= opacity: 0, y: 20 animate= opacity: 1, y: 0 transition= delay: idx * 0.05 className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition" > <div className="relative aspect-video bg-black"> item.contentType === 'VIDEO' ? ( <video src=item.thumbnailUrl className="w-full h-full object-cover" /> ) : ( <img src=item.thumbnailUrl alt=item.title className="w-full h-full object-cover" /> ) <div className="absolute top-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded-full"> 🔥 item.trendScore.toFixed(1) trending </div> </div> <div className="p-4"> <h3 className="font-semibold line-clamp-2">item.title</h3> <div className="flex justify-between items-center mt-4"> <button onClick=() => handleLike(item.id) className="flex items-center gap-1 text-gray-600"> item.userLiked ? <HeartSolidIcon className="w-5 h-5 text-red-500" /> : <HeartIcon className="w-5 h-5" /> <span>item.likes</span> </button> <button className="flex items-center gap-1 text-gray-600"> <ChatBubbleLeftIcon className="w-5 h-5" /> <span>23</span> </button> <button className="flex items-center gap-1 text-gray-600"> <ShareIcon className="w-5 h-5" /> <span>item.shares</span> </button> </div> </div> </motion.div> )) </div> loading && <div className="text-center py-8">Loading more trends...</div> <div ref=observerTarget className="h-10" /> </div> );