AWS File Upload

What I Have Learned

I quickly self-taught myself how each technology works and interacts with othersfor this coding challenge by referring to online resources and AWS documentation (references below).

Next Steps

To further enhance this project, I plan to:

• Improve Responsive UI with Flowbite Tailwind CSS and more user-friendly authentication.
• One user has one folder on S3 bucket and no one can access other user's folder.
• Implement a notification system to inform users when file processing is complete.
• Explore using more AWS service to manage the workflow more effectively.

To Run the Project

Clone my repo and cd to frontend folder. Follow these commands to set up and run the project:

1. Install Dependencies

npm install
npm start
npm install -g @aws-amplify/cli
amplify configure

2. Configure AWS Amplify

Follow instructions from here to create an IAM user and get access keys.

# Follow these steps to set up access to your AWS account:

# Sign in to your AWS administrator account:
https://console.aws.amazon.com/

# Specify the AWS Region
? region:  us-east-2

# Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli

# Complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create

# Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************

# This would update/create the AWS Profile in your local machine
? Profile Name:  your-profile-name

# Successfully set up the new user.

3. Initialize Amplify

After you successfully set up the new user:

amplify init

? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code
Using default provider awscloudformation
? Select the authentication method you want to use: AWS access keys
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
? region:  us-east-2

4. Run the Application

You can now create an account and sign in to the app. You will receive a code in your email to verify your account.

npm start

Upon successful file upload, you will get an alert that your file is uploaded successfully.

Screenshots

• Home Page:
• File Upload Form:
• S3 Bucket View:
• DynamoDB Entry:
• EC2 Instance Logs:

References

• Install Flowbite
• AWS Amplify & Cognito
• Follow this to create access key
• Amplify upload from file
• Serverless Web App
• DynamoDB & Lambda & API

---