The latest articles on DEV Community by Seno Aji (@cydnirn). https://dev.to/cydnirn https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1072514%2F85d2981b-4ec7-423a-96f5-9d77ac76ca70.jpg https://dev.to/cydnirn en Seno Aji Mon, 13 May 2024 06:53:31 +0000 https://dev.to/cydnirn/phantomq-a-collaborative-writing-platform-with-image-gallery-23ci https://dev.to/cydnirn/phantomq-a-collaborative-writing-platform-with-image-gallery-23ci <p><em>This is a submission for the <a href="https://dev.to/challenges/netlify">Netlify Dynamic Site Challenge</a>: Visual Feast.</em></p> <p><em>This is a submission for the <a href="https://dev.to/challenges/netlify">Netlify Dynamic Site Challenge</a>: Build with Blobs.</em></p> <h2> What I Built </h2> <p>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</p> <h2> Demo </h2> <p>You can try PhantomQ <a href="https://phantomq.netlify/app" rel="noopener noreferrer">here</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74w1lqd32m25d9w9p38f.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74w1lqd32m25d9w9p38f.png" alt="Pictures" width="800" height="396"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeygzrjbkvkpe2ed4z8j.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmeygzrjbkvkpe2ed4z8j.png" alt="Gallery" width="800" height="396"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhu8wzp67kweqjfr28mlu.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhu8wzp67kweqjfr28mlu.png" alt="Tales" width="800" height="396"></a></p> <p>Though the Tales section might be a bit buggy (Since I'm new at using blobs), the Gallery might not be so</p> <h2> Platform Primitives </h2> <p>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</p> <p>I also try to implement Netlify Blobs for the Tales Section, people can anonymously collaborate on creating a unified chaotic story</p> <p>Because there is rarely any changes to the gallery, I opt-in for the following cache strategy on Netlify Functions to fetch all images</p> <p><code>return Response.json(await res.json(), {<br> headers: {<br> "Cache-Control": "max-age=604800, public",<br> "Netlify-CDN-Cache-Control":<br> "public, max-age=259200, stale-while-revalidate=30",<br> "Netlify-Cache-Tag": "images",<br> },<br> });</code></p> netlifychallenge devchallenge webdev javascript