Facebook Style Web Application using Bootstrap

A web application that mimics Facebook's famous card-based design including some of its functionality. I specifically built this application to show my skills in the field of Web Design and Web Application Development.

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 use of Bootstrap 3 in building the application.
  • Followed 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.
  • Made use of 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

A website is an artwork, just like a book, architectural design, piece of music, or pattern on fabric, so copying a website is illegal. I therefore do not intend to sell this application or release it for free like I usually do with most of my personal projects. This application is just for my portfolio.