DEV Community

Cover image for Gallery Spaces - Create your own gallery and share
Gabriel Sena
Gabriel Sena

Posted on

Gallery Spaces - Create your own gallery and share

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've developed a gallery platform that empowers users to create their own galleries, manage them (uploading and deleting images), share their work with others, and customize images before downloading.

Key features include:

  • Gallery: Leveraging Netlify Image CDN to showcase our image galleries.
  • Image Customization: Utilizing Netlify Image CDN for on-the-fly image customization prior to download.
  • Image Uploader System: Employing Netlify Blobs to store user-uploaded images.
  • Authentication System: Utilizing Netlify Blobs to store user authentication data.

Demo

Demo Link
User Gallery Example

Go ahead and create your own gallery and share to everyone too 😸

Some pictures

App gif

App homepage

Gallery viewer

Image gallery viewer

Platform Primitives

To submit my entry, I utilized Netlify Image CDN and Netlify Blobs Platform Primitives.

For enhanced user image experiences, Netlify Image CDN proved invaluable, enabling flexible image customization:

  • All Gallery Images (Example Gallery) are loaded using Netlify Image CDN.
  • Gallery Image customization (such as clicking on an image) is facilitated by Netlify Image CDN, allowing for image transformations before download.
  • Throughout the website, Netlify Image CDN, integrated with NuxtImg, ensures optimized image customization.

To store datas, such as authentication, images, and gallery data, I employed Netlify Blobs with separate stores for authentication, gallery, and images, each dedicated to user data:

  • The authentication system, including user credentials and JWT tokens, is stored with Netlify Blobs, utilizing mainly directories.
  • Image uploads, including profile pictures and gallery images, leverage Netlify Blobs, eliminating the need for additional file storage systems.
  • User gallery data is organized and stored using directories provided by Netlify Blobs, ensuring efficient data management.

If you're curious to delve deeper, the submission code is open source on my GitHub. Feel free to check it out!

Github Repository-

Top comments (0)