CloudMorph is a modern, production-grade SaaS frontend that demonstrates true serverless cloud architecture. Built with a focus on clean UI/UX and zero-trust security principles, it allows users to securely upload files directly to AWS S3, triggers event-driven Lambda processing, and visualizes extracted insights—all without exposing a single backend credential in the frontend.
Traditional file processing requires monolithic servers handling uploads, which creates bottlenecks and security risks. CloudMorph solves this by leveraging the power of AWS API Gateway pre-signed URLs, allowing secure, direct client-to-cloud uploads, followed by decoupled asynchronous processing.
- Direct-to-S3 Uploads: Utilizes pre-signed URLs to upload files directly from the browser to AWS S3, bypassing traditional backend bottlenecks.
- Event-Driven Processing: Automated AWS Lambda triggers for processing uploaded files (PDF, CSV, TXT) immediately upon S3 arrival.
- Serverless Frontend: 100% static frontend hosted on GitHub Pages with zero server dependencies.
- Intelligent Results Dashboard: Instantly visualizes processed file metrics (word counts, CSV structure, character counts) using a clean JSON data viewer.
- Modern SaaS Aesthetics: Glassmorphism UI, smooth micro-animations, and a responsive mobile-first design using Tailwind CSS.
- Zero-Trust Security: Absolutely no AWS keys or secrets exist in the frontend code.
- HTML5 & CSS3 (Vanilla + Custom animations)
- Tailwind CSS (Rapid UI development & utility classes)
- Vanilla JavaScript (ES6+ async/await, Fetch API)
- FontAwesome & Google Fonts (Outfit)
- Amazon API Gateway (REST API)
- AWS Lambda (Python/Node.js processing)
- Amazon S3 (Secure Input & Output Buckets)
The entire flow is strictly serverless, event-driven, and horizontally scalable.
- Get Upload URL: The frontend sends a
POSTrequest to the API Gateway with the target filename. - Pre-Signed Generation: The API Gateway triggers a Lambda that generates a secure, time-bound S3 pre-signed URL and returns it.
- Direct Upload: The frontend
PUTs the file directly to the S3 Input Bucket using the pre-signed URL. - Event Trigger: S3 detects the new file and fires an event to the Processing Lambda.
- Data Extraction: The Lambda extracts intelligence from the file and saves a
.jsonreport in the S3 Output Bucket. - Insight Visualization: The frontend polls the output destination, fetches the result, and renders a beautiful intelligence dashboard.
Since CloudMorph is a fully static serverless application, running it locally is instant.
- Clone the repository:
git clone https://github.com/kevinjosh10/Cloud-Morph.git cd Cloud-Morph - Open
index.htmlin your favorite browser. No build steps required. (Optional: Serve via a local server likenpx serveor Live Server extension in VS Code for a better development experience).
This repository is pre-configured to be hosted on GitHub Pages.
- Go to your repository settings in GitHub.
- Navigate to the Pages section.
- Select the
mainbranch and/ (root)folder. - Save. Your live site will be available at
https://kevinjosh10.github.io/Cloud-Morph/.
Security First: This application adheres to strict security best practices. No AWS credentials, IAM keys, or sensitive environment variables are stored in the frontend codebase. All interactions with the AWS Cloud are securely brokered through an API Gateway acting as a reverse proxy, generating temporary pre-signed URLs to authorize client actions.
While this is a robust V1, here is the roadmap for future enhancements:
- AI Summarization Upgrade: Integrate AWS Bedrock or OpenAI to generate natural language summaries of the uploaded documents.
- Authentication System: Add Amazon Cognito or Firebase Auth to tie uploaded files to specific user accounts.
- File History Dashboard: Persist upload history to DynamoDB and display a historical log of processed files.
This project is licensed under the MIT License - see the LICENSE file for details.