From 87e8390efd69864ce7f2881a74386ce4619e5109 Mon Sep 17 00:00:00 2001 From: 9pace Date: Thu, 15 Jan 2026 14:05:04 -0500 Subject: [PATCH 01/20] feat: avatar s3 feature for discussions app --- amplify-migration-apps/discussions/README.md | 33 +++-- amplify-migration-apps/discussions/index.html | 112 ++++++++++++++++- .../discussions/src/main.js | 114 ++++++++++++++++-- 3 files changed, 237 insertions(+), 22 deletions(-) diff --git a/amplify-migration-apps/discussions/README.md b/amplify-migration-apps/discussions/README.md index 3cf95d51d9e..0080497fdcc 100644 --- a/amplify-migration-apps/discussions/README.md +++ b/amplify-migration-apps/discussions/README.md @@ -2,11 +2,7 @@ ![](./images/app.png) -A discussion application built featuring authentication, GraphQL API, Lambda functions, and DynamoDB storage. - -> [!NOTICE] -> Since amplify operations add files to your local directory, its better not to operate within this repo. -> Instead, create your own private GitHub repository and copy the app over. +A discussion application built featuring authentication, GraphQL API, Lambda functions, DynamoDB storage, and S3. ## Install Dependencies @@ -169,6 +165,23 @@ https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/HowItWorks.Core ✔ Do you want to add a Lambda Trigger for your Table? (y/N) · no ``` +### Storage (S3 Avatars) + +S3 bucket for storing user profile pictures. + +```console +amplify add storage +``` + +```console +? Select from one of the below mentioned services: Content (Images, audio, video, etc.) +✔ Provide a friendly name for your resource that will be used to label this category in the project: · avatars +✔ Provide bucket name: · discus-avatars +✔ Who should have access: · Auth users only +✔ What kind of access do you want for Authenticated users? · create/update, read, delete +✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no +``` + ### Function **Node.js Lambda function that retrieves user activity from DynamoDB storage.** @@ -280,6 +293,8 @@ amplify push ├──────────┼─────────────────────────────┼───────────┼───────────────────┤ │ Storage │ activity │ Create │ awscloudformation │ ├──────────┼─────────────────────────────┼───────────┼───────────────────┤ +│ Storage │ avatars │ Create │ awscloudformation │ +├──────────┼─────────────────────────────┼───────────┼───────────────────┤ │ Function │ fetchuseractivity │ Create │ awscloudformation │ ├──────────┼─────────────────────────────┼───────────┼───────────────────┤ │ Function │ recorduseractivity │ Create │ awscloudformation │ @@ -332,11 +347,7 @@ this process for any number of users. > Based on https://github.com/aws-amplify/amplify-cli/blob/gen2-migration/GEN2_MIGRATION_GUIDE.md -> [!WARNING] -> Migration is not fully supported for this app yet due to a missing feature for refactoring DynamoDB storage tables. -> This guide ends at the `generate` step. - -First and install the experimental CLI package the provides the new commands: +First install the experimental amplify CLI package that provides the migration commands. ```console npm install --no-save @aws-amplify/cli-internal-gen2-migration-experimental-alpha @@ -419,4 +430,4 @@ Now connect the `gen2-main` branch to the hosting service: ![](./images/deploying-gen2-main-branch.png) -Wait for the deployment to finish successfully. +Wait for the deployment to finish successfully. \ No newline at end of file diff --git a/amplify-migration-apps/discussions/index.html b/amplify-migration-apps/discussions/index.html index 558a994e5b4..e0d813dd9e0 100644 --- a/amplify-migration-apps/discussions/index.html +++ b/amplify-migration-apps/discussions/index.html @@ -489,6 +489,89 @@ /* Utilities */ .hidden { display: none; } + /* Profile Page */ + .profile-section { + display: flex; + align-items: center; + gap: 30px; + padding: 40px; + background: #f7fafc; + border-radius: 16px; + margin-bottom: 30px; + } + .profile-avatar-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + } + .profile-avatar { + width: 120px; + height: 120px; + font-size: 40px; + border-radius: 50%; + object-fit: cover; + } + .avatar-upload-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 10px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 14px; + font-weight: 600; + transition: all 0.3s; + } + .avatar-upload-btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); + } + .profile-info { + flex: 1; + } + .profile-name { + font-size: 24px; + font-weight: 700; + color: #2d3748; + margin-bottom: 5px; + } + .profile-meta { + color: #718096; + font-size: 16px; + } + .upload-status { + padding: 15px; + border-radius: 12px; + text-align: center; + font-weight: 600; + } + .upload-status.success { + background: #c6f6d5; + color: #276749; + } + .upload-status.error { + background: #fed7d7; + color: #c53030; + } + .upload-status.loading { + background: #e9d8fd; + color: #553c9a; + } + .clickable-avatar { + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; + } + .clickable-avatar:hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + } + .avatar-img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + } + /* Page Header */ .page-header { margin-bottom: 25px; @@ -565,7 +648,7 @@

Confirm Your Account

-
U
+
U
@@ -624,6 +707,33 @@

+ + +