Took optilude's concept and ran with it. Added more reactivity.

README.md

@@ -7,6 +7,17 @@ Running:
  * Run `bower install` (Bower)
  * Run `mrt install` (Meteorite)
 
+Adding more posts:
+
+```javascript
+postCollection.insert({
+    username: 'Test user', 
+    text: 'all',
+    favorite: false,
+    avatar:'http://linustechtips.com/main/uploads/profile/photo-122199.gif'
+});
+```
+
 Some key points:
 
  * Polymer is installed using Bower and served from the `public/` directory.

client/pages/social.html

@@ -2,14 +2,23 @@
   <core-header-panel>
     <core-toolbar>
       <paper-tabs id="tabs" selected="all" self-end>
-        <paper-tab name="all">ALL</paper-tab>
-        <paper-tab name="favorites">FAVORITES</paper-tab>
+        {{#each getTabs}}
+            <paper-tab name="{{name}}">{{text}}</paper-tab>
+        {{/each}}
       </paper-tabs>
     </core-toolbar>
     <div class="container" layout vertical center>
-      {{#if showPosts}}
-        <post-list show="all"></post-list>
-      {{/if}}
+        <post-list show="all">
+            {{#each getPosts}}
+                <post-card
+                        favorite="{{favorite}}"
+                        on-favorite-tap="">
+                  <img src="{{avatar}}" width="70" height="70">
+                  <h2>{{username}}</h2>
+                  <p>{{text}}</p>
+                </post-card>
+            {{/each}}
+        </post-list>
     </div>
   </core-header-panel>
 </template>

client/pages/social.js

@@ -1,15 +1,112 @@
+tabCollection = new Meteor.Collection(null);
+postCollection = new Meteor.Collection(null);
+
+
 Template.social.showPosts = function() {
     // dumb example to test reactivity; do `Session.set('showPosts', false)` in
     // the console to hide posts
     var showPosts = Session.get('showPosts');
     return showPosts !== undefined? showPosts : true;
 };
 
-Template.social.rendered = function() {
-    var list = document.querySelector('post-list');
-    var tabs = document.querySelector('paper-tabs');
+Template.social.getTabs = function () {
+	return tabCollection.find();
+};
+
+Template.social.getPosts = function (filter) {
+	var selector = {};
 
-    tabs.addEventListener('core-select', function() {
-        list.show = tabs.selected;
-    });
+	if(Session.get('selectedTab') === 'favorites') {
+		selector.favorite = true;
+	}
+
+	return postCollection.find(selector);
 };
+
+Template.social.events = {
+	'click #tabs': function (e, template) {
+		var data = UI.getElementData(event.target);
+		Session.set('selectedTab', data.name);
+	},
+	'favorite-tap': function (e, template) {
+		var data = UI.getElementData(event.target);
+		postCollection.update(data._id, {$set: {favorite:!data.favorite}});
+	}
+}
+
+Meteor.startup(function () {
+	if (!tabCollection.find().count()) {
+		tabCollection.insert({
+			name: 'all',
+			text: 'all'
+		});
+		tabCollection.insert({
+			name: 'favorites',
+			text: 'favorites'
+		})
+	}
+	if (!postCollection.find().count()) {
+		var posts = [
+			{
+				"uid": 1,
+				"text" : "Have you heard about the Web Components revolution?",
+				"username" : "Eric",
+				"avatar" : "../images/avatar-01.svg",
+				"favorite": false
+			},
+			{
+				"uid": 2,
+				"text" : "Loving this Polymer thing.",
+				"username" : "Rob",
+				"avatar" : "../images/avatar-02.svg",
+				"favorite": false
+			},
+			{
+				"uid": 3,
+				"text" : "So last year...",
+				"username" : "Dimitri",
+				"avatar" : "../images/avatar-03.svg",
+				"favorite": false
+			},
+			{
+				"uid": 4,
+				"text" : "Pretty sure I came up with that first.",
+				"username" : "Ada",
+				"avatar" : "../images/avatar-07.svg",
+				"favorite": false
+			},
+			{
+				"uid": 5,
+				"text" : "Yo, I heard you like components, so I put a component in your component.",
+				"username" : "Grace",
+				"avatar" : "../images/avatar-08.svg",
+				"favorite": false
+			},
+			{
+				"uid": 6,
+				"text" : "Centralize, centrailize.",
+				"username" : "John",
+				"avatar" : "../images/avatar-04.svg",
+				"favorite": false
+			},
+			{
+				"uid": 7,
+				"text" : "Has anyone seen my cat?",
+				"username" : "Zelda",
+				"avatar" : "../images/avatar-06.svg",
+				"favorite": false
+			},
+			{
+				"uid": 8,
+				"text" : "Decentralize!",
+				"username" : "Norbert",
+				"avatar" : "../images/avatar-05.svg",
+				"favorite": false
+			}
+		];
+
+		_.each(posts, function (post) {
+			postCollection.insert(post);
+		});
+	}
+});

public/post-card.html

@@ -38,15 +38,21 @@
       fill: #da4336;
     }
     </style>
-    <div class="card-header" layout horizontal center>
-      <content select="img"></content>
-      <content select="h2"></content>
-    </div>
-    <core-icon-button
-      id="favicon"
-      icon="favorite"
-      on-tap="{{favoriteTapped}}"></core-icon-button>
-    <content></content>
+
+      <div class="cardContainer" data-uid="{{uid}}" >
+          <div class="card-header" layout horizontal center>
+              <content select="img"></content>
+              <content select="h2"></content>
+          </div>
+
+          <core-icon-button
+                  id="favicon"
+                  icon="favorite"
+                  on-tap="{{favoriteTapped}}"></core-icon-button>
+
+          <div class="card-content"><content></content></div>
+      </div>
+
   </template>
   <script>
   Polymer('post-card', {
@@ -57,7 +63,6 @@
       }
     },
     favoriteTapped: function(event, detail, sender) {
-      this.favorite = !this.favorite;
       this.fire('favorite-tap');
     }
   });

public/post-list.html

@@ -1,8 +1,9 @@
+
 <link rel="import" href="/bower_components/polymer/polymer.html">
-<link rel="import" href="/post-service/post-service.html">
+<link rel="import" href="/bower_components/core-selector/core-selector.html">
 <link rel="import" href="post-card.html">
 
-<polymer-element name="post-list" attributes="show">
+<polymer-element name="post-list" attributes="show" role="postlist" extends="core-selector">
   <template>
     <style>
     :host {
@@ -14,19 +15,8 @@
     }
     </style>
 
-    <post-service id="service" posts="{{posts}}"></post-service>
-
-    <div layout vertical center>
-      <template repeat="{{post in posts}}">
-        <post-card
-          favorite="{{post.favorite}}"
-          on-favorite-tap="{{handleFavorite}}"
-          hidden?="{{show == 'favorites' && !post.favorite}}">
-          <img src="{{post.avatar}}" width="70" height="70">
-          <h2>{{post.username}}</h2>
-          <p>{{post.text}}</p>
-        </post-card>
-      </template>
+    <div id="postsContainer" layout vertical center>
+        <shadow></shadow>
     </div>
   </template>