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

This post continues from my last post A full-stack Vuejs photo album app [part 1]

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.

{
    "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

Select Local code

Download your key or store it in somewhere

---

Step 6.1 - Setting up lambda .env file

1. Open .env.example under lambdafolder, 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_KEYwith 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. In the resourceName, input people/me. In personFields, input names.

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.

{
  "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