Favorite Book List App using Cosmic JS

TL;DR

Download the Github repo

Check out the demo

Intro
This app provides avid reader fans a way to view a list of favorite books. Using Cosmic JS you can add books to this list and in addition, a link to purchase the book. The main page displays the current books in the list with a short description/comment of the book. To obtain more info about the book you can click on the “More Info” button. This takes you to the page where it displays a full description/comment of the book along with the full image and a link to purchase on Amazon.

Preparing Backend
The first step is to create a Bucket. After that we need to create an Object Type for describing the books in our app. To accomplish this within your bucket click on “Add Object Type.” For the book app we will have a title with author, and three Metafields. The three Metafields we will use are: a “website” title with a link to the amazon purchase page, an “image” title Metafield with an image url, and a “comments” title Metafield with a description/comment.

That concludes the backend setup using Cosmic JS. As you can see it is simple to add books or any type of content to Cosmic JS.

Getting Started
I used Node JS for the backend language, because Node’s NPM manager is a perfect tool to use with Cosmic JS. Start by creating a folder titled BookApp. This will be the directory where the app will live. For the front end framework I decided to use Semantic UI. This works great with getting a site up and running and look nice with the default selections.

After this setup I created an app.js file, index.ejs, and show.ejs. The app.js file contains the location for all the routes and setup for the application. I used the bucket.getObjects to grab all the data for the books. This is a super simple process and requires only a couple lines of code.

The index page is where I setup the columns and segments for displaying the books. In this file, I looped through the Objects in Cosmic JS and displayed all the data each in a segment with it’s appropriate content. Semantic UI makes it simple to group things together in a segment inside of a container.

The last file is the show.ejs file. This file was displayed when the “More Info” button was clicked. This was done by writing a get request and identifying the specific slug. The slug plays the role of an id for that specific book. Once the slug for that Object Type was identified, that data was passed to the show.ejs file. Here the content was displayed again using segments similar to what was done in the index.ejs page.

Deploying
Next is deploying your book app. Cosmic JS makes this really simple. For this application the only thing you need to do is add to your package.json file. Under the scripts section we will need to add, ‘“start”: node app.js’. When you click deploy on Cosmic JS this will search for what to run and we need to make sure that node app.js is called.

For the actual deploying it’s as simple as going to Settings -> Web Hosting -> Deploy to Cosmic. They will then send you a confirmation email if your app deployed properly. If not, on the deploy page there will be an error log that will help determine what to fix to make it deploy correctly.

Conclusion
Overall Cosmic JS is a great tool for building your applications. It makes it easy and fast to add and edit the content with ease. By using something like Cosmic JS, it allows you the ability to build great applications quickly, and isn't that what we all want?