Budget photo album using Node.js and AWS S3

For quite some time, I’ve wanted to create a low-cost photo album. Yes, you may say “why not stick with iCloud or Google Photos?” The thing is that I don’t want to pay the amount they ask for after reaching the limit of free storage offered. If you are the type of person who loves to take high-quality pictures, a few GBs won’t cut it.

During the pandemic, I found myself with a lot of free time so, I decided to invest the time looking into technologies that would help me achieve my goal. After some time of researching, I decided to use the following technologies:

• Amazon Web Services (AWS) — Everyone is talking about it! Not just that but it offers a secure cloud service platform which is very important since I will be storing personal photos. Also, it is an affordable solution. You will be paying pennies a month if you are just storing photos. Lastly, I feel comfortable because there is a vast amount of documentation and help related to this topic.
• Amazon simple storage service (S3) — It’s an AWS object storage service. It is a cost-effective choice for this project check out their price model for more info. Best of all, it has all the security you need to keep your photos safe.
• Bulma — A responsive CSS framework based on flexbox, easy to use, and it’s open-source.
• Galleria — A free JavaScript gallery framework that includes many options for displaying images. Contains good documentation, is very easy to use, and is responsive.
• Heroku — I have yet to add projects to my free tear which is perfect because Heroku has a free Postgres add-on which is limited but enough for what I’m trying to accomplish.
• NodeJs — Its popularity has grown over the years, integrates well with AWS, has a great package management tool (NPM), and also I wanted to keep my project within the same atmosphere since I will be building the UI which will require the use of JavaScript.
• Postgresql — A reliable, open-source, object-relational database system that has been around for quite some time which means you will find a vast amount of support because is driven by the community.

Next, I decided to collect the node dependencies that will make this process a bit easier. I already had the main components to my application which are the ones above. I also had a vague idea of a Node, Express, and Postgres project. After reading and researching, I consolidated my list to the following dependencies:

• aws-sdk — Is a software development kit that allows access to AWS using JavaScript from a Node.js application.
• axios — JavaScript library used to make HTTP requests from Node.js.
• bcrypt — Handy library used to hash and verify user passwords. This video is a quick introduction to get started.
• body-parser — Parsing middleware used for incoming HTTP request bodies. It extracts the body of an incoming request and you can access it by doing req.body. In other words, to keep things simple is needed to create an Express app.
• db-migrate and db-migrate-pg - These two packages unfold the core functionality for running DB migrations. You can read more on how they are used by clicking this link.
• dotenv — Used for loading environment variables from a .env file.
• ejs — Stands for Embedded JavaScript templates. Used along with express as a templating engine to render JavaScript code on the client-side.
• express — Popular web framework for Node.js
• jsonwebtoken — Use to encode useful information and stored it into string token. This video explains how to get started.
• multer — Middleware use for uploading files. In this case, uploading multiple photos.
• pg — postgresql client for Node.js

knowing the technologies to accomplish this project. The next step was to think about how I wanted my photo album to look like. I quickly decided to create a mockup UI to lay down my vision. The aim was to create a photo album that was accessible on both a mobile device and the web.

Now, it was time to put the pieces together using code. I started with getting a Node.js and Express app running with a sample ejs template. Next, was to figure out how to get albums and images uploaded to AWS S3 which was a challenge at first but after looking at their documentation I was able to do it quickly. I needed to set up my S3 bucket accordingly to GET, PUT, or Delete objects from the S3 bucket. Furthermore, I decided to build my endpoints and Postgres DB. Soon after, I started working on the UI to get a basic skeleton and using the endpoints created previously. Once I knew I was in a stable place where I was happy that I could create, view, and delete albums and photos I moved towards creating the user auth part for my login page. When I had finished the auth part I felt like something was missing and I was right! I didn’t have a way to create a user other than going to the DB and doing it manually. So, I proceeded to create a settings page. Where I can create, update, delete user credentials. For a quick solution, I decided to protect the page with an environment variable. It allows me to control who I choose to give access to my album.

It was hard to tell when I was done because I kept on thinking of things to add or improve. However, when I decided to finally ship it to Heroku, I realized that I had been working on the project for about two months! For Heroku, I decided to use Github as my deployment method. First, I added the heroku-postgres add-on, then I prepared all the necessary environment variables on my Heroku application. To deploy the app, I used the Heroku UI but you can also do it via the heroku-cli. I waited for the deployment to succeed to make sure the login page loaded which it did! However, I had yet to run my migrations for DB to work accordingly. I connected to the heroku-cli by typing heroku run bash -a <your app name> on my terminal and ran my migrations with the simple db-migrate up command. With the migrations completed, I then created my account by going to the /settings page. Once logged in, I was able to see the test albums I had created locally since I was using the same S3 bucket for my deployed application. As soon as everything was working as expected, I decided to upload my first photos. Then, I uploaded pictures stored in my local machine, external hard drive, and the ones in my iCloud. Lastly, I proceeded to do all the functionalities using a mobile device and I was very pleased with the results. I've attached a video introducing the project below:

demo

I know I didn’t go in-depth on how to code this project on here, but I’ve put together a readme in my Github project so you can get this project running on your local machine. Overall, this project was fun. It helped me take my mind off the stress during the pandemic. Most importantly, I learned new technologies that I had been putting aside for quite some time. Some of the things I learned:

• More about AWS and storing objects with S3
• Using various Node.js packages such as bcrypt and db-migrate
• More of JavaScript DOM manipulation
• Use of new developer tools like tablePlus

As with any project you decide to take on there are always struggles and I certainly faced a few, for example:

• Setting up and get started AWS and S3
• CRUD operations to the S3 bucket
• Running migrations on Heroku
• Uploading multiple files at once to S3
• Building the UI because it’s been a while that I worked on front-end code Luckily for you, I’ve provided all the links to the documents I went through above.

At this point, you may be wondering how much money I’ve spent. When I got my first bill from AWS I was very surprised at how much it came out to.

Yes, that is right, only $0.36! That’s occupying roughly 9 GBs of storage in S3. I still keep a copy of the photos on an external hard drive. But It feels good to know that the pictures are backed-up in the cloud, and better yet, I can access them at any time, anywhere.

I already have ideas on where to improve next:

• Get some linters to improve the code quality
• Learn how to write unit tests for Node.js
• Organize code structure
• Run multiple S3 buckets using one application
• Improve the application security
• Add additional functionality to edit album details

Also, please feel free to share ideas on what you would do differently or have any recommendations. I hope this helps someone, and if you decide to do this project, mention it in your response!

Happy Coding 🧑🏽‍💻