Showcase
Status: Completed

Full-Stack AWS Pipeline

Full-stack AWS project featuring a Dockerized React frontend on EC2, fronted by an Application Load Balancer and CloudFront. Integrated with a serverless backend (API Gateway + Lambda), automated via CodePipeline, CodeBuild, and ECR.

Architectural Core

This project showcases a modern full-stack deployment strategy using AWS managed services to ensure scalability, security, and developer productivity.

⚛️ Serverless Backend

API Gateway and AWS Lambda providing a scalable, pay-as-you-go backend logic without server management.

🐳 Containerized UI

React application containerized with Docker, stored in Amazon ECR, and hosted on EC2 for consistent delivery.

🌊 CI/CD Pipeline

End-to-end automation with AWS CodePipeline, triggering builds on every GitHub commit for rapid iteration.

🛡️ Security & Monitoring

IAM-controlled access and CloudWatch logging for comprehensive visibility and operational excellence.

Project Visual Journey

System Architecture (High Level)

A high-level overview of the serverless backend and containerized frontend integration.

System Architecture v2

Serverless Architecture

Detailed overview of the serverless backend integration and cloud resource interactions.

Serverless Architecture

Source Control

GitHub commit triggering the automated pipeline to build and deploy modern updates.

GitHub Trigger

AWS CodePipeline

The central nervous system orchestrating Source, Build, and Deploy phases across the stack.

CodePipeline View

CodeBuild Execution

Provisioning compute to build Docker images and prepare artifacts for backend deployment.

CodeBuild Details

Amazon ECR Repository

Secure storage for versioned Docker images, ready for deployment to EC2 instances.

ECR Registry

Serverless Logic (AWS Lambda)

Execution of business logic in response to API requests, scaling automatically with demand.

AWS Lambda

RESTful Interface (API Gateway)

Managing API routes and handling communication between the frontend and serverless backend.

API Gateway

Compute Layer (EC2)

Virtual servers running the Dockerized React frontend, managed via Instance Connect.

EC2 Hosting

Infrastructure Management

Direct SSH access to verify container status and production environment integrity.

EC2 Instance Connect

Observability (CloudWatch)

Aggregated logs and metrics ensuring the health and performance of the entire stack.

CloudWatch Logs

Backend Verification

Direct test of the Lambda-API Gateway integration returning live data from the cloud.

API Response

Live Production UI (Dashboard)

The polished React application successfully serving users via a global delivery network.

Final Application UI Dashboard

Interface Details

Close-up view of the application interface showing the full-stack data integration.

Application Details