PhotoBlog
A photo sharing and blogging community where photographers showcase their high resolution images
Idea
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.
Analysis
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 achieved
Photo sharing social networks such as Photoblog enable users to share lots of pictures at full quality. Yet thousands of image uploads can be the reason behind a platform's slowness. By rewriting and optimizing the backend of Photoblog, we improved the platform's efficiency so it can meet high traffic demands. Let's talk numbers. As of late 2019, Photoblog contained almost 700,000 posts and was able to get to over 100,000 active users and at the same time ensure excellent performance.
Results
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.
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.
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).
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.
Technology Stack
