🏆 Pick Your Champion - Netlify Dynamic Site Challenge

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

🚀 Pick Your Champion

📸 Screenshots

Platform Primitives

Netlify Image CDN

• 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.

First fetching timing cost

Fetching from the cache

Response Headers

Netlify's cache control capabilities is so good, make the API 10 times faster from the cache!!!