In this tutorial, I’m going to show you how to create a tour diary app using , Redux, and . It will cover all available options to using Cosmic JS. Next Ant design Cosmic JS CRUD TL;DR Download the GitHub repo. Check out the demo. Prerequisites You will be required to install Node JS and npm before starting. Make sure you already have them installed. Getting Started: First, we will setup the bucket in Cosmic JS. **Setup bucket:**To create the bucket, login to and click add ‘new bucket’. Cosmic JS Select start from scratch. **Import Bucket Data:**Download this file. And in Settings -> Import / Export Data, click “Add Import File” and choose the downloaded file. It will import all the Object Types and required data. bucket.json Now we will work on application. Doing everything using the existing git repo You need to have git installed in your system in order to clone the repository. Once done run the following command through terminal or command line: git clone https://github.com/cosmicjs/next.js-tour-diary will look like this: package.json What we’re installing and why We’re going to use and libraries to create components and managing state in . Next Redux Next We’re using package to navigate between our pages. next-routes We’re using package to create beautiful layouts using react components. We’re using for integrating with . antd babel-plugin-import, babel-plugin-inline-import, babel-plugin-transform-decorators-legacy ant design next We’re going to use library to handle our requests to our Cosmic JS bucket. cosmicjs is used for editor & , has been installed to interact with its content and state. react-draft-wysiwyg draft-js immutable, html-to-draftjs, draftjs-to-html, react-html-parser We’re using for image zooming effect. react-medium-image-zoom We’re using for time and date manipulation. moment We’re using for setting environment variables and for setting them by creating file in our project. cross-env babel-plugin-inline-dotenv .env We’re using and a predefined set of rules in for code linting. eslint eslint-config-rallycoding We’re using for managing our since it got destroyed in page reload. react-cookies redux store Building our app Once we’re done installing every required package by running npm install, let’s start creating our app. Let’s create our component by creating a file in and adding the following code in it: TourDetailModal Tour/TourDetailModal.js TourDetailModal.js This is the abbreviated version of . the article that originally appeared on Cosmic JS **Conclusion**So, this is an app where every scenario of Cosmic RESTful API using the Cosmic JS npm package is covered (CRUD). I hope you like the tutorial. If you have any questions please and join the . reach out to Cosmic JS on Twitter Cosmic JS Community on Slack
