As spring came to Berlin and green areas around the city turned into impromptu tanning parlors, the Contentful team decided to go along with the playful spirit and spend a day hacking around & bringing our personal ideas to life. The only rule we set for a hackathon was that everybody had to show something at the end of the day.
It turns out that neither sunny weather nor presence of beers & pizzas already around lunch time prevented our team from developing an interesting range of add-ons and demo apps leveraging Contentful for content delivery. While we had fun building them, we also hope that they will serve as nice examples of how you can tap into Contentful to build your own projects.
So here is a quick rundown of the projects built.
Cosmonaut (space visualizer)
Upon signing up for Contentful you will quickly notice that our platform is structured around 'spaces'. A space is a container hosting all content models, individual entries, and settings for a given project. Noticing how time consuming it can be to get a quick overview of information in your space, one of our developers built an app for exploring the structure of your space. All you need to get started is provide a space ID and access token.
- Demo app: http://contentful.github.io/cosmonaut/
- Source code: https://github.com/contentful-labs/cosmonaut#cosmonaut
Contentful-to-CouchDB synchronization
Now and then we get asked about advice on ways to back up content outside of the Contentful platform. Integration with CouchDB addresses this need head on: install the NPM package, run the configuration script and few moments later all your data is replicated in a CouchDB database.
CouchDB was a very interesting fit since it is a database developed with replication in mind: the fact that it stores JSON documents and uses HTTP as a transport protocol made it a perfect match for working with the Contentful API, which also happens to leverage JSON format and is HTTP based.
Generic guide app (React.js)
A useful addition to the list of demo apps leveraging content delivery via the Contentful API. Modeled on a typical coffee/beer guide, the app uses React.js and the react-router-component library permitting it to render a page either on the server or in the browser.
- Source code: https://github.com/contentful-labs/guide-app
Coffee guide app (iOS)
Working with a similar concept as the generic guide app, this iOS7 app demonstrates how Contentful can be used to power mobile apps in realistic settings. For example, you will see how to use and extend some of the standard UIKit components found in our iOS SDK. The app also demonstrates how to add custom classes to avoid coupling the model and view layers with the SDK too much.
Lightweight Blog (Sinatra and Ruby)
Our Ruby developer decided to go for a simple Rack/Sinatra application demonstrating the basic usage of the contentful.rb RubyGem. The app uses the Sinatra framework to pull content from the Contentful Delivery API. Caching of objects and permalink style URLs is handled with Redis.
Q&A app (iOS)
Noting how difficult it is to develop mobile apps for services relying on multiple listings, a member of our team decided to build a sample Q&A app helping users to find a rated doctor. The app capitalizes on the flexibility afforded by content structure on Contentful to speed up data entry and maintenance.
- Source code: https://github.com/contentful-labs/contentful-qa-app
Contentful Middleman
For those who would like to use Contentful for static websites without getting their hands dirty, this extension allows you to combine the Middleman static site generator together with the Contentful CMS. The extension supports both page-based content as well as blog posts. To get started, just add the code to the config.rb file.
- Source code: https://www.contentful.com/ecosystem/middleman/
NG-contentful
Since our management interface is written using the popular AngularJS framework, people have been asking us for an Angular module that makes it easier to work with Contentful. Although it has already been pretty straightforward to use our existing contentful.js API inside your AngularJS project, we created a special module now that makes it even more straightforward. Ng-contentful is available as a bower-Module. It integrates asynchronous operations into AngularJS digest-cycle and provides a couple of helpers that make it easier to work with content types and entries within your app.
- Source code: https://github.com/contentful-labs/ng-contentful
