{"id":50445115,"url":"https://github.com/bel7phegor/shopnow-frontend","last_synced_at":"2026-05-31T21:00:54.277Z","repository":{"id":359615844,"uuid":"1220191662","full_name":"Bel7phegor/shopnow-frontend","owner":"Bel7phegor","description":"React e-commerce frontend with production-ready CI/CD pipeline, Docker containerization, and multi-environment deployment on AWS (Development \u0026 Production). Includes security scanning with Snyk, Trivy, Arachni, and ZAP.","archived":false,"fork":false,"pushed_at":"2026-05-30T18:38:25.000Z","size":16652,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-30T20:15:33.969Z","etag":null,"topics":["aws","ci-cd-pipeline","devops","docker","ecr","front-end","react","security-scan"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bel7phegor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-24T16:35:18.000Z","updated_at":"2026-05-30T18:38:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Bel7phegor/shopnow-frontend","commit_stats":null,"previous_names":["bel7phegor/shopnow-frontend"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Bel7phegor/shopnow-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bel7phegor%2Fshopnow-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bel7phegor%2Fshopnow-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bel7phegor%2Fshopnow-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bel7phegor%2Fshopnow-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bel7phegor","download_url":"https://codeload.github.com/Bel7phegor/shopnow-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bel7phegor%2Fshopnow-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33748607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","ci-cd-pipeline","devops","docker","ecr","front-end","react","security-scan"],"created_at":"2026-05-31T21:00:49.012Z","updated_at":"2026-05-31T21:00:54.258Z","avatar_url":"https://github.com/Bel7phegor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ShopNow Frontend: React E-Commerce with AWS Infrastructure \u0026 DevSecOps Pipeline\n\nReact-based e-commerce frontend deployed on AWS with enterprise-grade CI/CD automation, Docker containerization, and comprehensive security scanning across multi-cloud environments.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of Contents\u003c/strong\u003e\u003c/summary\u003e\n\n- [ShopNow Frontend: React E-Commerce with AWS Infrastructure \\\u0026 DevSecOps Pipeline](#shopnow-frontend-react-e-commerce-with-aws-infrastructure--devsecops-pipeline)\n  - [1. System Architecture \\\u0026 Network Topology](#1-system-architecture--network-topology)\n    - [Security Groups Configuration (Traffic Matrix)](#security-groups-configuration-traffic-matrix)\n  - [2. Multi-Environment Infrastructure Strategy](#2-multi-environment-infrastructure-strategy)\n    - [Environment Cross-Reference Matrix](#environment-cross-reference-matrix)\n  - [3. Build Management \\\u0026 Containerization](#3-build-management--containerization)\n  - [4. DevSecOps CI/CD Pipelines](#4-devsecops-cicd-pipelines)\n    - [4.1. Pipeline Flow Chart](#41-pipeline-flow-chart)\n    - [4.2. Workflow Lifecycles](#42-workflow-lifecycles)\n      - [A. Development Pipeline (`ci-dev.yml`)](#a-development-pipeline-ci-devyml)\n      - [B. Production Pipeline (`ci-prod.yml`)](#b-production-pipeline-ci-prodyml)\n    - [4.3. Advanced Kubernetes Templating with Helm](#43-advanced-kubernetes-templating-with-helm)\n  - [5. Tech Stack Matrix](#5-tech-stack-matrix)\n  - [6. Compliance \\\u0026 Implementation Evidence](#6-compliance--implementation-evidence)\n    - [6.1. CI/CD Pipeline Automation (Pipeline Execution)](#61-cicd-pipeline-automation-pipeline-execution)\n    - [6.2. System Traffic Routing Configuration (Traffic Routing)](#62-system-traffic-routing-configuration-traffic-routing)\n    - [6.3. Multi-Environment Log Management (CloudWatch Logs)](#63-multi-environment-log-management-cloudwatch-logs)\n    - [6.4. Container Image Storage (Private Registry)](#64-container-image-storage-private-registry)\n    - [6.5. Application User Interface \\\u0026 SSL Security (User Interface \\\u0026 HTTPS)](#65-application-user-interface--ssl-security-user-interface--https)\n    - [6.6. Comprehensive Security Scan Reports](#66-comprehensive-security-scan-reports)\n  - [7. Contact \\\u0026 Project Context](#7-contact--project-context)\n\n\u003c/details\u003e\n\n---\n\n## 1. System Architecture \u0026 Network Topology\n\nThe frontend architecture is designed with strict separation of concerns, high availability, and network isolation using Terraform IaC.\n\n* **Compute Layer:** Containerized React SPA deployed on **AWS EKS (Kubernetes)** for Production (multi-pod auto-scaling) and **AWS EC2 ASG** for Development.\n* **Traffic Routing:** Internal and external traffic managed via AWS Load Balancer Controller (ALB) terminating HTTPS via AWS Certificate Manager (ACM).\n* **Network Isolation (Private/Public Subnets):**\n  * *Public Subnets:* Only the Bastion Host (SSH Jump Server) is exposed to the internet.\n  * *Private Subnets:* EKS Cluster, Worker Nodes, and self-hosted GitHub Actions Runners communicate entirely inside private subnets, routing outbound traffic via NAT Gateways.\n\n### Security Groups Configuration (Traffic Matrix)\n* **EKS Control Plane:** Ingress HTTPS (443) allowed only from Worker Nodes and Bastion Host.\n* **EKS Worker Nodes:** Ingress HTTP/HTTPS (80/443) allowed from ALB; Node-to-Node communication unrestricted.\n* **Bastion EC2:** Ingress SSH (22) restricted to corporate VPC CIDR (`10.0.0.0/16`).\n* **Frontend Dev Runner:** Ingress SSH (22) from Bastion only. Outbound allowed to ECR, GitHub API, and Backend Runner (Port 5214).\n\n---\n\n## 2. Multi-Environment Infrastructure Strategy\n\nAll infrastructure is provisioned via Terraform as Code in [Bel7phegor/shopnow-infa](https://github.com/Bel7phegor/shopnow-infa). \n\n### Environment Cross-Reference Matrix\n\n| Technical Aspect | Development Environment (`develop`) | Production Environment (`v*` Tags / `release`) |\n| :--- | :--- | :--- |\n| **Target Infrastructure** | AWS EC2 + Auto Scaling Group | AWS EKS (Kubernetes Cluster) |\n| **Application Domain URL**| `https://shopnow-dev.anphuc.site` | `https://shopnow.anphuc.site` |\n| **Backend API Endpoint** | `https://api-dev.anphuc.site` | `https://api-shopnow.anphuc.site` |\n| **Trigger Mechanism** | Automatic on every `push` | Manual approval triggered via Git tags |\n| **Docker Image Tagging** | `dev_${COMMIT_SHA}` | `${VERSION}_${COMMIT_SHA}` + `latest` |\n| **NAT Gateway Strategy** | Single NAT (Cost-Optimized) | Multi-AZ NAT Gateways (High-Availability) |\n| **Deployment Strategy** | Container replacement on EC2 | Zero-Downtime Rolling Update (K8s Ingress) |\n| **Log Management** | CloudWatch Group: `/ec2/shopnow-frontend` | CloudWatch Group: `/prod/shopnow-frontend` |\n| **Security Gates** | Lightweight (Snyk + Trivy FS) | Comprehensive (SAST + Container + DAST) |\n\n---\n\n## 3. Build Management \u0026 Containerization\n\nA multi-stage Dockerfile is utilized to optimize image size, ensuring that development dependencies are excluded from the final lightweight production image (~20MB).\n\n```dockerfile\n# Stage 1: Build Environment\nFROM node:18-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm install\nCOPY . .\nARG REACT_APP_BASE_API_URL\nENV REACT_APP_BASE_API_URL=$REACT_APP_BASE_API_URL\nRUN npm run build\n\n# Stage 2: Optimized Nginx Production Runtime\nFROM nginx:alpine\nCOPY --from=builder /app/build /usr/share/nginx/html\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n* **Image Registry:** Private AWS Elastic Container Registry (ECR), integrated with secure OpenID Connect (OIDC) IAM Roles (no static AWS hardcoded credentials).\n\n---\n\n## 4. DevSecOps CI/CD Pipelines\n\nThe pipelines utilize a **Shift-Left Security** approach, embedding automated vulnerability assessment gates before and after code changes hit production.\n\n### 4.1. Pipeline Flow Chart\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/DevSevOps-Flow.png\" width=\"650\" alt=\"DevSecOps Workflow Architecture\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eEnd-to-End DevSecOps Workflow Architecture Modeling\u003c/em\u003e\n\u003c/div\u003e\n\n### 4.2. Workflow Lifecycles\n\n#### A. Development Pipeline [(`ci-dev.yml`)](https://github.com/Bel7phegor/shopnow-frontend/actions/workflows/ci-dev.yml)\n1. **Trigger:** Code push to `develop` branch.\n2. **Execution:** Self-hosted EC2 runner pulls code → Builds Docker Image with Dev API configuration → Pushes to ECR → Deploys directly to EC2 via `docker run` with CloudWatch logs logging driver enabled.\n\n#### B. Production Pipeline [(`ci-prod.yml`)](https://github.com/Bel7phegor/shopnow-frontend/actions/workflows/ci-prod.yml)\n1. **Trigger:** Git version tag creation (`v*`).\n2. **Build Stage:** Builds production-optimized Docker image.\n3. **Security Gate (Parallel Execution):**\n   * **Snyk Code Scan:** Analyzes `package.json` for flawed third-party npm libraries.\n   * **Trivy FS Scan:** Scans repository filesystem for hardcoded secrets/API keys.\n   * **Trivy Image Scan:** Deep scans OS layers within the Docker container for known CVEs.\n4. **Orchestrated Deploy:** Requires successful scan results. Executes Helm upgrade / `kubectl apply` on EKS cluster with atomic rollbacks.\n5. **Post-Deploy DAST (Parallel Execution):**\n   * **OWASP ZAP Scan:** Validates OWASP Top 10 compliance on the live URL.\n   * **Arachni Penetration Testing:** Executes dynamic security testing across subdomains.\n\n\n### 4.3. Advanced Kubernetes Templating with Helm\nTo maintain high reusability and clean infrastructure-as-code blueprints across separate environments, the Kubernetes manifests for this application are fully parameterized via the global [Bel7phegor/templates-helm-k8s](https://github.com/Bel7phegor/templates-helm-k8s) centralized repository.\n\n* **Centralized Logic:** Instead of hardcoding YAML manifests per repository, a reusable Helm base template governs deployments, multi-AZ ingress routing, cluster IP allocations, and Horizontal Pod Autoscalers (HPA).\n* **Decoupled Values Configuration:** The `values.yaml` inside the `shopnow-helm` subsystem overrides this master layout, injecting target variables unique to the production or staging boundaries during the execution of `helm upgrade --install`.\n## 5. Tech Stack Matrix\n\n| Layer | Technologies \u0026 Tools |\n| :--- | :--- |\n| **Frontend Engine** | React 18.2 (Hooks, SPA Architecture), Redux \u0026 Redux-Thunk, React Router v6, Axios, Bootstrap 5, Material-UI |\n| **Cloud Infrastructure** | AWS (EKS, EC2, VPC, Route 53, CloudWatch, ACM, IAM OIDC), Terraform IaC |\n| **Deployment \u0026 Orchestration** | Docker (Multi-stage Build), Helm Charts, GitHub Actions Pipelines |\n| **DevSecOps Scanners** | Snyk (SAST), Aqua Trivy (FS \u0026 Container Scan), OWASP ZAP (DAST), Arachni Framework |\n\n---\n\n## 6. Compliance \u0026 Implementation Evidence\n\nThe technical evidence below logs the actual operation, deployment metrics, and security assessment results of the Frontend component running on AWS.\n\n### 6.1. CI/CD Pipeline Automation (Pipeline Execution)\n\n**Live Workflows Tracker:** Check [GitHub Actions Production Workflow](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26713547479) Runs for real-time compliance validation.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/pipeline-success.png\" width=\"650\" alt=\"GitHub Actions Pipeline Success Status\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eGitHub Actions automated execution of the end-to-end Build, Test, and Deploy workflow\u003c/em\u003e\n\u003c/div\u003e \u003cbr\u003e\n\n**Technical Description:** The pipeline workflow is triggered automatically following a Shift-Left security architecture. All package assembly phases and parallel security validation gates display a successful \"Passed\" status before completing the final infrastructure update.\n\n### 6.2. System Traffic Routing Configuration (Traffic Routing)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/alb-routing.png\" width=\"650\" alt=\"AWS Application Load Balancer Path Routing\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eTarget Group routing and health status configuration mapping on AWS Application Load Balancer\u003c/em\u003e\n\u003c/div\u003e \u003cbr\u003e\n\n**Technical Description:** Inbound client traffic is captured and filtered through the AWS Application Load Balancer (ALB). The ALB executes Host-based and Path-based routing rules to direct, isolate, and optimize traffic load across active production pods and target services.\n\n### 6.3. Multi-Environment Log Management (CloudWatch Logs)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/cloudwatch-logs.png\" width=\"650\" alt=\"AWS CloudWatch Multi-Environment Logging Group\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eIsolated centralized streams on AWS CloudWatch logs for Development and Production environments\u003c/em\u003e\n\u003c/div\u003e \u003cbr\u003e\n\n**Technical Description:** Application runtime telemetry is bifurcated into environment-specific log groups (`/ec2/shopnow-frontend` for Dev container execution and `/prod/shopnow-frontend` via AWS FluentBit for containerised EKS workloads). This preserves operational isolation, log structural immutability, and simplifies audit forensic tracking.\n\n### 6.4. Container Image Storage (Private Registry)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/ecr-registry.png\" width=\"650\" alt=\"AWS Elastic Container Registry Private Repository\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eSecure hosting environment via AWS Elastic Container Registry (ECR) Private Repository\u003c/em\u003e\n\u003c/div\u003e \u003cbr\u003e\n\n**Technical Description:** Immutable release artifacts (Docker container images) are pushed directly into the secure AWS ECR Private Registry using short-lived IAM OIDC Token authentication, entirely mitigating the leakage risk of static AWS credentials.\n\n### 6.5. Application User Interface \u0026 SSL Security (User Interface \u0026 HTTPS)\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"img/website-ssl.png\" width=\"650\" alt=\"ShopNow Frontend Interface with Valid SSL Certificate\"\u003e\n  \u003cbr\u003e\n  \u003cem\u003eLive Client Interface running securely over an encrypted HTTPS connection\u003c/em\u003e\n\u003c/div\u003e \u003cbr\u003e\n\n**Technical Description:** The user-facing single page application runs stably on its designated custom domain. Transport Layer Security (TLS/SSL) is actively enforced via certificates provisioned and auto-renewed by AWS Certificate Manager (ACM) to preserve end-to-end data integrity.\n\n### 6.6. Comprehensive Security Scan Reports\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/Aranchi-scan-website.png\" alt=\"Aranchi scan website\" width=\"350\"\u003e\n  \u003cimg src=\"img/Snyk-scan-code.png\" alt=\"CI/CD Pipeline Status\" width=\"350\"\u003e\n  \u003cimg src=\"img/ZAP-scan-website.png\" alt=\"CI/CD Pipeline Status\" width=\"350\"\u003e\n\u003c/p\u003e \n\nDetailed compliance scanning data is automatically exported into readable HTML formats, serving as strict Quality Control gates for system audits:\n\n| Assessment Domain | Scanner Tool | Live Artifact / Workflow Run Link |\n| :--- | :--- | :--- |\n| **Third-Party Dependencies** | Snyk SAST | [Snyk Scan Report Artifact](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26721740846/artifacts/7319313847) |\n| **Repository Secret Leakage**| Trivy FS | [Trivy Filesystem Report](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26721740846/artifacts/7319309333) |\n| **Container OS Vulnerabilities**| Trivy Image | [Trivy Container Layer Report](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26721740846/artifacts/7319327430) |\n| **Web Application Security** | OWASP ZAP | [ZAP Dynamic Baseline Report](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26721740846/artifacts/7319340250) |\n| **Dynamic Penetration Test** | Arachni | [Arachni Dynamic Scan ZIP Archive](https://github.com/Bel7phegor/shopnow-frontend/actions/runs/26721740846/artifacts/7319341287) |\n\n---\n\n## 7. Contact \u0026 Project Context\n\n**Author:** Nguyễn An Phúc (Bel7phegor)\n* **Profiles:** [LinkedIn: nguyen-an-phuc](https://www.linkedin.com/in/nguyen-an-phuc) | [GitHub: Bel7phegor](https://github.com/Bel7phegor) | [Portfolio: anphuc.site](https://anphuc.site)\n* **Email:** [nguyenanphuc12032002@gmail.com](mailto:nguyenanphuc12032002@gmail.com)\n\n**E-Commerce Project Subsystems:**\n* **Frontend React:** [Bel7phegor/shopnow-frontend](https://github.com/Bel7phegor/shopnow-frontend)\n* **Backend Java microsevices:** [Bel7phegor/shopnow-backend](https://github.com/Bel7phegor/shopnow-backend)\n* **Terraform Cloud Automation Infrastructure:** [Bel7phegor/shopnow-infa](https://github.com/Bel7phegor/shopnow-infa)\n* **Kubernetes Helm Templates:** [Bel7phegor/shopnow-helm](https://github.com/Bel7phegor/shopnow-helm)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbel7phegor%2Fshopnow-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbel7phegor%2Fshopnow-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbel7phegor%2Fshopnow-frontend/lists"}