PhotoBlog

PhotoBlog

Improving website performance for a photo blogging community

Our client's request

Ram Ya image
Client's location: United States

In 2006, an online platform for photographers was founded that went by the name PhotoBlog. It was a popular photography community in its heyday. Ram Ya, the PhotoBlog founder, contacted us in 2016 and asked us to rewrite and optimize the backend of the project as it could no longer cope with its 100,000 registered users. During the process of this backend optimization, Ya surveyed PhotoBlog users and decided to redesign the website’s frontend as well.

After we successfully completed backend development, Ya asked us to redesign the frontend of the website, adapt it for mobile devices, and also solve some cross-browser problems.

Webapp Entertainment US PhotoBlog Photo Blogging

Relevance

People post 845 million pictures across platforms such as Facebook, Instagram, and Snapchat every single day (according to PIV Imaging’s Photo and Imaging Market Trend Report). Photography enthusiasts are looking for like-minded people with whom they can share their love for shooting. However, a Facebook or Instagram account doesn’t allow them to post pictures while preserving their high quality. What’s more, social networks are so diverse since users have many interests and purposes, making it harder for photographers to focus attention on their art alone.

PhotoBlog solved this problem by uniting passionate photographers and active users on a single platform, allowing professionals and amateurs alike to share high-quality photos with their peers. Every photographer is now able to discover his or her unique voice while seeing inspiring stories from others.   

Results

Duration:
11 January 2016 - 12 June 2017
Team:
Backend - 2 Frontend - 2 QA - 3
Backend and frontend programming

We started by developing the backend from scratch, then supported the frontend, created an adaptive website, and fully tested the service. We improved the website’s performance and enabled high-resolution photo uploads. We also customized and integrated a Draft.js-based WYSIWYG editor, adding new features and providing support.

Defined the architecture

Our operations team moved the PhotoBlog app from a dedicated server to Amazon Web Services to make it cloud-native and resource-efficient. We used AWS services including EC2, CloudFront, and ElastiCache. We implemented a custom CI/CD solution where Jenkins and HashiCorp's Packer work hand in hand with Salt. This solution allowed us to split the old monolithic deployment routine into two separate phases – deployment and release. Furthermore, we implemented a new rollback procedure that’s faster and simpler. Backups, powered by AWS features such as snapshots, make it possible to restore the application environment to any saved state. Among other tools, we integrated the ElasticSearch cluster managed by Amazon Web Services to search through almost 700,000 posts.

Optimized performance

Templates. We removed inline styles and rewrote non-valid HTML as well as migrated from table markup to div markup, thus minimizing the number of DOM elements.

Backend. We fixed the behavior of the endless scroll to make it truly endless and smooth. We also tuned up our database indexes to speed up overall performance.

CSS. Our frontend developers minimized the number of CSS files and minified and compressed those that remained.

JS. Our team reduced the number of plugins, replacing JavaScript animations with CSS animations while also minifying and compressing JavaScript files. We also limited AJAX requests.

Mobile-friendly. We designed an adaptive interface, checked the behavior of all features on Android and iOS mobile devices, and tested the speed of our solution with Google PageSpeed.

Images. We made sure images are friendly for retina displays and converted icons to sprites (to decrease the number of requests for each page), and set up “lazy loading” for images (to increase loading speed).

Release

We had two releases. The first took place in October 2016 when we introduced the new backend platform. The second happened in May 2017 when we unveiled the new website design and functionality alongside the adaptive version of the website.

Implemented features

Technology Stack

Backend

Python
Python
Django
Django
Celery
Celery
Redis
Redis
Stripe
Stripe
PostgreSQL
PostgreSQL
Tornado with SockJS
Tornado with SockJS
Mailchimp
Mailchimp
Elasticsearch
Elasticsearch

Frontend

SVG
SVG
JavaScript
JavaScript
Canvas
Canvas
Twitter Bootstrap
Twitter Bootstrap
L
Less
Gulp
Gulp
Facebook
Facebook
Draft
Draft
CSS3
CSS3
jQuery
jQuery
HTML
HTML

See more case studies

Developing an MVP that finds the best Instagram hashtags

Developing an MVP that finds the best Instagram hashtags

A mobile application that helps Instagram users find perfect hashtags for their posts

  • Android
  • iOS
  • Instagram
  • Hashtag
Educational media and entertainment platform for kids

Educational media and entertainment platform for kids

Original TV shows and games plus a Quran memorization buddy for English-speaking Muslim kids

  • Android
  • iOS
  • Webapp
  • Education