Photo Printing Website Revamp to Handle 30K+ Concurrent Requests

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.

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.

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: