feat: Personal Media Vault - Full-Stack React App

[dgandhi62]

📁 Personal Media Vault - Full-Stack React App

Overview

Built a complete personal media management application with AWS Amplify backend and React frontend featuring real-time thumbnail processing.

✨ Features

Frontend (React + TypeScript)

• Authentication: Social login with Facebook/Google + Cognito
• Media Upload: Drag & drop file upload with progress indicators
• Thumbnail Processing: Real-time status indicators showing Lambda processing. Thumbnail can be seen in the s3 bucket
• Notes Management: Quick note-taking with CRUD operations
• Responsive Design: Clean, modern UI with gradient styling

Backend (AWS Amplify - user needs to add)

• GraphQL API: AppSync with user-based authorization
• File Storage: S3 with automatic Lambda triggers
• Thumbnail Generation: Lambda function processes uploaded images
• Database: DynamoDB with relational data modeling
• Authentication: Cognito User Pools with social providers Google and Facebook (Facebook login not authorized since email auth needs to be verified by fb)
• User Grouos: User groups of Admin and Basic (manually need to be added, lambda triggers not configured)

🔧 Technical Implementation

Key Components

• App.tsx: Main application with authentication wrapper
• GraphQL Schema: User profiles, media items, collections, sharing
• Lambda Function: Automatic thumbnail generation on S3 uploads
• Storage Integration: Amplify Storage with S3 backend

Real-time Features

• Upload progress tracking
• Thumbnail processing status (⏳ Processing → ✅ Complete)
• Automatic file listing refresh
• Error handling with user feedback

🚀 Architecture

React Frontend → AWS Amplify → GraphQL API → DynamoDB
↓
S3 Storage → Lambda Trigger → Thumbnail Generation

📱 User Experience

1. Login: Social authentication or email/password
2. Upload: Drag files to upload with instant feedback
3. Process: Lambda automatically generates thumbnails
4. Manage: View files with processing status indicators
5. Notes: Quick note-taking alongside media management

🛠 Tech Stack

• Frontend: React 18, TypeScript, AWS Amplify UI
• Backend: AWS Amplify, GraphQL, Lambda, S3, DynamoDB
• Auth: AWS Cognito with social providers
• Deployment: Amplify Hosting with CI/CD

Ready for production deployment with scalable AWS infrastructure! 🚀

[iankhou]

Looks good overall, a couple of small things.

The stuff under features and overview should be included in your app's README.

The README should be much more thorough and geared toward instructing an operator to run amplify init, and all subsequent steps.

[iankhou]

How do I set up the app with Amplify? What CLI commands do I need to run to provision the resources needed for each category? Also need instructions for Google and Facebook OAuth setup.

[dgandhi62]

I've updated the app3 level's README with that. The README inside the personal-media-vault folder is specific to the app, not regarding setting up backend particularly

[dgandhi62]

I committed it directly on the gen2-migration branch as I added stuff in my app (since it was just a README and no code changes).

[iankhou]

nice!