Build a Photo Gallery with Gatsby and Webiny Headless CMS

[endymion1818]

Introduction

With Webiny Headless CMS you can leverage the best of both worlds: it's a place to store both content and files, making it an ideal way of building a photo sharing app similar to Pinterest, Instagram or Flickr. This tutorial will discuss how to make a photo gallery with Gatsby, using Webiny's internal file manager to store images, and the headless CMS to store posts and comments.

Goals

The goal of this article will be to show how Webiny can be used as both a CMS and a file manager, meaning users don't have to go through the extra step (or expense) of setting up a cloud storage service like Cloudinary or Imgx, rather they can upload images, edit them, and retrieve them via GraphQL on their Gatsby site.

Outline

• What is a Headless CMS?
• Why use Webiny CMS?
• Building a Photo Gallery application -- Installing dependencies -- Add a photo grid -- Add a single photo view -- Adding comments to a single photo view
• Setting up Webiny CMS -- Content Structure -- Connecting the CMS to the application
• Creating, Updating, and Deleting Photos
• Conclusion
• Resources

Sample articles

No response

[am-miracle]

I would like to work on this

[icode247]

Hi @endymion1818, I can work on this if it's available.

[endymion1818]

Hey @icode247 welcome back! Let's chat in the community about the detail on this one 👍

[endymion1818]

Hi @icode247, your draft has received some feedback, looking forward to getting this one in the queue for publication!