A full-stack Vuejs photo album app [part 1]
Tags: tutorial, aws, serverless, webdev
Published: 2024-01-29 02:52:08

In the beginning, I implemented this web app using Quasar Vue3 UI framework to directly display photos from S3. It didn't call any backend API; instead, it used the 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 into AWS, create a new folder and upload images to the S3 bucket 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. There was no album description, no tag, and no location information.😵

Over the past 3 years, I have slowly and gradually improved this project to make it more user-friendly. Now, it not only displays photos but also allows me to 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](https://fastify.dev/) as a backend app and deploy it to AWS API Gateway and Lambda. I use AWS DynamoDB to store photo album information and, obviously, AWS S3 to store photos.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6grnpf77g1ratbas7nf.png)

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

[GitHub repo](https://github.com/LaurenceHo/quasar-photo-albums)

[Demo website](https://d3lfuof5usiolc.cloudfront.net)

---

## 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..."

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/panzvwx7tmemr3nweugq.jpeg)

## Step 1.2 - Update bucket policy

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7bm3o4bfghpo8vcwwjl.jpeg)

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

```json
{
    "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:

```json
[
    {
        "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 allows you to manage albums, album tags, and photos. To achieve this, you will need a login page, and only certain individuals with admin permission can manage this website.

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

## Step 2.1 - Setting up Google OAuth 2.0

You can check the official doc [here](https://support.google.com/cloud/answer/6158849).

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](https://developers.google.com/maps/documentation/places/web-service/get-api-key)

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](http://demo-quasar-photo-albums.s3-website-us-east-1.amazonaws.com/map). You can get your own Mapbox API key [here](https://account.mapbox.com/auth/signup/).

[Continue to part 2](https://dev.to/laurenceho/a-full-stack-vuejs-photo-album-app-part-2-1nd2)