Online Photo Printing Site for Heavy Traffic

Technology Stack

Node.js
React.js
JavaScript
TypeScript
Amazon S3

The Client

The client owns a highly established online photo printing company. They take batch orders for online photo printing from individual photographers and high-volume orders from home decoration companies. Their USP is custom printing and framing through a streamlined process of photo uploads, management, and order fulfillment.

The Challenge

The client already had their photo printing website running. But, the website had multiple issues, leading to massive customer churn.

Firstly, this website was in a .NET framework with outdated code. The legacy code would only allow users to upload small-sized photos and files for printing. Whenever users tried to upload files of more than 500GB concurrently, they would face massive upload delays. Often, there would be failed uploads with thousands of concurrent requests.

Secondly, users would find images getting disoriented when uploading. This would lead to distorted image uploads and disrupt the intended visual outcome.

Thirdly, users could only upload images stored on their devices like laptops. This would restrict users from uploading photos from cloud storage like Dropbox, Box, or Google Drive.

Fourthly, the file uploader would often show error messages during uploads without clearly stating the reasons for the errors. This would confuse users even more.

All these problems led to massive inconvenience. The client took note of the user frustrations stemming from poor UX and looked for a way to address these problems. At this stage, they turned to Capital Numbers to resolve issues arising from an outdated framework.

The Solution

Our team studied the outdated .NET framework and the flaws that hampered the user experience. We then chose the following tech stack to revamp the system:

Our experts started by migrating the outdated .NET framework to Node.js. We did this because Node.js is perfect for handling thousands of concurrent requests without slowing down the system. Node.js shines with its high traffic handling capacities. It helps process numerous requests without a hitch. As a result, Node.js was an obvious choice.

We built the frontend using React.js, which is great for building powerful, component-driven user interfaces. We also compiled JavaScript with TypeScript to make the frontend dynamic and interactive.

It was essential to help users upload large photos. So, we used a multipart file upload method to split large photos into smaller pieces and send them to the Amazon S3 bucket.

There was an issue with file disorientation, which we fixed using Uppy Library. This library could detect photos, figure out the correct orientation of the photos, and adjust accordingly.

The old app version allowed users only to upload photos stored on their laptops. So, we added support for popular cloud storage solutions like Google Drive, Dropbox, and Box to enable users to upload photos from these platforms.

We also added a progress bar to show the uploaded percentage and the file name. Additionally, we added support for selecting uploaded thumbnail photos in batches for online printing and framing. Moreover, we created permanent and temporary user ID sections to help users store images in a temporary library or a permanent solution, as per needs.

Besides, we reconfigured multiple APIs to transition them to serverless. We did this to put less load on AWS resources and ensure smooth backend operations happen despite concurrent requests.

Results

In 6 months, Capital Numbers prepared the website to handle 30000+ concurrent requests. Online photo printing is way easier now because of the following benefits:

Multipart Upload

Uploading large photos of over 500GB is now possible with our multipart upload mechanism that divides files into smaller parts for parallel uploading.

Auto-corrected Image Orientation

The system now automatically corrects the orientation of photos during upload for accurate printing, maximizing impact.

Cross-platform File Selection

Users get options to upload photos from anywhere - laptops, Google Drive, Box, and Dropbox, enjoying greater flexibility.

Indefinite Storage for Permanent Users

Permanent users can store photos indefinitely in the app, knowing their files are protected securely for future printing needs.

Auto-clean for Temporary Users

Temporary users can store photos for up to 6 months, after which the app automatically clears files and declutters space.

Up to 50 Thumbnail-image Selection

Each user can select up to 50 thumbnail photos for batch printing, making it easier to choose for large projects or displays.

Progress Bar

Users can visually check the image upload progress rate and how much is left without seeing error messages.

Image Customization

Users can customize image colors, sizes, contrasts, frames, and clarities to cater to specific printing goals.

Fast Fulfillment

Thousands of photographers and artists can now safely order and fulfill online prints simultaneously without fearing system crashes, loading screens, or delays.