🏆 Pick Your Champion - Netlify Dynamic Site Challenge
Tags: netlifychallenge, devchallenge, webdev, javascript
Published: 2024-05-12 06:25:06

*This is a submission for the [Netlify Dynamic Site Challenge](https://dev.to/challenges/netlify): Visual Feast & Build with Blobs & Clever Caching.*


## What I Built
<!-- Share an overview about your project. -->
**[Pick Your Champion](https://uwarp.netlify.app/pick-your-champion)** is an interactive Quiz, player can pick the ideal type here.

## Demo
<!-- Share a link to your Netlify app and include some screenshots here. -->

**🚀 [Pick Your Champion](https://uwarp.netlify.app/pick-your-champion)**

**📸 Screenshots**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9cwk8ddphe80udylr5r.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgvml9gbr4u1fppggjme.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4l00ror8gtmrucxpoil.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obtfwfxhcjne67cb7dhh.png)

## Platform Primitives
<!-- Tell us how you leveraged the Netlify Image CDN. -->
**[Netlify Image CDN](https://docs.netlify.com/image-cdn/overview/)**

- 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](https://docs.netlify.com/blobs/overview/)**
Use it to store voting data.
```ts
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](https://docs.netlify.com/platform/caching/)**

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzgdnekps1o0lusxyfbr.png)

Fetching from the cache
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t9gn3su23mr4mlipg0e.png)

Response Headers
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejlji0e2e9355e8qqat3.png)

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




<!-- Did you implement additional platform primitives like Netlify Blobs or Cache Control? Tell us about that too! You may qualify for more than one prompt. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->


<!-- Don't forget to add a cover image (if you want). -->


<!-- Thanks for participating! -->