DEV Community

Cover image for 🏆 Pick Your Champion - Netlify Dynamic Site Challenge
Neo Tang
Neo Tang

Posted on

🏆 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

Image description

Image description

Image description

Image description

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);
};

Enter fullscreen mode Exit fullscreen mode

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
Image description

Fetching from the cache
Image description

Response Headers
Image description

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

Top comments (0)