DEV Community

Cover image for PhantomQ: A Collaborative Writing Platform with Image Gallery
Seno Aji
Seno Aji

Posted on

2

PhantomQ: A Collaborative Writing Platform with Image Gallery

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

I create an anonymous writing collaboration app powered by Netlify blobs, and Picture sharing gallery, with Next.js Image component integrated with Netlify Image CDN provide faster accessibility, with customization for sizes and downloads

Demo

You can try PhantomQ here

Pictures

Gallery

Tales

Though the Tales section might be a bit buggy (Since I'm new at using blobs), the Gallery might not be so

Platform Primitives

Next.Js comes with it's own optimizer and further supported by Netlify Image CDN provide more customability, I utilize Netlify CDN to customize the gallery before user downladed them, with various quality

I also try to implement Netlify Blobs for the Tales Section, people can anonymously collaborate on creating a unified chaotic story

Because there is rarely any changes to the gallery, I opt-in for the following cache strategy on Netlify Functions to fetch all images

return Response.json(await res.json(), {
headers: {
"Cache-Control": "max-age=604800, public",
"Netlify-CDN-Cache-Control":
"public, max-age=259200, stale-while-revalidate=30",
"Netlify-Cache-Tag": "images",
},
});

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay