facebook-style-web-application-using-bootstrap-cover

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.

Reviews

There are no reviews yet.

Be the first to review “Facebook Style Web Application using Bootstrap”

Your email address will not be published. Required fields are marked *

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end web development, passionate about building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me