Toplist

A toplist displays ranked items based on a specific metric (e.g., most popular, highest rated, most viewed). 1. Frontend Component (React + Tailwind) import useState, useEffect from 'react'; const Toplist = ( endpoint, limit = 10, title ) => const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [timeframe, setTimeframe] = useState('week');

if (loading) return <div>Loading toplist...</div>; toplist

const timeCondition = interval ? AND i.created_at > NOW() - INTERVAL '$interval' : ''; A toplist displays ranked items based on a

useEffect(() => fetch( $endpoint?limit=$limit&timeframe=$timeframe ) .then(res => res.json()) .then(data => setItems(data); setLoading(false); ); , [timeframe, endpoint, limit]); AND i.created_at &gt

export default Toplist; Database Schema (PostgreSQL example) CREATE TABLE items ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, category VARCHAR(100), thumbnail TEXT, created_at TIMESTAMP DEFAULT NOW() ); CREATE TABLE interactions ( id SERIAL PRIMARY KEY, item_id INT REFERENCES items(id) ON DELETE CASCADE, type VARCHAR(50) CHECK (type IN ('view', 'like', 'vote', 'purchase')), created_at TIMESTAMP DEFAULT NOW() ); API Endpoint app.get('/api/toplist', async (req, res) => const limit = 10, timeframe = 'week', metric = 'views' = req.query; let interval; switch(timeframe) case 'day': interval = '1 day'; break; case 'week': interval = '7 days'; break; case 'month': interval = '30 days'; break; default: interval = null;

try const result = await db.query(query, [metric, parseInt(limit)]); res.json(result.rows); catch (err) res.status(500).json( error: err.message );