Quasar S3 photo albums web app

Table of Contents

1. About The Project
   • Built With
   • Architecture
2. Getting Started
   • Prerequisites
   • Create S3 bucket
   • S3 bucket policy
   • S3 CORS policy
   • Integrate with ImageKit
   • Mapbox API key
   • AWS Lambda Function
3. How to run locally

About The Project

This is a fullstack photo album web app using Vue3, Quasar, Fastify and AWS (including API Gateway, Lambda function, S3, CloudFront and dynamoDB). You can use this web app to display your photos in S3 bucket and manage your photos. 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.

For the detailed tutorial, you can check here.

Built With

Architecture

Getting started

Prerequisites

You will need the follows:

1. Google Place API key (For admin manage albums)
2. Google OAuth 2.0 Client ID (For admin access)
3. AWS user and role with appropriate permission
4. AWS S3 bucket (For SPA website hosting and storing photos)
5. AWS DynamoDB table (For managing album information)
6. AWS Lambda Function with API Gateway
7. AWS CloudFront (It's not necessary)
8. ImageKit account (It's not necessary)
9. Mapbox API key (For displaying map)

Create S3 bucket

Before you start, you need create an AWS S3 bucket. This bucket will be for your SPA website hosting, and storing your photos. Once you create them, replace properties STATIC_FILES_URL and IMAGEKIT_URL with the bucket URL you created in.env.example and modify file name to .env. (the URL is like https://{YOUR_BUCKET_NAME}.s3.amazonaws.com)

You will also need to replace IMAGEKIT_CDN_URL and AWS_S3_BUCKET_NAME in.env.example in ./server folder with the bucket you created.

S3 bucket policy

You usually want to make your S3 bucket public so that your friends can see your photos and website. To achieve this, you need to add getObject in the bucket policy (under Permissions tab):

{
  "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_BUCKET_NAME}/*"
    }
  ]
}

S3 CORS policy

Don't forget to put CORS into S3 bucket configuration[1] to prevent other people link your photos from their websites directly. No matter where you deploy your app (AWS or Google Firebase), you should add those URLs for hosting your website into CORS configuration. For example:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://www.example1.com"],
    "ExposeHeaders": []
  }
]

Integrate with ImageKit

In order to reduce the traffic with S3 bucket (to save money!), this project integrate with ImageKit CDN. ImageKit.io is a cloud-based image CDN with real-time image optimization and transformation features that help you deliver perfectly optimized images across all devices[2]. You can follow this documentation to create an account in the ImageKit. You will have 20GB bandwidth per month as a free user. Once you have your own ImageKit URL, replace this property IMAGEKIT_URL with your real information in.env.example and modify file name to .env. And use the same URL in the server folder.

Important

If you change S3 bucket name, don't forget to update the configuration in ImageKit, and AWS IAM permission for Imagekit.

Mapbox API key

This project uses Mapbox to display the map. You can get your own Mapbox API key here. Once you have your own Mapbox API key, replace this property MAPBOX_API_KEY with your real information in.env.example and modify file name to .env.

Google OAuth 2.0 client ID

Please check here for further information. You will also need to set up OAuth consent screen. Please check here Once you have Google OAuth 2.0 client ID, replace this property GOOGLE_CLIENT_ID with your real information in.env.example and modify file name to .env. And use the same client ID in the server folder.

Login UI

This project uses Google OAuth 2.0 to authenticate users. If you don't want to use Google OAuth 2.0, you will need to implement login UI and authentication process by yourself. Once you set up Google OAuth 2.0 client ID and OAuth consent screen, you can access login UI by going to http://localhost:9000/login. You will also need to add your Google account information in the DynamoDB table you created. If every thing is set up correctly, you should be able to login with your Google account and see the admin page as below:

AWS Lambda Function

This project uses AWS Lambda Function to handle all APIs (as BFF, backend for frontend) and authentication process once it's deployed to AWS. Please check further information in the server folder. here

How to run locally

Install the dependencies

$ npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

$ quasar dev

or

$ npm run serve

Lint the files

$ npm run lint

Run unit tests

$ npm run test

Build the app for production

$ quasar build

or

$ npm run build

Customize the Quasar configuration

See Configuring quasar.conf.js.

References

1. CORS Configuration
2. Optimize and resize images in AWS S3 in real-time with ImageKit