Implement live tile navigation for SharePoint lists in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Implement-4dc68bf1
http://www.ashokraja.me/post/Metro-UI-style-Live-Tiles-Web-Part-with-Metro-JS-and-jQuery-in-SharePoint-2013.aspx
https://www.nothingbutsharepoint.com/sites/devwiki/articles/pages/sharepoint-2013-create-a-metro-live-tile-using-metrojs-jsrender-and-the-new-rest-api.aspx

vs2012 -> file -> new -> project c# -> office/SharePoint -> apps -> apps for SharePoint 2013 -> "SP_SharePointTileNavigator_js"

SP_SharePointTileNavigator_js -> Right Click -> Add -> New Item -> Select List Template 
Like this create three custom Lists namely List1, List2, List3
Click on 'Add' Button

Click on 'Finish' Button

SP_SharePointTileNavigator_js -> Images -> Add -> Existing Item -> "MetroPlay.png"

SP_SharePointTileNavigator_js -> Pages -> Default.aspx
add below div code to "PlaceHolderMain" place holder tag

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>

        <p id="message">

            initializing...

        </p>

    </div>

    <div id="tileArea" style="width: 600px;"></div>

</asp:Content>

SP_SharePointTileNavigator_js -> Scripts -> App.js 
Add below javascript code to App.js file

'use strict';
var context;
var lists;
var listItems;
var tileArea;
var context = SP.ClientContext.get_current();
var web = context.get_web();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    getUserName();
    lists = context.get_web().get_lists();
    context.load(lists);
    context.executeQueryAsync(function () { renderListTiles(); }, function () { errorLoadingLists(); });
});
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}
function errorLoadingLists() {
    tileArea = document.getElementById("tileArea");
    while (tileArea.hasChildNodes()) {
        tileArea.removeChild(tileArea.lastChild);
    }
    var errMessage = document.createElement("div");
    errMessage.appendChild(document.createTextNode("Lists could not be retrieved."));
}
function renderListTiles() {
    var listEnumerator = lists.getEnumerator();
    tileArea = document.getElementById("tileArea");
    while (listEnumerator.moveNext()) {
        var list = listEnumerator.get_current();
        var listTitle = list.get_title();
        if ((listTitle == "List1") || (listTitle == "List2") || (listTitle == "List3")) {
            var itemCount = list.get_itemCount();
            var tile = document.createElement("a");
            tile.setAttribute("class", "tile");
            tile.setAttribute("href", "../Lists/" + listTitle);
            tile.appendChild(document.createTextNode(listTitle));
            tileArea.appendChild(tile);
            var tileBody = document.createElement("div");
            tileBody.setAttribute("class", "tileNumber");
            tileBody.appendChild(document.createTextNode(itemCount.toString()));
            tile.appendChild(tileBody);
        }
    }
}

SP_SharePointTileNavigator_js -> Content -> App.cs
Add below css to App.cs file

.tile{

    width:150px;

    height:150px;

    color:#FFFFFF;

    margin-top:5px;

    margin-left:0px;

    margin-right:10px;

    margin-bottom:10px;

    cursor:pointer;

    padding:5px;

    float:left;

    text-align:right;

    font-family:Segoe UI, sans-serif;

    font-size:14px;

    background-image:url(../images/MetroPlay.png);

    background-repeat: no-repeat;

    background-position:bottom right;

    background-color:#FFAAAA;

}

.tileNumber{

    text-align:center;

    font-family:Segoe UI Light, sans-serif;

    font-size:72px;

    margin-top:10px;

    margin-bottom:10px;

}

a, a:hover, a:visited {text-decoration:none; outline:none;color:#FFFFFF}

a:active, a:focus {outline:0}

SP_SharePointTileNavigator_js -> Right Click -> Deploy 

Thank You.