Skip to content

Challenges and Lessons

What Was Most Challenging?

Upload and Delivery of Images

  • Implementing a vanilla JS file upload with thumbnail preview had compatibility issues on the Safari browser on mobile devices.
  • Dealing with user-uploaded images from mobile phones that were large in file size and dimensions posed challenges for displaying them in the frontend. I explored image optimization services like ImageKit and Cloudinary. While I personally preferred ImageKit for its ease of use and simpler pricing model, I ultimately chose Cloudinary as it appears to be the market leader and this provided an opportunity to gain familiarity with it.
  • I used Cloudinary’s upload widget to upload images. The widget provides a signed upload method which allows for direct upload from the browser to Cloudinary without the need to go through the backend. This is a more secure method as the upload signature is generated on the backend and passed to the frontend. The widget also provides a thumbnail preview of the image before upload.

Mongoose vs MongoDB Driver

In hindsight, using the native MongoDB driver would have sufficed. Initially, I overestimated the complexity of listing the count of images per album in the navbar. I considered utilizing Mongoose model virtuals to reduce load times, as the navbar is loaded on each page. However, since the count of images is dynamic and needs to be constantly updated when image(s) are added or deleted, the model virtuals approach was not practical.

Design of Frontend

While I found more enjoyment in getting the backend and APIs to work, the design of the frontend still requires improvement. It is an area where I acknowledge the need for further development and enhancement.

Lessons Learned

To my surprise (after overcoming the valley of despair), I discovered a genuine enjoyment for JavaScript and Node.js during the process of implementing and resolving API issues.

Planning Before Coding

  • Initially, I started coding with a rough design of the app workflow. This was counterproductive as I had to restart from scratch several times due to unconsidered aspects.
  • Then I took the time to thoroughly create a detailed workflow documentation and layout design in Figma. This was good, but also counterproductive as so much changed during the implementation that it was nearly impossible to keep the existing diagrams and documentation updated with the implemented code.

So my conclusion is:

  • If it’s an app (or tech stack) that you’re very familiar with, sure, go ahead and create detailed app workflow diagrams. Otherwise, start with a ‘big picture’ workflow diagram and then start coding and improving the workflow as you go along.