Photo Uploader Tool using AWS and NextJS

What is this?

I've created a full stack photo uploader tool using AWS and NextJS, for more details about what technology it uses please read more here: photo uploader tool

Super Quick start guide

1. Clone backend repo to ./backend/ 
2. Clone frontend repo to ./website/
3. In the ./backend/  copy .env.example to .env 
4. Set YOUR_AWS_IAM_PROFILE to be your IAM Profile in the .env file 
5. yarn install && sls deploy -s dev && bash echo-outputs.sh -s dev - this deploys your backend to AWS
6. Copy the values from the sls deploy output once it's finished
7. In the frontend ./website/ copy the .env.example to .env.local and copy the values from the sls out out from step 6.
8. yarn install && yarn dev - to start your frontend locally
9. Visit http://localhost:3000/ Register, Login and then upload some photos!

...for a more detailed guide please read on!

Pre-requisites

In order to use this guide, you should have some knowledge of the following:

Basic knowledge of AWS and setting up an IAM profile and credentials file
Basic knowledge of the Serverless Framework
Basic knowledge of NextJS and React

Getting started

First grab the Frontend repo here: photo uploader frontend and the backend here: photo uploader backend

Lets create a directory called photo-uploader anywhere on your computer (location does not matter) and save each of these repos as:

~/photo-uploader/backend/
~/photo-uploader/website/

Lets create a Workspace (VS Code users only)

This part is optional, but I highly recommend it as it's a really effective way of using VS Code when you are working with multiple repos at the same time, especially with full stack projects that have a backend, frontend and maybe even a mobile app.

Open VS Code & open a new blank window.
Click on the File menu and select Add Folder to Workspace...
Navigate to the photo-uploader directory you created earlier and select the website folder
Now repeat the above 2 steps but this time add the backend folder
Now click File > Save Workspace As... and save the workspace as photo-uploader.code-workspace somewhere safe on your computer.
(Even more optional...) Install this Peacock VS Code plugin
Hit CMD + Shift + P (for a Mac) and type "peacock" and then select Peacock: Change to a Favorite Color and select a color of your choice.

...and hey presto you have a workspace with 2 repos in it, and you can easily switch between them using the sidebar. And when you open back up VS Code it will remember your workspace and open both repos for you. We have even added a lovely color to our Workspace so we can easily see which one we are working in at a glance!

AWS Account with ~/.aws/credentials file

First off - you will need to have an AWS Account, along with an IAM profile (with Administrator access)

Create a ~/.aws/credentials file on your computer so we can use your IAM Profile to create our backend. See the AWS Docs about creating a credentials file here

Next make sure you have the AWS CLI installed and configured on your computer. See the AWS Docs about installing the AWS CLI here

Once good to go we can now run commands such as aws ec2 describe-instances --profile MyUserProfile and it will use the credentials in your ~/.aws/credentials file to authenticate you and describe your EC2 instances.

Backend Setup

Note all of this is performed in the backend/ directory in our workspace.

In VS Code, press Control + ` to open a new terminal window and make sure we are in the backend/ directory
Make sure you have Serverless frame work installed: yarn global add serverless to install the serverless framework to your system
Run yarn install to install the dependencies
Next copy the .env.example to .env and fill in the values

YOUR_AWS_IAM_PROFILE=XXXXXXXXXXX
REGION=us-east-1
PREFIX=pinkmonkey-
SERVICE_NAME=photo-uploader
DYNAMO_DB_TABLE=photos
COGNITO_POOL=users
S3_BUCKET=photos-bucket

Note - for this demo you only actually have to change the YOUR_AWS_IAM_PROFILE=XXXXXXXXXXX to be YOUR_AWS_IAM_PROFILE=MyUserProfile from your credentials file. The rest of the values are optional and can be used as defaults.

You may also change the region if you wish to one nearer to you and you want speedier uploads and downloads, but it's not required.

A note about the PREFIX - This is used to prefix the SERVICE_NAME, DYNAMO_DB_TABLE, COGNITO_POOL and S3_BUCKET. As you can see in this example I have chosen "pinkmonkey-" as my prefix. This is simply an arbitrary value and is only used so that all of our AWS resources that we create have a uniquely prefixed name.

If like me you have multiple AWS services spun up, then not only is this good for avoiding any naming collisions, but also makes it easier to identify which resources belong to which project when you haven't looked at them for a while.

Now run sls deploy -s dev to deploy the backend to AWS This will take a few minutes to run, but once it's done you should see something like this:

Bundling with Webpack...
No external modules needed
Copying existing artifacts...

✔ Service deployed to stack pinkmonkey-photo-uploader-dev (132s)

endpoints:
  POST - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/insert-photo
  GET - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/complete-photo/{id}
  GET - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/get-photos
  DELETE - https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/delete-photo/{id}
functions:
  insertPhoto: pinkmonkey-photo-uploader-dev-insertPhoto (3.3 MB)
  completePhoto: pinkmonkey-photo-uploader-dev-completePhoto (3.3 MB)
  getPhotos: pinkmonkey-photo-uploader-dev-getPhotos (3.3 MB)
  deletePhoto: pinkmonkey-photo-uploader-dev-deletePhoto (3.3 MB)

Yay - you now have a fully functional backend running on AWS! There will be a Cognito UserPool and client, a DynamoDB table, an S3 bucket, and Lambda functions to handle the API calls.

The backend will handle the upload of your images by storing them to s3 and then creating a record in DynamoDB. It will also handle the displaying and deletion of the images.

Finally run the bash script with bash echo-outputs.sh -s dev to get the information we need from our stack to use in our frontend. This will output something like this:

NEXT_PUBLIC_AWS_REGION=xx-xxxx-1
NEXT_PUBLIC_AWS_USER_POOL_ID=xx-xxxx-1_123456789
NEXT_PUBLIC_AWS_USER_POOL_WEB_CLIENT_ID=abdef0123456789012345
NEXT_PUBLIC_AWSAPIENDPOINT=https://xxxxxxxx.execute-api.xx-xxxx-1.amazonaws.com/dev

Copy these values so that we can use in our frontend to connect to our backend in the next steps...

Frontend Setup

Note all of this is performed in the website/ directory in our workspace.

In VS Code, press Control + ` to open a new terminal window and make sure we are in the website/ directory
Run yarn install to install the dependencies
Next copy the .env.example to .env.local and replace the values below with our values from the backend setup:

NEXT_PUBLIC_AWS_REGION=us-east-1
NEXT_PUBLIC_AWS_USER_POOL_ID=us-east-1_XXXXXXXXX
NEXT_PUBLIC_AWS_USER_POOL_WEB_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_AWSAPIENDPOINT=https://XXXXXXXX.execute-api.us-east-1.amazonaws.com/dev

Now run yarn install && yarn dev to start the frontend. This will take a few seconds to run, but once it's done you should see something like this:

If all is setup correctly then you should now be able to Register a new user, get an email confirmation code, and then login to the website.

Testing the Frontend

Register a new user
Check your email for the confirmation code
Enter the confirmation code
Login to the website (Should be automatic after confirming your email)
Click the "Photo Uploader" button

This will take you to the Photo Uploader page. Here you can select any JPEG images from your computer and start uploading them...

... hit the refresh button, or reload the page to see your uploaded images, along with the crops and extracted color made by the frontend script

And Voila! 🥳 - you have a fully functional Photo Uploader tool running on AWS! All images will be saved in your S3 Bucket, and the details will be saved in your DynamoDB table.

Once you are finished you can run sls remove -s dev in the backend/ directory to remove all of the AWS resources that were created.

If you need any help or have any questions, please feel free to reach out to me on Twitter: @joemore_g

Enjoy!!