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

This post continues from my last post [A full-stack Vuejs photo album app [part 1]](https://dev.to/laurenceho/a-fullstack-vuejs-photo-album-app-part-1-2bgd)

## Step 4 - Create Dynamo DB tables

In this project, you will need 3 Dynamo DB tables, one for storing photo album information, one for storing album tags and the last one for managing user permission.

Go to DynamoDB -> Tables -> Create table

* For the photo album table, the partition key is **id**. 
* For the photo tag table, the partition key is **tag**. 
* For the user permission table, the partition key is **uid**, sort key is **email**. Just use default options when creating tables.

---

## Step 5 - Create a user in AWS IAM

For the local development, you will need an AWS access key ID and secret access key. The simplest way to get this information is by creating a user in AWS IAM.

* Go to AWS Identity and Access Management (IAM) -> Access management -> Users
* Create a user. In step 1, you will only need to input the user name. In step 2 set permission, choose **Attach policies directly** and then **Create policy**. Only give this user the necessary permissions. In this project, the minimum required permissions are S3 bucket and Dynamo DB access.

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowS3BucketManipulation",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::{YOUR_S3_BUCKET_NAME}",
                "arn:aws:s3:::{YOUR_S3_BUCKET_NAME}/*"
            ]
        },
        {
            "Sid": "AllowDynamoDBOperation",
            "Effect": "Allow",
            "Action": [
                "dynamodb:GetItem",
                "dynamodb:PutItem",
                "dynamodb:UpdateItem",
                "dynamodb:DeleteItem",
                "dynamodb:Scan",
                "dynamodb:Query"
            ],
            "Resource": [
                "arn:aws:dynamodb:*:{USER_ID}:table/{PHOTO_ALBUMS_TABLE}",
                "arn:aws:dynamodb:*:{USER_ID}:table/{ALBUM_TAGS_TABLE}",
                "arn:aws:dynamodb:*:{USER_ID}:table/{USER_PERMISSION_TABLE}",
                "arn:aws:dynamodb:*:{USER_ID}:table/*/index/*"
            ]
        }
    ]
}
```

* Create access key

After creating user, you will go to **Security Credentials** tab and **Create access key**

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

Select **Local code**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bn2ciad2qo78qi64tkh.jpeg)

Download your key or store it in somewhere
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt9vw82qbvk5ncilx9zi.jpeg)

---

## Step 6.1 - Setting up lambda `.env` file

1. Open `.env.example` under `lambda `folder, input your 
  * Google Client ID into `GOOGLE_CLIENT_ID` property 
  * Google Place API key into `GOOGLE_PLACES_API_KEY`
  * AWS S3 bucket name into `AWS_S3_BUCKET_NAME`
  * AWS S3 bucket URL into `IMAGEKIT_CDN_URL` (the URL is like https://{YOUR_BUCKET_NAME}.s3.amazonaws.com)
  * 3 DynamoDB tables into `PHOTO_ALBUMS_TABLE_NAME`, `PHOTO_ALBUM_TAGS_TABLE_NAME` and `PHOTO_USER_PERMISSION_TABLE_NAME`
  * We can leave `ALBUM_URL` empty for the local development.
  * For the local development, don't forget to input `AWS_REGION_NAME`, `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
  * `JWT_SECRET`, any string you want to use for signing and verifying JWT when logging into the app.

2. Modify file name from `.env.example` to `.env`.

## Step 6.2 - Setting up `.env` file on the root folder

1. Open `.env.example` under the root folder. This .env file is for Quasar VueJS front-end Web app. Input your 
  * Google Client ID into `GOOGLE_CLIENT_ID`
  * `MAPBOX_API_KEY `with your real key
  * AWS S3 bucket URL into `STATIC_FILES_URL` and `IMAGEKIT_CDN_URL` properties. 
  * We can leave `AWS_API_GATEWAY_URL` empty for now

2. Modify file name from `.env.example` to `.env`.

---

## Step 7.1 - Find your Google user ID

You almost get there.🤗 Firstly, go to [Google people API](https://developers.google.com/people/api/rest/v1/people/get). In the **resourceName**, input `people/me`. In **personFields**, input `names`.

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

After clicking the Execute button, you will find your id in names -> metadata -> source -> id.

## Step 7.2 - Insert your user info into DynamoDB

This app is supposed to be used by a small group of people (e.g. family members) so it doesn't have any user management feature. You will need to insert your user info into DynamoDB manually by accessing the AWS admin dashboard so that you will be granted admin permission after using Google account login.

Go to DynamoDB -> Tables -> Explore items -> Create items. Choose JSON view and update the JSON object below with your information.

```json
{
  "uid": {
    "S": "{YOUR_GOOGLE_USER_ID}"
  },
  "email": {
    "S": "{YOUR_GMAIL_ADDRESS}"
  },
  "displayName": {
    "S": "{AN_USERNAME_YOU_WANT_TO_USE_IN_APP}" # It's not a Google username.
  },
  "role": {
    "S": "admin" # It has to be admin.
  }
}
```

[Continue to part 3](https://dev.to/laurenceho/a-full-stack-vuejs-photo-album-app-part-3-4p3l)