How to build a Tour Diary App using Next.js and Cosmic JS

In this tutorial, I’m going to show you how to create a tour diary app using Next, Redux, Ant design and Cosmic JS. It will cover all available options to CRUD using Cosmic JS.

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 Cosmic JS and click add ‘new bucket’.

Select start from scratch.

**Import Bucket Data:**Download this bucket.json 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.

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

package.json will look like this:

What we’re installing and why

1. We’re going to use Next and Redux libraries to create components and managing state in Next.
2. We’re using next-routes package to navigate between our pages.
3. We’re using antd package to create beautiful layouts using react components. We’re using babel-plugin-import, babel-plugin-inline-import, babel-plugin-transform-decorators-legacy for integrating ant design with next.
4. We’re going to use cosmicjs library to handle our requests to our Cosmic JS bucket.
5. react-draft-wysiwyg is used for editor & draft-js, immutable, html-to-draftjs, draftjs-to-html, react-html-parser has been installed to interact with its content and state.
6. We’re using react-medium-image-zoom for image zooming effect.
7. We’re using moment for time and date manipulation.
8. We’re using cross-env for setting environment variables and babel-plugin-inline-dotenv for setting them by creating .env file in our project.
9. We’re using eslint and a predefined set of rules in eslint-config-rallycoding for code linting.
10. We’re using react-cookies for managing our redux store since it got destroyed in page reload.

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 TourDetailModal component by creating a file in Tour/TourDetailModal.jsand adding the following code in it:

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 reach out to Cosmic JS on Twitter and join the Cosmic JS Community on Slack.