Executive Overview
The D-Talk Ecosystem is a full-stack, cloud-native web application encompassing a modern, high-performance frontend canvas/dashboard and a robust Java Spring Boot backend. The system provides secure and highly scalable services backed by an optimized PostgreSQL database.
This case study details the system's architectural evolution, highlighting my strategic interventions to refactor and optimize the backend foundation, my end-to-end design and implementation of the Next.js frontend, and my complete ownership of the Azure cloud infrastructure and CI/CD pipelines.
Ecosystem Landing PageHold to scroll
About Platform
Ecosystem Services
AI Machine Learning Features
Authentication App Flow
Achievement Summary
- Architected and provisioned an enterprise-grade cloud environment on Azure using Terraform, establishing secure, multi-environment deployments (staging/prod).
- Built robust zero-downtime CI/CD pipelines using GitHub Actions, decreasing time-to-market and enforcing Trivy security scanning on all container builds.
- Engineered a highly complex, Next.js 15 frontend from scratch, featuring interactive Konva.js canvas manipulations, Zustand state management, and optimistic UI updates via React Query.
- Optimized a legacy Java Spring Boot backend, significantly increasing max throughput and resilience by implementing PgBouncer, JCache caching layers, and ULID indexing.
- Modernized application security by stripping legacy auth and implementing a secure, stateless OAuth2 (Google) + JWT authentication flow mechanism integrated with Azure Key Vault.
System Architecture
The application follows a decoupled client-server architecture deployed on Azure, optimizing for clear separation of concerns and independent scaling vectors.
Backend (API Layer)
A Java 17 / Spring Boot 3.1.4 application exposing RESTful endpoints. It leverages Spring WebFlux, Spring Data JPA, and Hibernate, utilizing MapStruct for fast DTO mapping and Azure Storage Blob for asset management.
Frontend (Presentation Layer)
A Next.js 15 (React 19) SPA/SSR hybrid application. It features a rich, interactive UI built with Tailwind CSS, Shadcn UI, Framer Motion, and complex canvas manipulations powered by Fabric.js and React Konva.
Data Tier
Azure Database for PostgreSQL Flexible Server, optimized for high throughput with connection pooling via PgBouncer to prevent starvation.
Cloud Infrastructure
Fully managed Azure environment using Azure Container Apps for serverless compute, Azure Key Vault for secret management, and Azure Storage for persistence.
Backend & Database
Original Foundation (Inherited)
• Initial Spring Boot project scaffolding and basic REST controller definitions.
• Baseline business logic and domain entity mapping (Hibernate).
Database & Optimization Strategy
Upon inheriting the backend, database connection exhaustion and sub-optimal query execution were identified as potential bottlenecks for scalability. I implemented the following critical optimizations:
PgBouncer Implementation
Configured PgBouncer directly on Azure PostgreSQL Flexible Server pgbouncer.enabled = on. This acts as a lightweight connection pooler, drastically reducing connection overhead and improving throughput during traffic spikes.
JCache Caching Layer
Integrated Hibernate JCache backed by Ehcache to reduce repetitive database hits for frequently accessed, strictly-read data, bypassing the database entirely for high-frequency queries.
ULID Adoption
Replaced standard random UUIDs with ULIDs (Universally Unique Lexicographically Sortable Identifiers) for database primary keys. This dramatically improves B-tree indexing performance and reduces page fragmentation in PostgreSQL inserts.
Frontend Engineering
Core Framework
Leveraged Next.js 15 and React 19 App Router paradigms for optimized SSR and client-side routing.
State Management
Utilized zustand for lightweight global state, paired with TanStack React Query for aggressive data caching, background refetching, and optimistic UI updates.
Interactive UI/UX
Polished interfaces using Tailwind CSS and Radix-based Shadcn UI primitives. Integrated Framer Motion for fluid micro-animations and Embla Carousel.
Complex Graphical Canvas
Engineered robust client-side graphical intersections using Fabric.js and React-Konva, enabling users to manipulate rich visual elements directly in the browser for product customization.
Security & Auth Overhaul
The legacy system lacked a secure authentication flow. I orchestrated a complete security overhaul to establish a stateless, frictionless protocol.
OAuth2 Integration
Integrated spring-boot-starter-oauth2-client for Google authentication, implementing custom success handlers to bridge the external OAuth2 flow into internal session state securely.
Stateless JWTs
Following successful auth, the backend generates cryptographically signed JWTs using jjwt. This ensures the API remains strictly stateless, facilitating effortless horizontal scaling.
Key Vault SecOps
Managed all sensitive infrastructure data (DB credentials, OAuth secrets) strictly via Azure Key Vault, retrieved dynamically during the Terraform deployment phase to prevent secret leakage.
Infrastructure & DevOps
Designed a professional-grade, cloud-native DevOps workflow adhering strictly to "Infrastructure as Code" principles, built entirely from scratch.
Terraform (IaC)
Modularized configurations to provision identical staging and prod environments deterministically. Terraform state is securely locked and stored in Azure Blob Storage.
Azure Container Apps (Serverless K8s)
Deployed the Spring Boot API to Container Apps for serverless autoscaling. Containers scale elastically between 2 and 10 replicas strictly based on HTTP traffic volume metrics, bypassing the operational mass of manual K8s administration.
GitHub Actions CI/CD Pipelines
Continuous Integration (Build & Scan)
Triggers on PRs/Merges. Compiles Java/Maven, runs Trivy vulnerability scans on the Docker image, and pushes the immutable artifact tagged with the exact Git SHA to Docker Hub.
Continuous Deployment (Zero-Downtime)
Automates deployment to Azure by dynamically injecting the new Docker tag into Terraform variables and executing terraform apply safely. Includes automated health-check polling against Spring Actuator /api/v1/actuator/health to verify rollout success before marking pipeline green.
Decisions & Trade-offs
Azure Container Apps vs. AKS
Decided against Kubernetes Service (AKS) to eliminate operational cluster overhead. ACA provided the exact serverless scaling required for the stateless Spring API without the massive maintenance burden.
PgBouncer vs. HikariCP App-Pooling
While Hikari is used internally, utilizing PgBouncer at the infrastructural tier ensures that as the application scales out to 10+ replicas, the total physical connections hitting PostgreSQL remain strictly bounded and predictable.
Next.js 15 App Router RSC
Adopted Next.js heavy reliance on React Server Components (RSC) to minimize the final JS bundle shipped to the client, accepting the steeper learning curve in exchange for superior Core Web Vitals.