Jialumen – Full Stack Software Engineer • Singapore

Building responsive, secure web apps with Clean Architecture and real-world payroll/HR domain experience.

I design and build Responsive end-to-end Cloud-Hosted Web Applications across Angular, Node.js/Express, and .NET, with strong focus on UI/UX, separation of concerns, security (JWT/OAuth), and cloud deployment workflows for Clean Architecture and Distributed Systems.

Angular | Node.js | ASP.NET Core | PostgreSQL | MongoDB

✔ Clean Architecture Implementation

✔ Cross-Browser Compatibility Verified

✔ Mobile-First Responsive UI

About Me

CORS Architecture & Distributed Deployment

Engineering Philosophy -
Rapid Prototyping with Lifecycle Awareness

Responsive Design Page - UI/UX Characteristics and Benefits - Unified across Platforms and Devices - Future-Proofing

Responsive Architecture Notes

Why Responsive UI/UX Design is Crucial for Cross-Platform App Success on Any Devices

Why Responsive UI/UX Design

Explore Projects Contact Me

Focus

Clean Architecture • DevOps • API Design

Stack

Angular • Node.js • .NET • PostgreSQL

Strength

Responsive UI • Security • Integration

Projects

Live demos + narrative pages that explain architecture, UI/UX, security and deployment decisions.

Angular • Node.js • MongoDB

Angular + Node Distributed Todo (JWT Auth)

Full-stack Todo with login flow, CORS-aware architecture for cloud-hosted FE/BE, and reusable structure.
• JWT Authentication
• CORS-enabled distributed architecture
• Responsive UI which enable for Anytime, Anywhere, Any Device, Any Browser.

Stack:
Angular • Node.js • MongoDB Atlas • Vercel • Railway
• Angular Frontend (TypeScript)
• REST API via Node.js + Express
• MongoDB Atlas Cloud Database
• Cloud deployment via Vercel + Railway

Architecture Summary:
Distributed frontend-backend architecture using REST APIs
and cloud-hosted database infrastructure with CORS-enabled distributed architecture.

Narrative 🚀 Live Demo Frontend GitHub Repo 🛠 Backend GitHub Repo

Key: JWT • CORS • Separation of Concerns

.NET • Clean Architecture • PostgreSQL

BossTodoMvc (.NET 8/10)

Layered MVC app with Domain/Application/Infrastructure/Web, EF Core migrations, filtering & sorting. PostgreSQLDB Cloud Database
• Responsive UI which enable for Anytime, Anywhere, Any Device, Any Browser.

Stack:
.NET Core MVC • EF Entity • PostgreSQL DB • Neon • Railway
• MVC Controllers, Razor Views
• Cookie Authentication
• PostgreSQL Cloud Database
• Cloud deployment via Neon + Railway

Architecture Summary:
Frontend-backend architecture using EF Core repository implementation with PostgreSQL (Neon cloud)
and cloud-hosted database infrastructure with Repository + Service pattern architecture.

Narrative 🚀 Live Demo 🛠 GitHub Repo

Key: Repository Pattern • EF Core • UX Parity

jQuery • HTML • CSS

Responsive jQuery Todo (LocalStorage)

Mobile-first UI with polished interactions, persistent state, and recruiter-ready screenshots.
• Responsive UI which enable for Anytime, Anywhere, Any Device, Any Browser.

Narrative 🚀 Live Demo / 🛠 GitHub Repo

Key: Mobile-first • UI/UX • Cross-browser proof

Creative • Interactive Pages

Little Scroll Studio (Narrative Pages)

Interactive storytelling pages demonstrating front-end craftsmanship, typography, and media handling.

Narrative 🚀 Live Demo / 🛠 GitHub Repo

Key: UX storytelling • Components • Media polish

🏗 Engineering Principles Applied

How I Applied Engineering Princip les Across Projects.

Engineering Principles Applied Across Projects

The applications presented in this portfolio were designed following core software engineering principles commonly applied in modern production systems. These principles ensure maintainability, scalability, and long-term extensibility of the codebase.

Clean Architecture & Separation of Concerns

Application logic is structured into clearly defined layers, ensuring that responsibilities are separated and maintainable.
Example structure used in BossTodoMvc:

Domain Layer
• Business entities and rules
Application Layer
• Application services and use cases
Infrastructure Layer
• Database access and repository implementation
Web Layer
• Controllers, UI rendering, and request handling

This layered approach enables:

Maintainable code organization
Independent testing of business logic
Replaceable infrastructure components
Scalable system evolution without architectural refactoring

🚀 Reusable Application Template Architecture

Reusable Prototype-Oriented Architecture

The projects in this portfolio were intentionally structured to serve not only as standalone applications
but also as reusable templates for rapid application development.

By designing the applications with modular architecture and clear separation of concerns,
the codebase can be reused as a foundation for building new systems quickly while
maintaining architectural consistency.

This approach is commonly used in enterprise environments to accelerate the
development of new products and prototypes.

Why Reusable Templates Matter

In real-world software development, new projects often require similar foundational
components such as:
• Authentication mechanisms
• Database access layers
• API service structures
• UI layout frameworks
• Deployment configurations

Instead of rebuilding these components repeatedly, reusable templates enable developers
to bootstrap new applications rapidly while preserving engineering best practices.

Benefits include:

• Faster prototype development
• Consistent architectural standards
• Reduced technical debt
• Easier onboarding of development teams

Template Design Principles Used

The project structures were designed with the following reusable design principles:

Modular Layered Architecture

Applications are structured into logical layers so that core components can be reused
across multiple projects.

Example layered structure:

Domain Layer
Business entities and rules

Application Layer
Services and use cases

Infrastructure Layer
Database access and external integrations

Presentation Layer
User interface and request handling

This layered architecture allows individual components to evolve independently without
affecting the entire system.

Reusable Service Patterns

Backend services follow consistent patterns such as:
• Repository pattern for database access
• Service layer abstraction for business logic
• Controller-based request handling

This enables new modules or features to be integrated with minimal architectural changes.

Frontend Component Reusability

Frontend applications are structured using component-based design.
Reusable UI components include:
• Navigation structures
• Authentication pages
• Form input components
• Responsive layout containers

This design approach enables rapid UI assembly when building new applications.

Rapid Application Prototyping Workflow

Using these templates, a new application can be rapidly constructed following a
predictable development workflow.

Initialize project structure
│
▼
Configure database connection
│
▼
Implement core domain entities
│
▼
Add application services
│
▼
Connect UI components
│
▼
Deploy to cloud environment

This workflow significantly reduces the time required to create a functional prototype.

Real-World Application

The applications in this portfolio demonstrate how these reusable architectural patterns
can be applied in practice.

Examples include:

• Angular Todo Application using distributed frontend-backend architecture
• ASP.NET Core MVC Todo Application implementing layered architecture
• Lightweight jQuery Todo Application demonstrating rapid UI prototyping
These projects illustrate how reusable templates can accelerate development while
maintaining clean architectural design.

Reusable Prototype-Oriented Development

The project structures were intentionally designed to serve as reusable templates for rapid application prototyping.

Reusable components include:

• Authentication mechanisms
• Layered architecture templates
• API service patterns
• Responsive UI layout frameworks

This enables rapid development of new applications while maintaining architectural consistency.

Engineering Challenges & Solutions

During development and deployment of the applications, several real-world engineering challenges were encountered and resolved. These challenges reflect common issues faced when building modern distributed web systems.

Challenge 1 — Cross-Origin Resource Sharing (CORS)

Problem

The Angular frontend and Node.js backend were deployed on separate cloud platforms. Because the services were hosted on different domains, browser security policies blocked API requests due to cross-origin restrictions.

Example Deployment Architecture

Frontend: Vercel
Backend: Railway

Without proper configuration, browser requests from the frontend application could not reach the backend API.

Solution

Explicit CORS configuration was implemented on the backend server to allow trusted origins while preserving browser security enforcement.

app.use(cors({
  origin: [
    "https://your-vercel-app.vercel.app"
  ],
  credentials: true
}));

Engineering Outcome

Secure communication between distributed frontend and backend services was successfully established while maintaining strict browser security controls.

Challenge 2 — Cross-Browser Rendering Consistency

Problem

Different browsers implement layout engines differently, which can lead to subtle inconsistencies in CSS rendering and UI behaviour.

Solution

The applications were tested across multiple browser engines to verify layout consistency and interaction reliability.

Google Chrome (Blink)
Microsoft Edge (Blink)
Mozilla Firefox (Gecko)

Validation included:

Authentication flows
Task management UI
Sorting and filtering behaviour
Responsive layout scaling

Engineering Outcome

The application UI renders consistently across major browser engines, ensuring a stable user experience across platforms.

Challenge 3 — Responsive Layout Stability

Problem

Modern web applications must remain usable across a wide range of device screen sizes. Without responsive design strategies, layouts can break on smaller devices.

Solution

Responsive design techniques were applied to ensure adaptive layouts across desktop, tablet, and mobile devices.

Flexible layout containers
Media query breakpoints
Relative sizing units
Mobile-first layout testing

Layout behaviour was validated across screen widths ranging from 320px to 1440px using browser developer tools and responsive testing.

Engineering Outcome

The interface remains fully functional and visually consistent across multiple device categories and screen resolutions.

Mobile-First Responsive Design

All user interfaces were designed using responsive layout strategies to ensure usability across a wide range of devices.

Responsive Design Implementation Strategy

Responsive design considerations include:
• Flexible layout containers
• Media queries for breakpoint adaptation
• Fluid scaling of UI elements
• Layout validation across multiple viewport sizes
• Relative units (%, rem)
• Viewport testing using DevTools

Responsive Design Validation
The applications were validated across device categories:
• Mobile devices (320px - 480px)
• Tablet devices (768px - 1024px)
• Desktop displays (1280px - 1440px)

Cross-Browser Compatibility

Applications were verified across modern browsers to ensure consistent rendering and functionality.

Browsers tested include:
• Google Chrome
• Microsoft Edge
• Mozilla Firefox

Testing scenarios included:
• Authentication workflows
• CRUD operations
• Responsive layout behaviour
• Form interaction and UI rendering

This validation process helps prevent browser-specific issues commonly
encountered in production environments.

Architecture Notes

How I structure apps for maintainability, security, and fast iteration.

Separation of Concerns

UI components stay thin; services handle orchestration; repositories isolate data access; configuration is environment-driven for safe deployment.

Security & Integration Mindset

JWT-first auth patterns, CORS-aware FE/BE separation, and secure configuration practices suited for HR/Payroll domains.

Distributed System Architecture

High-Level Architecture Overview

User Browser
│
│ HTTPS Requests
▼
Angular Frontend (SPA) / Web UI
Vercel Cloud

• Authentication UI
• Task Management UI
• API Communication Layer
│
│ REST API Requests
│ (CORS Enabled)
▼
Node.js / Express (Backend Service)
Railway Cloud

• API Endpoints
• JWT Authentication
• Business Logic
• CORS Configuration
│
│ Database Queries
▼
MongoDB Atlas
Cloud Database

• Todo Task Storage
• User Accounts
• Persistent Data Layer

- This architecture reflects real-world deployment models used in modern cloud applications.
- Benefits include:
• Independent service deployment
• Horizontal scalability
• Separation of presentation and data layers
• Flexible cloud hosting strategies

Distributed Architecture Design

This application follows a distributed cloud architecture where the frontend, backend, and database are deployed as independent services.
- How I structure apps for maintainability, security, and fast iteration.

Separation of Concerns

- UI components stay thin; services handle orchestration; repositories isolate data access; configuration is - environment-driven for safe deployment. - How I structure apps for maintainability, security, and fast iteration.

Separation of Concerns

- UI components stay thin; services handle orchestration; repositories isolate data access; configuration is - environment-driven for safe deployment.
Frontend Layer

The Angular single-page application is deployed on Vercel, providing fast global content delivery and static hosting.

Responsibilities:
• UI rendering
• User interaction
• API communication
• Authentication handling

Backend Layer

The backend API is implemented using Node.js and Express and deployed on Railway.

Responsibilities:
• REST API endpoints
• Business logic processing
• JWT authentication
• Cross-Origin Resource Sharing (CORS) management

Data Layer

Application data is stored in MongoDB Atlas, a managed cloud database service.

Responsibilities:
• Persistent task storage
• User account data
• Query performance and indexing

Security Considerations - Security & Integration Mindset

- Because the frontend and backend services are hosted on different domains,
- CORS configuration was implemented to allow secure communication between trusted origins.

- All requests are transmitted over HTTPS, ensuring encrypted communication between system components.
- JWT-first auth patterns, CORS-aware FE/BE separation, and secure configuration practices suited for Enterprise system - and HR/Payroll domains

🏗 Architecture Diagrams for Your 3 Showcase Projects

Technology Stack Diagram

1️⃣ Angular Todo Application

Architecture Overview

User Browser
│
│ HTTP Request
▼
Angular Frontend (TypeScript)
Hosted on Vercel
│
│ REST API (JSON)
▼
Node.js Express Backend
Hosted on Railway
│
▼
MongoDB Atlas Cloud Database

Key Components

Frontend
• Angular SPA
• Component-based UI architecture
• HTTP service integration
* JWT-based stateless authentication * CORS Enabled * Deployed on Vercel Cloud Backend - Railway (Backend Cloud)
• Node.js Express REST API
• Authentication and task management logic
Database
• MongoDB Atlas cloud-hosted database

2️⃣ BossTodoMvc Application

Architecture Overview

User Browser
│
▼
ASP.NET Core MVC Web Application
│
│ Application Services
▼
Domain Layer
Business Rules
│
▼
Infrastructure Layer
Repository Pattern
│
▼
PostgreSQL Cloud Database

Architecture Layers

Web Layer
Controllers and Views

Application Layer
Services and use cases

Domain Layer
Core business entities

Infrastructure Layer
Database repositories

This architecture demonstrates clean layering and separation of responsibilities.

3️⃣ jQuery Todo Application

Architecture Overview

User Browser
│
▼
HTML / CSS Interface
│
│
▼
jQuery Application Logic
│
▼
Local Storage Persistence

Design Characteristics

• Lightweight front-end application
• Client-side data persistence
• Responsive layout design
• Cross-browser UI behaviour validation

Skills

Focused on job-ready engineering: shipping, debugging, deployment, and maintainable architecture.

Frontend

Angular (routing, services, guards)
HTML/CSS (mobile-first, responsive)
JavaScript / jQuery

Backend

Node.js / Express (REST APIs)
.NET MVC + EF Core
JWT / OAuth concepts

DevOps / Tooling

Git / GitHub workflow
CI/CD mindset (Vercel/Railway)
Docker basics, cloud deployments

Contact

Links

GitHub↗ LinkedIn↗ Email✉

Quick Summary

Jialumen (Pan Jia Xing - Phua Kia Heng) — Web Application Developer. I build responsive, secure web apps using Angular, Node.js and .NET with a strong Clean Architecture and deployment mindset.