brunch.github.io/examples.html at master · aberman/brunch.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Brunch | ultra-fast HTML5 build tool</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><link rel="stylesheet" href="styles/app.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!-- Grunticon Loader: place this in the head of your page -->
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon( [ "/images/svg/icons.data.svg.css", "/images/svg/icons.data.png.css", "/images/svg/icons.fallback.css" ] );</script>
<noscript><link href="/images/svg/icons.fallback.css" rel="stylesheet"></noscript></head><body><div id="navbar"><div class="container"><a href="/" class="icon-brunch-logo-web"></a><ul class="nav nav--main-nav"><li><a href="/" class="nav__item--main-nav">Home</a></li><li><a href="/plugins.html" class="nav__item--main-nav">Plugins</a></li><li><a href="/skeletons.html" class="nav__item--main-nav">Skeletons</a></li><li><a href="/examples.html" class="nav__item--main-nav active">Examples</a></li><li><a href="/compare.html" class="nav__item--main-nav">Compare</a></li><li><a href="/support.html" class="nav__item--main-nav">Support</a></li><li><a href="https://brunch.roon.io/" class="nav__item--main-nav">Blog</a></li></ul></div></div><div class="page__content container">
<h1>Examples</h1>

<p>
  We know of a few folks who are using brunch already.
  Ranging from internal tooling to high traffic facebook apps.
</p>

<p class="users">
  <img src="images/users/jimbeam.png" alt="Jim Beam">
  <img src="images/users/redbull.png" alt="Red Bull">
  <img src="images/users/uber.png" alt="Uber">
  <img src="images/users/ykky.png" alt="YKKY">
</p>

<p>If you want to <strong>add your project here</strong>, simply <a href="https://github.com/brunch/brunch.github.com/blob/brunch/app/_includes/examples.html">edit this page</a> and submit a pull request.</p>

<h2>Ostio</h2>

<p><a href="http://ost.io/">Ostio</a> is an open-source forum for GitHub projects (<a href="https://github.com/paulmillr/ostio">code</a>). Uses default <a href="https://github.com/paulmillr/brunch-with-chaplin">Chaplin</a> as app skeleton and Rails for backend.</p>

<p class="example-screenshot">
  <a href="http://ost.io/">
    <img src="images/screenshots/ostio.png" alt="" width="580">
  </a>
</p>

<h2>Todos</h2>

<p><a href="http://todomvc.com/labs/dependency-examples/chaplin-brunch/public/">Todos</a> (<a href="https://github.com/addyosmani/todomvc/tree/gh-pages/labs/dependency-examples/chaplin-brunch">code</a>) is a port of the famous backbone todos example app. Uses localStorage to persist data.</p>

<p class="example-screenshot">
  <a href="http://todomvc.com/labs/dependency-examples/chaplin-brunch/public/">
    <img src="http://todomvc.com/site-assets/screenshot.png" alt="" />
  </a>
</p>

<h2>Hackerank</h2>

<p>
  <a href="http://hackerank.herokuapp.com/">Hackerank</a> is an example app that finds the top hackers of a github repo search.

  Uses <a href="https://github.com/elving/brunch-with-hipsters">brunch with hipsters</a> as base skeleton.
</p>

<p class="example-screenshot">
  <a href="http://hackerank.herokuapp.com/">
    <img src="images/screenshots/hackerank.png" alt="Hackerank" width="580" />
  </a>
</p>

<h2>Ember-bloggr</h2>

<p>
  <a href="https://github.com/gcollazo/ember-bloggr">Ember-bloggr</a>
  is a simple demo app based on the
  <a href="http://www.youtube.com/watch?v=Ga99hMi7wfY">Building an App with Ember.js video</a>.
</p>

<p class="example-screenshot">
  <a href="http://dev.gcollazo.com/ember-bloggr/">
    <img src="https://a248.e.akamai.net/camo.github.com/4a4f78b309767559bfcde423941b9accab185762/687474703a2f2f692e696d6775722e636f6d2f47706e64794b792e706e67" alt="Bloggr">
  </a>
</p>

<h1>In production</h1>

<h2>Delicious</h2>
<p><a href="https://delicious.com">Delicious</a> 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 <a href="http://chaplinjs.org">Chaplin</a> as a framework on top of Backbone.</p>

<p class="example-screenshot">
  <a href="https://delicious.com">
    <img src="images/screenshots/delicious.png" alt="Delicious" width="580" />
  </a>
</p>

<h2>blossom</h2>
<p><a href="https://www.blossom.io">Blossom</a> is a lightweight project management tool for lean teams. Backbone.js is heavily used in combination with CoffeeScript to provide a smooth interaction experience. The RESTful backend is built with Flask on Google App Engine.</p>

<p class="example-screenshot">
  <a href="https://www.blossom.io/">
    <img src="images/screenshots/blossom.png" alt="Blossom" width="580" />
  </a>
</p>

<h2>ChainCal</h2>
<p><a href="http://chaincalapp.com">ChainCal</a> is an iPhone app that helps you to track your daily goals in a minimalist, visual way. The app is written almost entirely in CoffeeScript, Backbone handles the models, collections and views, and persistence is done with a Backbone.sync localStorage adapter. Templates are written in Eco and the app is packaged with Brunch and deployed with Phonegap.</p>

<p>
  <a href="http://chaincalapp.com">
    <img src="images/screenshots/chaincal.png" alt="Chaincal" />
  </a>
</p>


<h2>Blimp</h2>
<p>
  <a href="http://www.getblimp.com/">Blimp</a> is a super easy to use and beautiful project management software for people who want to DO more and manage less.
</p>
<p class="example-screenshot">
  <a href="http://www.getblimp.com/">
    <img src="https://github-camo.global.ssl.fastly.net/fe80a77a9d6ff081b4603c19a4af00b2bd43a2d6/687474703a2f2f692e696d6775722e636f6d2f30454a757576582e706e67" alt="" width="580" />
  </a>
</p>


<h2>Dogkr</h2>
<p>
  <a href="http://www.dogkr.com">Dogkr</a> is an online logger to record all your beloved dogs’ life moments, even tiny instants became timeless memories.
</p>
<p>Brunch.js, along with Chaplin.js, is the major framework used in Dogkr's front-end. It helped us increase development productivity dramatically. Brunch.js made the whole project retain at manageable scale while the project size and complexity goes up wildly.</p>
<p class="example-screenshot">
  <a href="http://dogkr.com">
    <img src="https://github-camo.global.ssl.fastly.net/e61eb63e444eed708f07e15622a82950128e4331/687474703a2f2f63646e2e646f676b722e636f6d2f7374617469632f696d616765732f686f6d655f73686f742e6a7067" alt="" width="580" />
  </a>
</p>

<h2>Cozy Cloud</h2>
<p>
  <a href="https://www.cozycloud.cc/">Cozy Cloud</a> is your own private personal cloud. A server you can trust to store your personal data and host web apps. You can host it with us at Cozy or host it at home, it's up to you!
</p>

<p>
  Cozy cloud aims at using only standard execution environments. For each of them they suggest a coherent set of powerful technologies.
</p>

<p class="example-screenshot">
  <a href="http://www.cozycloud.cc">
    <img src="images/screenshots/cozycloud.png" alt="Cozycloud" />
  </a>
</p>


<h2>MazeMap</h2>
<p>
  <a href="http://use.mazemap.com/">MazeMap</a> <a href="use.mazemap.com">(test site)</a> is an indoor navigation utility that works in the browser on desktop and mobile devices. Customers with big indoor areas can provide MazeMap as a service to their visitors who can then use the MazeMap application to find their way around with a-to-b indoor paths, and viewing their own position inside a building where GPS signals don't work. Searching for any room also works beautifully.

</p>
<p class="example-screenshot">
  <a href="http://use.mazemap.com/">
    <img src="https://github-camo.global.ssl.fastly.net/62be3b07faf65d0cb04961fcd20198293f7d3076/687474703a2f2f7331362e706f7374696d672e6f72672f636e3771396a6b68682f6272756e63685f77696b695f73637265656e73686f745f6269672e706e67" alt="" />
  </a>
</p>


<h2>Hopstop</h2>
<p>
  <a href="https://github.com/jhabdas/hopstop">Hopstop</a> enables instant retrieval of beer information accessible through Untappd. It comes in handy for searching the basics while on the go.
</p>
<p class="example-screenshot">
  <a href="http://lab.habdas.org">
    <img src="http://i.imgur.com/IhEVItr.png" alt="" width="580" />
  </a>
</p>

<h2>Uber</h2>
<p>
  <a href="http://uber.com">Uber</a> is everyone’s private driver. Their <a href="http://clients.uber.com/">clients app</a> is made with brunch.
</p>
<footer><hr class="rule"><p><small>Hosted on <a href="https://github.com/brunch/brunch.github.com">GitHub Pages</a>. The content on this website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">CC BY 3.0</a>. Logo by <a href="http://helle.in">Michael Hellein</a></small></p></footer></div><script src="scripts/app.js"></script><script>require('scripts/app');
</script>  <script type="text/javascript">
    var _gauges = _gauges || [];
    (function() {
      var t   = document.createElement('script');
      t.type  = 'text/javascript';
      t.async = true;
      t.id    = 'gauges-tracker';
      t.setAttribute('data-site-id', '4f1631bbcb25bc723b000007');
      t.src = '//secure.gaug.es/track.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(t, s);
    })();
  </script>
</body></html>