Recently I was reviewing Facebook’s UI and functionality, I really like the idea of their design and its amazing performance across all major browsers. For a Web Application enthusiasts such as my self, it’s my dream to be working in such a huge company, where the goal is to deliver the best product to all users. I wanted to test my self by building Facebook’s home page, but 100% responsive, I also wanted this project to be at its best performance, soo.. bellow is the result of my weeks of hard work.

Checkout Demo Check Score on Google Pagespeed

Design

• Fully optimized, this application currently scores 100 / 100 (Mobile and Desktop) on Google Page Speed Insights.
• Made using Bootstrap 3.
• Follows the card-based style which is a common layout pattern used by popular web applications like Facebook, Twitter, Google +, Linkedin, etc .
• Unlike Facebook’s current website layout, this application is Fully responsive!
• Followed Facebook’s mobile app theme for smaller screens.
• Utilizes Font Awesome for all of the buttons / icons.
• Facebook constantly updates their website design, but most users hardly notices it. I followed Facebook’s design pixel by pixel, color, background. Everything you see in the application is exactly how Facebook looked like at the time this application was created. Unfortunately I do not intend to maintain this application as itis not a product.

Functionality

I’ve hand-picked a list of functionality to be included in this application. Anything that does Create, Delete and Update are not included. Included are:

• Gallery collage style. It dynamically builds the collage depending on the number of images provided on each post.
• The width and height of the images are respected, no stretching on shrinking.
• Drop down options.
• Swipable, pannable, and zoomable gallery images.
• Pop-up modal
• Preloader – shown while ajax request is processing.
• Infinite scrolling – loads new content every time you reach the bottom of the page.

Video Demo