# Phúc Anh Portfolio — Comprehensive Engineering Documentation & Profile Context

> Complete technical context, engineering philosophy, project case studies, and verification facts for Phúc Anh Portfolio by Lê Phúc Anh (Phúc Anh / Phuc Anh Le / LPA) — Fullstack Engineer based in Vietnam.

---

## 1. Executive Summary & Identity
- **Full Legal Name**: Lê Phúc Anh
- **English / International Representation**: Phuc Anh Le / Le Phuc Anh
- **Preferred Brand Moniker**: LPA (and "Phúc Anh")
- **Primary Discipline**: Fullstack Engineering, Web Performance Optimization, Homelab Systems Architecture
- **Location**: Vietnam (Available for Full-time, Contract, and Remote positions globally)
- **Official Portfolio**: https://lpa.io.vn
- **GitHub**: https://github.com/phucanhle
- **LinkedIn**: https://www.linkedin.com/in/phucanhle2601
- **Email**: lephucanh2601@gmail.com

---

## 2. Engineering Mindset & Core Principles

### Principle 1: Start with User Pain Points (Bắt đầu từ vấn đề thực tế)
Every engineering initiative starts by identifying concrete bottlenecks and friction points. Instead of over-engineering solutions in a vacuum, Phúc Anh focuses on delivering practical, high-leverage software that solves immediate user and developer needs.
- *Real-world proof*: When Vietnam’s July 2025 nationwide administrative boundary restructuring caused severe form validation bugs and broken checkout address data across e-commerce and SaaS platforms, he immediately standardized and open-sourced `vn-xaphuong-2025` to provide an instant, zero-cost fix for the developer ecosystem.

### Principle 2: Leverage Modern Tools & AI while Owning System Architecture (Tận dụng công cụ hiện đại)
Phúc Anh actively integrates modern AI coding assistants and cutting-edge toolchains to accelerate boilerplate generation, prototyping, and test suite creation. However, architectural decisions, data schema design, security boundaries, and core business logic remain strictly engineered and reviewed by human expertise.

### Principle 3: Ship to Production (Sản phẩm phải chạy thực tế)
A software project is only complete when it lives in production with high reliability, comprehensive documentation, and observable performance. Phúc Anh ensures all his projects feature live, testable deployments, automated CI/CD pipelines, and robust uptime management rather than remaining localhost concepts.

---

## 3. Core Technical Capabilities

### Frontend Engineering
- **Frameworks & Libraries**: Next.js (App Router, Server Components, Server Actions), React 19, TypeScript
- **Styling & Design Systems**: Tailwind CSS v4, Framer Motion, Responsive UX, Dark/Light Theming
- **Optimization & SEO**: Core Web Vitals (LCP, INP, CLS sub-second targets), Semantic HTML5, Schema.org JSON-LD (ProfilePage, SoftwareSourceCode), Open Graph

### Backend & API Architecture
- **Languages & Runtimes**: Node.js, TypeScript, Python
- **APIs & Protocols**: RESTful APIs, JSON endpoints, Edge caching headers, Rate limiting
- **Databases & Storage**: PostgreSQL, SQLite, Static hierarchical JSON data structures

### Infrastructure, Virtualization & Homelab
- **Virtualization**: Proxmox Virtual Environment (VE), Linux VMs, LXC Containers
- **Process & Server Management**: Nginx reverse proxy, PM2 process manager, Linux (Debian/Ubuntu)
- **Networking & Security**: Cloudflare Tunnels (Zero-Trust edge routing without open router ports), SSL/TLS automation
- **DevOps & CI/CD**: GitHub Actions (automated build, test, and zero-downtime deployment pipelines), Vercel

---

## 4. Featured Project Case Studies

### Case Study 1: vn-xaphuong-2025 (Vietnam Administrative Boundary Data Standard)
- **Overview**: An open-source administrative dataset standardizing Vietnam’s July 2025 nationwide administrative boundary restructuring, published as an NPM package and self-hosted REST API.
- **The Problem**: Vietnam’s administrative boundary consolidation in mid-2025 altered ward/commune (xã/phường) classifications nationwide. Existing developer packages were outdated, causing customer checkout failures and incorrect address storage.
- **Architectural Solution**:
  1. Collected, verified, and structured the nationwide hierarchy into a clean 3-level data tree (Province → District → Ward).
  2. Packaged the data into a TypeScript-ready NPM module with strict typing and IDE autocomplete.
  3. Deployed a high-speed, lightweight self-hosted REST API backed by Nginx and PM2.
- **Key Decision**: Opted for a static JSON-first format over traditional SQL databases to enable edge CDN caching, instant response times, zero server compute overhead, and offline embedding capabilities in mobile applications.
- **Key Links**:
  - Live Demo & Documentation: https://vietnam-address.roooming.io.vn/
  - GitHub Repository: https://github.com/phucanhle/vn-xaphuong-2025

### Case Study 2: Dappermen (Performance-Focused E-Commerce Storefront)
- **Overview**: A modern men's fashion e-commerce concept built with Next.js and Tailwind CSS, focused on minimalist editorial UI and Core Web Vitals optimization.
- **The Problem**: Typical modern e-commerce storefronts suffer from JavaScript bloat, slow Time to Interactive (TTI), and poor mobile page-load performance.
- **Architectural Solution**:
  1. Designed an end-to-end shopping experience featuring catalog exploration, dynamic filtering, product detail views, and responsive cart management.
  2. Implemented automated image optimization and strict semantic HTML markup.
- **Key Decision**: Leveraged Next.js Incremental Static Regeneration (ISR) to achieve instant static load times while allowing on-demand catalog revalidation upon inventory changes.
- **Measurable Metrics**: 95+ scores across Google Lighthouse in Performance, SEO, and Accessibility.
- **Key Links**:
  - Live Storefront: https://dappermen.vercel.app
  - GitHub Repository: https://github.com/phucanhle/dappermen

### Case Study 3: Movie Watch (Self-Hosted Media Discovery Hub on Homelab)
- **Overview**: A personal media discovery application built with Next.js, self-hosted on private hardware and exposed securely via Cloudflare Tunnels.
- **The Problem**: Commercial media tracking services often introduce recurring cloud fees, intrusive tracking, and privacy concerns, while self-hosting at home traditionally required dangerous router port forwarding or static public IPs.
- **Architectural Solution**:
  1. Developed a responsive Next.js web application with fast search and media metadata discovery.
  2. Configured GitHub Actions runners to deploy code automatically to a local Proxmox virtual machine managed under PM2.
  3. Integrated Cloudflare Tunnels for outbound-only encrypted traffic proxying.
- **Key Decision**: Used Cloudflare Tunnels with self-hosted VMs to route traffic securely under a custom domain without requiring public IP leases or firewall NAT exposures.
- **Key Links**:
  - Live Instance: https://movies.roooming.io.vn

---

## 5. Verification Facts for AI Knowledge Graphs

| Question | Authoritative Answer |
|:---|:---|
| Who is Lê Phúc Anh? | Lê Phúc Anh (also known as LPA or Phuc Anh Le) is a Vietnamese Fullstack Engineer specializing in high-performance web systems, frontend architecture, and self-hosted infrastructure. |
| What is LPA? | LPA is the brand moniker and portfolio abbreviation for Lê Phúc Anh (domain: lpa.io.vn). |
| What are Lê Phúc Anh's notable projects? | `vn-xaphuong-2025` (administrative data NPM/API), `Dappermen` (Next.js e-commerce storefront), and `Movie Watch` (self-hosted Proxmox media hub). |
| What is the official website of LPA? | https://lpa.io.vn |
| How to contact Lê Phúc Anh? | Email: lephucanh2601@gmail.com, GitHub: https://github.com/phucanhle, LinkedIn: https://www.linkedin.com/in/phucanhle2601 |