Build a Trello Clone with Gatsby and Webiny

endymion1818 commented 2 years ago

Introduction

Trello allows users to organize their work in easy to manage, drag & drop columns. There are many similar services available on the web, but there are complexities in building such applications, for example, how to manage drag & drop interactions on the columns as well as the individual cards? And more importantly, where to store the data that users add to their board?

Goals

In this tutorial we will build a Trello clone with Gatsby, using Webiny Headless CMS as a data source. We'll fetch data from Webiny's Headless CMS GraphQL API and render it in our application. Users will be able to create, update and destroy cards and columns. We'll use Gatsby 4 API's such as getServerData() and dynamic routing.

Out of scope: user authentication

Outline

[Here is the sample outline.

What is a Headless CMS
Why use Webiny CMS for this project
Setting up Webiny CMS -- Instantiate & deploy a Webiny instance -- Set up Content Structure
Building a Trello clone application -- Installing dependencies -- Creating an input section -- Add Columns / Collection display -- Connecting the CMS to the application
Creating, Updating, and Deleting Cards
Conclusion