write-with-webiny
write-with-webiny copied to clipboard
webiny
Build a Trello Clone with Gatsby and Webiny
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
Sample articles
No response
