Business Implications
Steps Performed
Created a React app, connected GitHub CI/CD with Amplify, added auth, data, and storage resources, then deployed a secure, per-user bucket list with image uploads.
1.
Create React App (Vite)
Initialized a Vite + React project, installed dependencies, and verified the local dev server. Established a clean foundation for integrating Amplify libraries, UI components, and backend connectivity.
2.
Initialize GitHub Repository
Created a public GitHub repo, initialized git locally, committed the app, and pushed to main. Prepared the project for Amplify’s Git-based build and deploy workflow.
3.
Install Amplify And Scaffold Backend
Ran Amplify initialization to add project files. Installed aws-amplify and @aws-amplify/ui-react. Committed updates to enable code-first backend configuration and UI components for rapid integration.
4.
Configure Auth, Data, And Storage
Defined Cognito auth (email sign-up/verification), a BucketItem data model with owner-only access, and S3 storage paths restricted by identity. Linked resources in backend.ts for a cohesive backend.
5.
Deploy With Amplify Hosting
Connected the GitHub repo in AWS Amplify, created a service role, and deployed. Every push to main triggers an automated build, backend provisioning, and delivery via CloudFront.
AWS Services Used
AWS Amplify
Amazon Cognito
AWS AppSync (Amplify Data)
Amazon S3
AWS IAM
AWS CloudFront
React (Vite)
Amplify UI React
Git & GitHub
Node.js / npm
Technical Tools Used
Full-Stack Serverless Development
CI/CD Pipeline With Amplify
Authentication And Authorization
CRUD Data And File Storage
Skills Demonstrated
AWS Amplify Bucket List Tracker
Full-Stack Serverless React App With CI/CD
Built a full-stack bucket list tracker using AWS Amplify. The app includes email sign-up/login, per-user data permissions, and image uploads. Code is auto-built and deployed from GitHub, enabling a production-ready, scalable React app with a fully managed cloud backend.
