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/
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
- Next.js
- ShadCN UI
- Radix UI
- Tailwind CSS
- Postgres (With Neon DB)
- Prisma
- Kinde Auth
- Netlify
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!
Top comments (0)