This is a submission for the Netlify Dynamic Site Challenge: Visual Feast & Build with Blobs & Clever Caching.
What I Built
Pick Your Champion is an interactive Quiz, player can pick the ideal type here.
Demo
📸 Screenshots
Platform Primitives
Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.
Netlify Blobs
Use it to store voting data.
import { getStore } from '@netlify/blobs';
export default async (req: Request) => {
const { searchParams } = new URL(req.url);
const gameId = searchParams.get('gameId');
const roleId = searchParams.get('roleId');
const store = getStore(`pick-your-champion`);
const data = (await store.get(gameId, { type: 'json' })) || {};
const preCount = data[roleId] ?? 0;
data[roleId] = preCount + 1;
await store.setJSON(gameId, data, {
metadata: {
lastModified: new Date().toISOString(),
},
});
return new Response(data);
};
Netlify's fine-grained cache control capabilities
Implement custom Cache-Control headers, utilize the Netlify-CDN-Cache-Control header for edge caching, and demonstrate cache invalidation using cache tags.
Netlify's cache control capabilities is so good, make the API 10 times faster from the cache!!!
Top comments (0)