Ryan Su

Software Engineer specializing in mobile, backend, and cloud platforms. Built CoolLib - Library Management System, a distributed system combining native Android/iOS applications, Spring Boot microservices, Cloudflare edge infrastructure, real-time telemetry, and automated CI/CD delivery.

     

Architecture

 flowchart LR

                subgraph Clients ["`**Mobile Clients**`"]
                A(Android\nCompose)
                B(iOS\nSwiftUI)
                end

                subgraph CF1 ["`**Cloudflare Edge (Delivery)**`"]
                G1{CDN\nCache}
                R2[(R2\nStorage)]
                C{Tunnel}
                end

                subgraph CF2 ["`**Cloudflare Observability**`"]
                W(Telemetry\nGateway)
                D1[(Metrics\nStore)]
                AL(Alert\nEngine)
                MON(Analytics\nDashboard)
                end

                subgraph Docker ["`**Docker Infrastructure**`"]
                E("`**Spring<br>Boot**`")
                H[(Postgre\nSQL)]
                end

                subgraph External ["`**External Services**`"]
                N1(PagerDuty)
                end

                %% =========================
                %% FLOW
                %% =========================

                Clients e1@--> G1

                G1 -- "Static Assets" --> R2
                G1 -- "API Requests" --> C

                C e3@--> E
                E --> H

                %% Observability
                E e4@--> W
                Clients e2@-. Telemetry .-> W

                W --> D1
                D1 --> MON
                
                %% Alert Engine reads data from D1
                D1 --> AL

                %% Corrected Alert Flow: Trigger outputs & Update Dashboard
                AL --> N1
                AL --> MON

                %% Edge animations
                e1@{ animate: true }
                e2@{ animate: true }
                e3@{ animate: true }
                e4@{ animate: true }


                %% =========================
                %% CLIENT LAYER (brand light)
                %% =========================

                style A fill:#22c55e,stroke:#16a34a,stroke-width:2px,color:#fff
                style B fill:#0A84FF,stroke:#0066cc,stroke-width:2px,color:#fff


                %% =========================
                %% CLOUDFLARE LAYER (unified blue system)
                %% =========================

                style G1 fill:#3b82f6,stroke:#2563eb,stroke-width:2px,color:#fff
                style C fill:#3b82f6,stroke:#2563eb,stroke-width:2px,color:#fff
                style R2 fill:#60a5fa,stroke:#3b82f6,stroke-width:1px,color:#fff


                %% =========================
                %% OBSERVABILITY (unified blue system - AL deep indigo)
                %% =========================

                style W fill:#93c5fd,stroke:#3b82f6,stroke-width:2px,color:#fff
                style D1 fill:#bfdbfe,stroke:#60a5fa,stroke-width:1px,color:#fff
                style MON fill:#3b82f6,stroke:#2563eb,stroke-width:2px,color:#fff
                style AL fill:#1e40af,stroke:#1e3a8a,stroke-width:2px,color:#fff

                %% =========================
                %% BACKEND (unified gray system)
                %% =========================

                style E fill:#475569,stroke:#334155,stroke-width:2px,color:#fff
                style H fill:#334155,stroke:#334155,stroke-width:2px,color:#fff

                %% =========================
                %% EXTERNAL NOTIFICATIONS (Clean Light Blue / Translucent)
                %% =========================
                style N1 fill:#eff6ff,stroke:#60a5fa,stroke-width:1.5px,stroke-dasharray: 5 5,color:#1e40af

                style Clients fill:#f8fafc
                style CF1 fill:#f1f5f9
                style CF2 fill:#f8fafc
                style Docker fill:#f1f5f9
                style External fill:none,stroke:#cbd5e1,stroke-width:1px,stroke-dasharray: 3 3

                %% =========================
                %% LINKS
                %% =========================

                linkStyle default stroke:#94a3b8,stroke-width:1.5px

Loading

PLATFORM

DEVELOPMENT

INCIDENTS

Highlights

• Observability Platform – End-to-end telemetry collection, analytics, and alerting powered by Cloudflare Workers.
• Spring Telemetry Pipeline – Automated ingestion of application and infrastructure metrics from Spring Boot services.
• Real-Time Monitoring – Interactive dashboards, incident tracking, and PagerDuty integrations.
• Cloud-Native Infrastructure – Dockerized deployments, Nginx reverse proxy, and CI/CD automation.
• Cross-Platform Ecosystem – Android and iOS clients connected through a unified backend platform.

Stack

Mobile          Kotlin (Android) • Jetpack Compose • SwiftUI
Backend         Java 21 • Spring Boot 3 • PostgreSQL • Hibernate
Frontend        TypeScript • Astro • React
Edge Platform   Cloudflare Workers • D1 • R2
Infrastructure  Docker • Nginx • GitHub Actions
Observability   Micrometer • Spring Actuator • Telemetry • Alerting