Favorite Book App

Community Articles
Community Articles Favorite Book App

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 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. As you can see it is simple to add books or any type of content to Cosmic. 


Getting Started

I used Node JS for the backend language, because Node’s NPM manager is a perfect tool to use with Cosmic. 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 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 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 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 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, it allows you the ability to build great applications quickly, and isn't that what we all want?

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify.
This article shows you how to create a blazing fast Gridsome blog using Cosmic source plugin. Let’s get started.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic API. This app has all the basic modules like signin, signup, view/edit profi
Digital Ocean, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. In this tutorial I'm going to show you how to install and deploy a Cosmic-powered Nuxt.js app on Digital Ocean.
Add the power of Algolia search to your Bucket. This Extension enables you to sync your Cosmic Objects with Algolia, making your data searchable. Set up automatic syncing to automatically add / edit / remove content from Algolia. Follow the simple steps below to install and setup Algolia.
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales