---
## Suggested Repository Description — 130 Characters
```text
☁️ AWS Three-Tier Command PWA: VPC, ALB, Auto Scaling, Aurora, docs, cost, security & deploy-ready Cloudflare portfolio. system UI
```
Character count: `130`
---
## README.md Structure
```text
README.md
├── 1. Project Overview
├── 2. Features
├── 3. Tech Stack
├── 4. Architecture Diagram
├── 5. Screenshots
├── 6. Live Demo / Video Demo
├── 7. Installation
├── 8. Quick Start
├── 9. Project Structure
├── 10. Configuration (.env)
├── 11. API Documentation
├── 12. Database Schema
├── 13. AI/ML Pipeline
├── 14. Cloud Architecture
├── 15. Deployment Guide
├── 16. CI/CD Pipeline
├── 17. Security
├── 18. Performance Benchmark
├── 19. Cost Estimation
├── 20. Testing
├── 21. Roadmap
├── 22. FAQ
├── 23. Contributing
├── 24. License
├── 25. Credits & References
└── 26. Contact
```
---
## 1. Project Overview
**AWS Three-Tier Architecture Command** adalah website portfolio static-first PWA untuk menampilkan proyek cloud architecture berbasis official AWS Samples workshop. Proyek ini mengubah materi workshop AWS three-tier menjadi dashboard terminal/news command yang bisa dibuka di Cloudflare Pages tanpa build command.
Fokus utamanya adalah menjelaskan arsitektur enterprise: VPC, public/private subnet, Application Load Balancer, Auto Scaling, EC2 web tier, Node.js app tier, Aurora MySQL Multi-AZ, high availability, security group, cost estimation, dan deployment documentation.
---
## 2. Features
- Command-center landing page dengan WebGL/canvas morphing visual.
- Topbar, ticker, sidebar, cards, command bar, dan scanline UI mengikuti gaya `Pasted text.txt`.
- Halaman arsitektur AWS three-tier dengan diagram.
- Repository ranking untuk AI/Cloud portfolio.
- Portfolio matrix untuk jalur AI Solutions Architect.
- Cost + HA simulator.
- README viewer di dalam website.
- PWA-ready dengan `manifest.json` dan `sw.js`.
- Cloudflare Pages Direct Upload-ready.
- No nested archive, no executable, no installer.
---
## 3. Tech Stack
| Layer | Stack | Purpose |
|---|---|---|
| Frontend | HTML5, CSS3, Vanilla JavaScript | Static PWA shell and command UI |
| Visual | Canvas/WebGL-inspired particle morph | Dynamic portfolio landing page |
| PWA | Web App Manifest, Service Worker | Installable and offline-capable shell |
| Cloud Hosting | Cloudflare Pages | Direct Upload static deployment |
| Optional Edge | `_worker.js`, Pages Functions | Health endpoint and future API adapter |
| Cloud Architecture | AWS VPC, ALB, EC2, Auto Scaling, Aurora | Three-tier reference architecture |
| Documentation | Markdown, architecture notes, repo matrix | Portfolio-grade explanation |
---
## 4. Architecture Diagram
The included diagram file is available at:
```text
assets/aws-three-tier-architecture.png
```
Architecture flow:
```mermaid
flowchart LR
User[Internet User] --> ALB1[External Application Load Balancer]
ALB1 --> Web[Web Tier: EC2 + Nginx/React]
Web --> ALB2[Internal Application Load Balancer]
ALB2 --> App[Application Tier: EC2 + Node.js]
App --> DB[(Aurora MySQL Multi-AZ)]
VPC[VPC Public/Private Subnets] -. contains .- ALB1
VPC -. contains .- Web
VPC -. contains .- ALB2
VPC -. contains .- App
VPC -. contains .- DB
```
---
## 5. Screenshots
Recommended screenshot set for GitHub and scholarship/job portfolio:
| Screenshot | File / Page | Purpose |
|---|---|---|
| Landing | `/` | Shows dynamic AWS command dashboard |
| Architecture | `#/architecture` | Shows AWS diagram and component breakdown |
| Repository | `#/repository` | Shows selected official repository |
| Portfolio | `#/portfolio` | Shows AI/Cloud matrix |
| Cost + HA | `#/cost` | Shows trade-off simulator |
| README | `#/readme` | Shows full documentation inside the website |
Use browser screenshots after deploying to Cloudflare Pages.
---
## 6. Live Demo / Video Demo
Live demo placeholder:
```text
https://your-cloudflare-pages-domain.pages.dev
```
Video demo checklist:
1. Open landing page.
2. Show command bar navigation.
3. Open Architecture page.
4. Explain public ALB, web tier, internal ALB, app tier, and Aurora DB.
5. Open Cost + HA simulator.
6. Open README page.
7. Show installable PWA behavior.
---
## 7. Installation
Local preview:
```bash
python -m http.server 8787
```
Open:
```text
http://localhost:8787
```
Alternative:
```bash
npx serve .
```
Avoid relying only on `file://` because service worker and PWA APIs are designed for localhost or HTTPS.
---
## 8. Quick Start
```bash
# 1. Extract package
unzip UPLOAD_THIS_TO_CLOUDFLARE_PAGES_AWS_THREE_TIER_ARCHITECTURE_COMMAND_UNIFIED_IT_PWA_V2.zip
# 2. Enter folder
cd AWS_THREE_TIER_ARCHITECT_COMMAND_UNIFIED_IT_CLOUDFLARE_PAGES_V1
# 3. Run local static server
python -m http.server 8787
# 4. Open browser
# http://localhost:8787
```
Command bar examples inside the app:
```text
architecture
repo
portfolio
readme
deploy
search terraform
```
---
## 9. Project Structure
```text
AWS_THREE_TIER_ARCHITECT_COMMAND_UNIFIED_IT_CLOUDFLARE_PAGES_V1/
├── index.html
├── README.md
├── README.txt
├── _headers
├── _redirects
├── _worker.js
├── manifest.json
├── sw.js
├── wrangler.jsonc
├── api/
│ └── health/
│ └── index.html
├── assets/
│ ├── app.css
│ ├── app.js
│ ├── aws-three-tier-architecture.png
│ ├── icon.svg
│ ├── icon-192.png
│ └── icon-512.png
├── data/
│ ├── portfolio-projects.json
│ └── repo-matrix.json
├── docs/
│ ├── AWS_WORKSHOP_SOURCE_SUMMARY.md
│ ├── DEPLOYMENT_GUIDE.md
│ └── ui-reference-from-pasted-text.txt
└── developer-source/
└── aws-three-tier-web-architecture-workshop/
```
---
## 10. Configuration (.env)
This package is static-first and does not require `.env` for preview. For a future full-stack version, use environment variables like:
```env
APP_NAME=AWS Three-Tier Architecture Command
PUBLIC_SITE_URL=https://your-site.pages.dev
AWS_REGION=ap-southeast-1
AWS_ACCOUNT_ID=000000000000
DATABASE_URL=mysql://user:password@aurora-cluster/three_tier
CLOUDFLARE_ACCOUNT_ID=your_account_id
CLOUDFLARE_PROJECT_NAME=aws-three-tier-arch-command
```
Never commit real credentials to GitHub.
---
## 11. API Documentation
Current package is a static showcase. API documentation is included as a portfolio blueprint:
| Endpoint | Method | Purpose | Status |
|---|---:|---|---|
| `/api/health/` | GET | Static health page | Included |
| `/api/architecture` | GET | Future architecture metadata | Planned |
| `/api/cost-estimate` | POST | Future cost estimate calculation | Planned |
| `/api/deploy-check` | POST | Future Cloudflare deployment validator | Planned |
| `/api/repo-matrix` | GET | Future repo ranking API | Planned |
Example health response idea:
```json
{ "status": "ok", "project": "aws-three-tier-architecture-command" }
```
---
## 12. Database Schema
The original AWS workshop uses Aurora MySQL as the database tier concept. This static portfolio package does not run a real database, but it documents the expected schema direction.
Example relational schema for future implementation:
```sql
CREATE TABLE architecture_components (
id INTEGER PRIMARY KEY,
name TEXT NOT NULL,
tier TEXT NOT NULL,
provider TEXT DEFAULT 'AWS',
description TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE cost_estimates (
id INTEGER PRIMARY KEY,
web_instances INTEGER NOT NULL,
app_instances INTEGER NOT NULL,
database_mode TEXT NOT NULL,
monthly_usd NUMERIC NOT NULL,
ha_score INTEGER NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```
---
## 13. AI/ML Pipeline
This AWS three-tier project is the Cloud Architecture core. For AI Solutions Architect portfolio, connect it with an AI/ML pipeline:
```text
Documents / Logs / Tickets
→ Ingestion Worker
→ Object Storage / Database
→ Embedding Model
→ Vector Database
→ Retrieval-Augmented Generation
→ API Gateway
→ Frontend Dashboard
→ Monitoring + Evaluation
```
Recommended AI extensions:
- RAG architecture explanation over AWS docs and runbooks.
- CloudOps incident assistant.
- Cost anomaly detection.
- Forecasting model for traffic and infrastructure cost.
- MLOps pipeline using MLflow/Kubeflow/SageMaker.
---
## 14. Cloud Architecture
Core AWS architecture:
- VPC with multi-AZ network segmentation.
- Public subnets for internet-facing load balancing.
- Private subnets for app and database layers.
- External Application Load Balancer.
- Web tier EC2 Auto Scaling group.
- Internal Application Load Balancer.
- Application tier EC2 Auto Scaling group.
- Aurora MySQL Multi-AZ database layer.
- Security groups and least-privilege network rules.
- NAT Gateway / routing strategy depending on final topology.
Portfolio explanation should include trade-offs: cost, availability, scalability, blast radius, operational complexity, and disaster recovery.
---
## 15. Deployment Guide
Cloudflare Pages Direct Upload:
```text
Cloudflare Dashboard
→ Workers & Pages
→ Create application
→ Pages
→ Direct Upload
→ Upload extracted project folder
→ Deploy
```
Recommended settings:
```text
Framework preset: None
Build command: leave empty
Build output directory: /
Root directory: /
```
Critical files:
```text
index.html
assets/app.css
assets/app.js
manifest.json
sw.js
_headers
_redirects
README.md
```
---
## 16. CI/CD Pipeline
Suggested GitHub Actions workflow for future repository deployment:
```yaml
name: validate-cloudflare-pages-package
on: [push, pull_request]
jobs:
validate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Check root files
run: |
test -f index.html
test -f README.md
test -f manifest.json
test -f sw.js
- name: Check file size
run: find . -type f -size +25M -print -quit | tee /tmp/oversize && test ! -s /tmp/oversize
```
Optional next step: deploy with Wrangler after validation.
---
## 17. Security
Security checklist:
- No `.env` secrets committed.
- No executable files in deploy ZIP.
- No nested archive in final Cloudflare upload.
- Use security headers from `_headers`.
- Avoid unsafe external scripts.
- Keep service worker cache versioned.
- Use least-privilege IAM for real AWS deployment.
- Use private subnets for application and database layers.
- Do not expose Aurora/database directly to the public internet.
- Document threat model and trust boundaries.
---
## 18. Performance Benchmark
Static website benchmark targets:
| Metric | Target | Note |
|---|---:|---|
| First Contentful Paint | < 1.8s | Static app shell |
| Largest Contentful Paint | < 2.5s | Optimize diagram and CSS |
| Total Blocking Time | < 200ms | Vanilla JS, no heavy framework |
| Cumulative Layout Shift | < 0.1 | Fixed layout and image sizing |
| PWA Installability | Pass | HTTPS or localhost required |
For the AWS architecture itself, benchmark app tier latency, database query time, ALB target response time, scaling behavior, and cost under load.
---
## 19. Cost Estimation
Static showcase cost:
```text
Cloudflare Pages static preview: usually free tier eligible depending on account limits and usage.
```
AWS architecture cost drivers:
- EC2 web/app instance count and size.
- Application Load Balancer hours and LCU usage.
- NAT Gateway hours and data processing.
- Aurora MySQL instance/storage/IO.
- Data transfer.
- CloudWatch logs and metrics.
- Backups and snapshots.
The website includes a simple simulator under `#/cost` to explain trade-offs visually.
---
## 20. Testing
Manual testing checklist:
- Open `/` locally.
- Navigate with sidebar buttons.
- Use command bar: `architecture`, `repo`, `portfolio`, `readme`, `deploy`.
- Search portfolio with `search rag`.
- Open raw `README.md`.
- Check mobile width under 390px.
- Confirm no horizontal scroll.
- Confirm service worker registration over localhost/HTTPS.
- Confirm `_redirects` fallback works after deployment.
- Confirm all important links open correctly.
---
## 21. Roadmap
- [ ] Add Terraform version of AWS three-tier architecture.
- [ ] Add AWS CDK alternative.
- [ ] Add GitHub Actions validation workflow.
- [ ] Add CloudWatch dashboard screenshots.
- [ ] Add Grafana/Loki observability extension.
- [ ] Add RAG assistant for architecture documentation.
- [ ] Add threat model diagram.
- [ ] Add ADR documents.
- [ ] Add cost export JSON/CSV.
- [ ] Add video demo and deployed live URL.
- [ ] Add Indonesian/English language toggle.
- [ ] Add printable PDF architecture brief.
---
## 22. FAQ
**Q: Apakah ini langsung menjalankan AWS backend asli?**
A: Tidak. Paket ini adalah website portfolio static PWA yang menjelaskan dan menampilkan arsitektur AWS three-tier. Source workshop AWS disertakan sebagai referensi developer-source.
**Q: Apakah bisa diupload ke Cloudflare Pages?**
A: Ya. Root project memiliki `index.html`, asset relatif, manifest, service worker, headers, dan redirects.
**Q: Apakah perlu build command?**
A: Tidak untuk preview static.
**Q: Apakah README masuk ke website?**
A: Ya. Website memiliki halaman `#/readme` dan file raw `README.md` di root.
---
## 23. Contributing
Contributing guideline:
1. Fork repository.
2. Create feature branch.
3. Keep `index.html`, `README.md`, and deployment docs updated.
4. Do not add secrets, installers, or nested archives.
5. Validate with local server.
6. Open pull request with screenshot and explanation.
Recommended PR labels:
```text
documentation
cloud-architecture
pwa
security
performance
ui
```
---
## 24. License
This portfolio wrapper should use a clear license selected by the project owner. The included upstream AWS workshop source contains its own license file in:
```text
developer-source/aws-three-tier-web-architecture-workshop/LICENSE
```
Always review upstream license terms before redistribution or commercial use.
---
## 25. Credits & References
Credits:
- AWS Samples — `aws-three-tier-web-architecture-workshop` as the core architecture reference.
- Cloudflare Pages documentation for deployment target.
- GitHub README guidance for repository documentation purpose.
- Pasted UI reference from the provided `Pasted text.txt`.
- README style reference from the provided `Pasted markdown.md`.
- Author packaging and portfolio adaptation: Roberto Ocaviantyo Tahta Laksmana.
Official references:
```text
https://github.com/aws-samples/aws-three-tier-web-architecture-workshop
https://developers.cloudflare.com/pages/
https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes
```
---
## 26. Contact
**Author:** Roberto Ocaviantyo Tahta Laksmana
**GitHub:** [@yirassssindaba-coder](https://github.com/yirassssindaba-coder)
**Project type:** Cloud / AI Solutions Architect portfolio PWA
Suggested repository description exactly 130 characters:
```text
☁️ AWS Three-Tier Command PWA: VPC, ALB, Auto Scaling, Aurora, docs, cost, security & deploy-ready Cloudflare portfolio. system UI
```
---
**AWS Three-Tier Architecture Command**
Cloudflare Pages PWA for AWS Cloud Architecture, AI Solutions Architect Portfolio, README-first documentation, and deploy-ready presentation.
