When you click the Continue button, you will be prompted to add a new field to the newly created collection here, pick the field type as Idea, choose long text and click add another field. You should see a modal box like the one below fill in the display name as Tasks and then click the Continue button to complete the creation of our collection: To do this, click on Content-Type Builder (can be found on the dashboard sidebar), afterward click the Create new collection type link, as seen in the screenshot below: In this phase, we will learn how to create a collection-type and its content, and as seen in the screenshot attached at the beginning of the article, our Trello clone will have the following rows: You will also be asked if you want to use a template, as seen in the screenshot in this case, reply with no, and Strapi will complete the installation in no time.Īfter the whole installation process, the Strapi app should automatically launch in your browser displaying the following page.Ĭopy link from your command prompt cmd and paste it into your browser.įill in your preferred details on this page and click the ready to start button to proceed. Running the command above will prompt you for your preferred installation method select Quick Start to proceed. To setup Strapi for our project, first, change your directory from front-end to the root directory ( /trello-clone), and run the command below to create a new Strapi project: npx create-strapi-app back-end Whether you want to see the finished outcome quickly or learn more about the product. Strapi provides a great deal of flexibility. It also features a media library where you can save your image and music files. To keep things structured, you can build custom content kinds and relationships between the content types. Strapi is really simple to use since it allows you to create versatile APIs with unique features that you'll enjoy. Strapi is an open-source content management system (CMS) that allows you to create customizable APIs for any front-end application. To install Axios, run the command below: npm install axios What is Strapi It can be used in plain JavaScript or with a library such as Vue or React. Axios makes it simple to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. Axios is a promise-based HTTP client for the browser and Node.js. Let's get a quick overview of what Axios is and what it does before installation. And finally, for sending requests to our Strapi API, axios should work just fine for that. If you follow this process react-sortable should install just fine. To install react-sortable, run the command: npm install -save react-sortablejs sortablejs
All touch current browsers and touch devices are supported. It has all of the standard sortings, delaying, swapping, inverting, and other features. React-sortable is a react binding for S ortable, Sortable is a JavaScript library for creating reorderable drag-and-drop lists. Next, for the drag and drop feature, we will be using a react package - react-sortable.js, which was created specifically for this purpose. This should open up a URL ( with the following output: Once finished, you can start the app by running: cd front-end
Running this command will initially ask for permission to install create-react-app and its associated packages on a temporary basis. Next, run the command below to create the react app: npx create-react-app front-end Now that we understand what React is, and how it works, follow the instructions below to set up the React front-end for our application:įirst, create a new directory for our project, we’ll name this directory trello-clone: mkdir trello-clone & cd trello-clone The view layer here refers to how the program looks and feels in Model View Controller (MVC) architecture. It is an open-source, component-based front-end library that is exclusively responsible for the application's view layer. React is a JavaScript library designed for creating quick and interactive user interfaces for web and mobile apps. These are the software you need to have installed.īefore starting with creating our application front-end with React.js, let's get a basic understanding of what react is: Trello shows what is being worked on, who is working on it, and where the task is in the process all at the same time.īelow is a screenshot of what our final project will look like: We'll be creating a Trello clone, which is a project management tool that organizes your work into boards. NB: Strapi recommends 14.x version node js What we’ll be building We'll go over how to create a new Strapi project, how to construct Strapi collections, and how to expose and connect your Strapi API to the front-end.
This article will walk you through the process of creating a Trello clone using react and Strapi.
0 kommentar(er)
