Card Description - (Use the “Long Text” field).List Board - ( Use the “Reference” field Select the content model BoardModel while creating this field)Ĭreate a content model for cards with the title “CardModel” and select “Trello” in the “Content model group” field.Īdd the following fields to the content model CardModel:.Set “Trello” as the title of the content group.Īfter saving the content group, go to the “Content Models” page from the main menu.Ĭlick on the “+ New Model” button to create a new content model.Ĭreate a content model for boards with the title “BoardModel” and select “Trello” in the “Content model group” field.Īdd the following fields to the content model BoardModel:Ĭreate a content model for lists with the title “ListModel” and select “Trello” in the “Content model group” field.Īdd the following fields to the content model ListModel: On the “Content Models” page, create a new group by clicking on the “+ New Group” button and filling in the required details. As the name suggests, content groups allow us to categorize content models into groups. Click on the “Groups” option under the “Content Models” section inside the “Headless CMS” tab. Visit the URL on which your Webiny instance was deployed and log in with your credentials.Īfter logging in, you’ll be redirected to the dashboard.Ĭlick on the Hamburger menu on the top-left side of the screen to open the main menu. Configure Webiny Instanceįirst, let’s configure our Webiny CMS to store the data for our application. Next, we will configure our Webiny CMS instance as the backend of our application. Now you have a clean installation of Next.js with Tailwind CSS. Go to the index.tsx file and remove all the boilerplate code - HTML from the, , and the tag. Open the project’s root directory and open it in your code editor. If you don’t want to use this method, you can manually configure Tailwind CSS in your Next.js project. This will create a project named “trello-clone” pre-configured with Tailwind CSS. In the same directory where you set up your Webiny project, open the terminal, and type in the command to setup a Next.js project (adjacent to the Webiny project): yarn create next-app -example with-tailwindcss trello-clone You can find out all the relevant URLs at any time by running the following command inside the Webiny project directory: yarn webiny infoĪlso, the in-depth guide on Webiny installtion can be found here. Go to the directory where you want to set up your project, open the terminal, and type in the command: npx create-webiny-project Īnd run the following command to deploy the project: yarn webiny deployĪfter the deployment is complete, you will be presented with the URL for your Webiny project, where you can enter the Admin Dashboard and begin developing the project's backend. To create a Webiny project, you need an AWS account and Node.js installed on your system. Now, let’s build our application step-by-step. An active AWS account to host your Webiny instance.Basic understanding of JavaScript, React, and Next.js.To follow along with this tutorial you need to have the following: To build this application, we will use Webiny CMS, Next.js, Tailwind CSS (a CSS framework), and React Beautiful DND (a react library for drag and drop functionality). Move cards between the lists by dragging them.Reorder cards inside a list by dragging them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |