examples.html

---
layout: base

examples:
  ostio:
    name: 'Ost.io'
    link: 'http://ost.io/'
    repo: 'https://github.com/paulmillr/ostio'
    shot: 'images/screenshots/ostio-07-2013.png'
    desc: '[!NAME](!LINK) is an open-source forum for GitHub projects ([code](!REPO)). It uses [Brunch with Chaplin](https://github.com/paulmillr/brunch-with-chaplin) as an application skeleton and Rails for the backend.'
  todos:
    name: 'Todos'
    link: 'http://todomvc.com/examples/chaplin-brunch/public/'
    repo: 'https://github.com/tastejs/todomvc/tree/gh-pages/examples/chaplin-brunch/public'
    shot: 'http://todomvc.com/site-assets/screenshot.png'
    desc: '[!NAME](!LINK) ([code](!REPO)) is a port of the famous Backbone todo example app. It uses localStorage to persist data. Alternatively, there is a [Symfony TodoMVC Bundle](http://dunglas.fr/2013/02/symfony-2-todomvc-backbone-chaplin/) ([code](https://github.com/dunglas/DunglasTodoMVCBundle)) — based on [Symfony](http://symfony.com/) PHP framework.'
  composing:
    name: 'Composing with Chaplin'
    link: 'http://chaplinjs.org/composer-example/public/'
    repo: 'https://github.com/chaplinjs/composer-example'
    desc: '[!NAME](!LINK) is an example that shows how Chaplin regions and compositions behave. Find its source code [on GitHub](!REPO).'
  likes:
    name: 'Facebook like browser'
    link: 'https://github.com/chaplinjs/facebook-example'
    desc: 'This example application uses Facebook client-side authentication to display the user’s Facebook Likes. Find its source at [github.com/chaplinjs/facebook-example](!LINK).'
  tweets:
    name: 'Tweet your Brunch'
    link: 'https://github.com/brunch/twitter'
    desc: '[A simple twitter client](!LINK). It uses Twitter client-side authentication to display the user’s feed and create new tweets.'
  symf:
    name: 'Symfony-Chaplin demo'
    link: 'https://github.com/pulse00/symfony-chaplin-demo'
    desc: '[The app](!LINK) is used as a demo for the [Symfony](https://github.com/symfony/symfony) [usergroup vienna](http://www.meetup.com/sfugvienna/) to demonstrate a single page app using Symfony as a REST backend and chaplin as the html5 frontend.'
  gss:
    name: 'Starter application'
    link: 'https://github.com/ButuzGOL/gss'
    desc: '[The starter app](!LINK) can give you some ideas how to build app structure with first steps (workflow, auth, tests, etc.).'
  turbosnake:
    name: 'Starter app for Turbogears2 and ChaplinJS'
    link: 'https://github.com/nesforge/turbosnake'
    desc: 'Turbosnake is the ready-to-use fullstack envinronment for python programmers with an example calendar application on board.'

production:
  delicious:
    name: 'Delicious'
    link: 'https://delicious.com'
    shot: 'images/screenshots/delicious-07-2013.png'
    desc: '[!NAME](!LINK) is a free service designed to be the best place to save what you love on the web, whether it’s a video, picture, product, blog post, article or music. We then help you remember and find it later. It’s using Brunch as application builder and [Chaplin](http://chaplinjs.org) as a framework on top of Backbone.'
  moviepilot:
    name: 'Moviepilot'
    link: 'http://moviepilot.com/'
    shot: 'images/screenshots/moviepilot-07-2013.png'
    desc: '[!NAME](!LINK) is a home for upcoming movies, where you can discover and read about the movies that interest and excite you. It was the original Chaplin app.'
  gedviz:
    name: 'GED VIZ'
    link: 'http://viz.ged-project.de/'
    repo: 'https://github.com/bertelsmannstift/GED-VIZ/tree/master/app/assets/javascripts'
    shot: 'images/screenshots/ged-07-2013.png'
    desc: '[!NAME](!LINK) by Bertelsmann Stiftung lets you create and share visualizations of global economic relations - for research, teaching and storytelling. Source code is available [on GitHub](!REPO)'
  fundcentre:
    name: 'Bank of Ireland'
    link: http://fundcentre.bankofireland.com/
    shot: 'images/screenshots/bankofireland-07-2013.png'
    desc: 'The [!NAME](!LINK) is a free service by MoneyMate that allows users to check funds, daily prices and performance.'
  dogkr:
    name: 'Dogkr'
    link: 'http://www.dogkr.com'
    shot: 'http://cdn.dogkr.com/static/images/home_shot.jpg'
    desc: '[!NAME](!LINK) is an online logger to record all your beloved dogs’ life moments, even tiny instants became timeless memories.'
  arena:
    name: 'Arena'
    link: 'http://are.na'
    shot: 'https://s3.amazonaws.com/arena_images/182537/original_ba0b1dabf557afc3508ecf9d1d991ad8'
    desc: 'On [!NAME](!LINK), you can collect and recombine blocks of information – texts, images, links, and files – by yourself or with other users. People use [!NAME](!LINK) to collaborate on projects, save bookmarks from the web, and even as a lightweight CMS. Its front-end is built entirely on Chaplin.'
  pentagon:
    name: 'Pentagon'
    link: 'http://www.getpentagon.com.au'
    shot: 'images/screenshots/pentagon-12-2014.png'
    desc: '[!NAME](!LINK)’s powerful price tracking technology works with your products to identify the best pricing opportunities on the market – giving you the advantage and keeping your business ahead of the competition. You’ll benefit from reduced costs, greater market share, boosted turnover, increased profits and lower supply prices. Pentagon’s webapp is based on Chaplin. We love it! You should try it!'

---

<h1>Examples</h1>

<p>
  To give you an idea of how client-side applications are built using Chaplin, here are some projects and example applications whose source is freely accessible.
</p>

<p>You can add another Chaplin application <a href="https://github.com/chaplinjs/chaplinjs.github.com/blob/master/examples.html">on GitHub</a>.</p>

{% for ex in page.examples %}
  {% assign example = ex[1] %}
  {% assign desc = example.desc | replace: '!NAME', example.name | replace: '!LINK', example.link %}
  {% if example.repo %}
    {% assign desc = desc | replace: '!REPO', example.repo %}
  {% endif %}
  <h2>{{example.name}}</h2>
  {{desc | markdownify}}

  {% if example.shot %}
    <p class="example-screenshot">
      <a href="{{example.link}}">
        <img src="{{example.shot}}" alt="{{example.name}} screenshot">
      </a>
    </p>
  {% endif %}
{% endfor %}

<h1>In Production</h1>

<p>
  Below you find some of the companies and projects using Chaplin in production. Are you using Chaplin too? Go ahead and <a href="https://github.com/chaplinjs/chaplin/wiki/Projects-and-companies-using-Chaplin">add your application to the wiki page</a> to let us know!
</p>

{% for ex in page.production %}
  {% assign example = ex[1] %}
  {% assign desc = example.desc | replace: '!NAME', example.name | replace: '!LINK', example.link %}
  {% if example.repo %}
    {% assign desc = desc | replace: '!REPO', example.repo %}
  {% endif %}
  <h2>{{example.name}}</h2>
  {{desc | markdownify}}

  {% if example.shot %}
    <p class="example-screenshot">
      <a href="{{example.link}}">
        <img src="{{example.shot}}" alt="{{example.name}} screenshot">
      </a>
    </p>
  {% endif %}
{% endfor %}