DEV Community

Riday
Riday

Posted on

Netlify Dynamic Site Challenge: Mini Gallery

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast + Build with Blobs + Clever Caching. (All 3 prompts)

What I Built

Introducing Mini Gallery, a cosy corner on the internet where you can share and appreciate beautiful images. Dive into a stream of captivating visuals posted by our community members, and join in on conversations with comments and likes. Finally, feel free to share your images and be the centre of attention.

Demo

Link: https://mini-gallery.netlify.app/

Home Page

Create Post Page

Image Post 1

Image Post 2

Profile Page

Platform Primitives

Netlify Image CDN

I used the Netlify Image CDN to optimize images. Thanks to Netlify's Next.js runtime, this happens automatically when we use the next/image element. Image optimization helps us by caching all the images so we don't have to wait for the server on every request.

Netlify Blobs

I used Netlify Blobs to store all the images uploaded by the users. I save the image and some metadata to Netlify Blob whenever a new post is created. Then, I pick up the image from the blob storage and serve it on demand.

Cache-Control

I have implemented Netlify's CDN Cache-Control to cache all the images posted by the users with tags. Caching helps improve speeds and reduces the load on the server. Then, whenever a user deletes their post, I use the purgeCache function to delete the post from the CDN cache.

Tech Stack

Wrapping Up

I had a lot of fun building this. I will open-source the code and make another post to share what I have learned while building this project.

Edit: Link to Tutorial

Thanks!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more