A full-stack Vuejs photo album app [part 1]

In the beginning, I implemented this web app by using Quasar Vue3 UI framework to display the photos in S3 directly. It didn't call any backend API, and it only used AWS Javascript S3 SDK to fetch folder and image information and render it on the UI.

Whenever I wanted to add new images, I had to log in to AWS, create a new folder and upload images to the S3 bucket by using the AWS admin dashboard. How tedious it was!😪 Not to mention during that time, this photo album web app could only use the S3 folder name as the photo album name, no album description, no tag, and no location information.😵

In the past 3 years, I slowly and gradually improved this project, to make it more user-friendly so it not only displays photos but also lets me manage albums and photos. I can finally stay away from the AWS admin dashboard when I want to add new albums and photos. In this project, I use Fastify as a backend app and deploy it to AWS API Gateway and Lambda. Use AWS DynamoDB to store photo album information and (obviously) use AWS S3 to store photos.

I hope this tutorial can help anyone who would like to build their photo album web app.

GitHub repo

Demo website

---

Step 1.1 - Create a S3 bucket on AWS

Leave every setting as default when creating bucket, except Public Access. I assume you want to share your photo album app with your friends, so you need to make your bucket "public". Untick Block all public access and tick "I acknowledge that the current settings might result in this bucket..."

Step 1.2 - Update bucket policy

After creating the S3 bucket, go to the permissions tab and edit the bucket policy.

You will need to make your bucket fully public so everyone can see your website and photos.

{
    "Version": "2012-10-17",
    "Id": "Policy1548223592786",
    "Statement": [
        {
            "Sid": "Read permission for every object in a bucket",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{YOUR_S3_BUCKETNAME}/*"
        }
    ]
}

Step 1.3 - Update S3 CORS policy

I believe you want to prevent other people link your photos from their websites directly, so you need to edit the S3 CORS policy too.

On the same Permissions tab, scroll down a bit, and you'll see Cross-origin resource sharing (CORS). Update this section as below:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://{YOUR_BUCKET_URL}",
            "http://localhost:9000" // For local development
        ],
        "ExposeHeaders": []
    }
]

Step 1.4 - Enable Static website hosting

Go to the Properties tab and scroll down to the bottom of the page. Enable static website hosting and input index.html in both Index document and Error document - optional input fields.

---

As I mentioned earlier, this app not only displays photos from S3 but also lets you manage albums, album tags, and photos. To achieve this, you will need a login page, and only certain people have admin permission who can manage this website.

This app uses Google IDP as part of the authentication process, so you will need to create Google OAuth 2.0 on the Google Cloud Platform console.

Step 2.1 - Setting up Google OAuth 2.0

You can check the official doc here.

1. Go to the Google Cloud Platform Console.
2. From the projects list, select a project or create a new one.
3. If the APIs & services page isn't already open, open the console left side menu and select APIs & services.
4. On the left, click Credentials.
5. Click New Credentials, then select OAuth client ID.
6. Select the appropriate application type for your project and enter any additional information required. Application types are described in more detail in the following sections.
7. If this is your first time creating a client ID, you can also configure your consent screen by clicking Consent Screen. (The following procedure explains how to set up the Consent screen.) You won't be prompted to configure the consent screen after you do it the first time.
8. Click Create client ID

For Authorised JavaScript origins, you can use http://localhost:9000 and http://localhost for now.

For Authorised redirect URIs, you can use http://localhost:9000 for now.

Step 2.2 - Setting up your OAuth consent screen

1. In the Google Cloud console, go to Menu menu > APIs & Services > OAuth consent screen.

2. Fill in those fields which are marked as required.

Step 2.3 - Create Google Place API key

This Google Place API key is used when attaching location information to a photo album. You can check the official doc here

1. Go to the Google Maps Platform > Credentials page.
2. On the Credentials page, click Create credentials > API key. The API key created dialogue displays your newly created API key.
3. Click Close. The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)

---

Step 3 - Create a Mapbox API key

This project uses Mapbox to display the map. You can get your own Mapbox API key here.

Continue to part 2