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 on 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 passion. However, Facebook and Instagram don’t allow photographers to post pictures at full quality. What’s more, social networks are diverse; users have many interests and purposes, making it hard for photographers to focus attention on their art alone.

PhotoBlog has solved this problem by uniting passionate photographers and active users on a dedicated platform that lets professionals and amateurs alike 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.

Gallery

Gallery
Gallery
Gallery
Gallery
Gallery
Gallery

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

S
SVG
JavaScript
JavaScript
Canvas
Canvas
T
Twitter Bootstrap
Less
Less
Gulp
Gulp
Facebook API
Facebook API
D
Draft
C
CSS3
jQuery
jQuery
H
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