Initializing Kernel...
System Ready

John Kenneth Balutan

Full Stack Web Developer

REACT / NEXT.JS
Memory Allocation
0%
Available for Hire

|

Full Stack Web DeveloperUX/UI Architect

Architecting scalable, high-performance web applications with modern technologies. From database design to pixel-perfect frontends, I build complete digital solutions that drive business growth.

View Projects Hire Me

15+

Projects

10+

Clients

100%

Success

John Kenneth Balutan
Full Stack Dev

3+

Years Exp.

Bridging the gap between
System Architecture & User Experience.

I am a Full Stack Web Developer who builds complete products from scratch from discovery and architecture to CI/CD, secure APIs, data modeling, and polished interfaces all the way to deployment and observability. I own the entire lifecycle with production-grade practices: performance tuning, accessibility, automated testing, and maintainable design systems.

I thrive in the complexity of the full stack. I understand how a database query impacts frontend performance, and how a UI interaction triggers backend microservices.

My mission is simple: To engineer robust digital solutions that are as beautiful as they are functional.

Frontend Engineering

React, Next.js, TypeScript, Tailwind, Three.js

Backend & DevOps

Node.js, PostgreSQL, AWS, Docker, CI/CD

developer.ts
1234567891011121314151617181920

class FullStackDeveloper extends Engineer {

constructor() {

super();

this.name = "John Kenneth";

this.role = "Full Stack Developer";

this.skills = [

|

];

}


dailyRoutine() {

while (true) {

this.code();

this.debug();

this.innovate();

}

}

}

Core Skills

Full‑Stack Expertise

Production-ready capabilities across frontend, backend, DevOps, and data engineering.

Frontend

React 18 / Next.js
TypeScript
Tailwind CSS v4
Framer Motion
Accessibility (WCAG)
Design Systems

Backend

Node.js / Express
REST / GraphQL
Auth & RBAC
Caching & Queues
Testing (Jest/Vitest)

Data

PostgreSQL
MongoDB
ORM (Prisma/Drizzle)
Migrations & Indexing
Analytics & Observability

DevOps

CI/CD Pipelines
Docker & Containers
Cloud (Vercel/AWS)
Performance & Monitoring
Security Best Practices

System Architecture

My development philosophy revolves around building secure, scalable, and high-performance systems. Here is how data flows through my applications.

Client-Side

Responsive React/Next.js UI

Secure Gateway

JWT Auth & API Rate Limiting

Server Logic

Node.js Microservices

Data Persistence

PostgreSQL & Redis Cache

server/api/pipeline.ts

async function handleRequest(req: Request) {

// 1. Validate & Authenticate

const user = await auth.verify(req);


// 2. Check Cache (Redis)

const cached = await redis.get(req.id);

if (cached) return cached;


// 3. Query Database (Postgres)

const data = await db.query("SELECT * FROM users WHERE...");


return response.json(data);

}

System Architecture

Scalable & Secure
Database Solutions

Designing robust data architectures that scale. I specialize in normalized relational schemas for transactional integrity and distributed NoSQL systems for high-velocity data processing.

  • Normalized PostgreSQL Schemas (3NF)
  • Redis Caching for < 1ms Latency
  • Type-Safe Prisma/Drizzle ORM
  • Sharding & Read-Replica Scaling
Users
Analytics
Orders
Redis

DevOps & CI/CD

Automated pipelines ensure code quality and rapid deployment. From local development to production in minutes.

Commit

Git Version Control

Build

Docker Containers

Test

Jest & Cypress

Deploy

AWS / Vercel

Security First

Enterprise-Grade Security

Security isn't an afterthought—it's baked into the architecture. I implement defense-in-depth strategies to protect user data and application integrity against modern threats.

JWT Authentication

Stateless, secure sessions

Role-Based Access

Granular permission control

Data Encryption

AES-256 at rest & in transit

OWASP Protection

XSS, CSRF, & Injection guards

My Tech Stack

A curated list of technologies I use to build scalable, high-performance applications.

React

Expert

Component-based UI library

TypeScript

Expert

Type-safe JavaScript development

Node.js

Expert

Scalable event-driven microservices

Express

Advanced

RESTful API & MVC architecture

PostgreSQL

Advanced

ACID compliant relational database

MySQL

Advanced

Relational database management system

Docker

Intermediate

Containerization & microservices

Git

Expert

Version control & CI/CD workflows

React

Expert

Component-based UI library

TypeScript

Expert

Type-safe JavaScript development

Node.js

Expert

Scalable event-driven microservices

Express

Advanced

RESTful API & MVC architecture

PostgreSQL

Advanced

ACID compliant relational database

MySQL

Advanced

Relational database management system

Docker

Intermediate

Containerization & microservices

Git

Expert

Version control & CI/CD workflows

Next.js

Expert

Production-grade React framework

Tailwind CSS

Expert

Utility-first CSS framework

PHP

Advanced

Server-side scripting & web development

GraphQL

Advanced

Apollo Server & Federation

MongoDB

Advanced

NoSQL document storage

Prisma

Expert

Modern ORM & type-safe queries

AWS

Intermediate

Cloud infrastructure & deployment

OpenAI API

Intermediate

LLM integration & prompt engineering

Next.js

Expert

Production-grade React framework

Tailwind CSS

Expert

Utility-first CSS framework

PHP

Advanced

Server-side scripting & web development

GraphQL

Advanced

Apollo Server & Federation

MongoDB

Advanced

NoSQL document storage

Prisma

Expert

Modern ORM & type-safe queries

AWS

Intermediate

Cloud infrastructure & deployment

OpenAI API

Intermediate

LLM integration & prompt engineering

UserService.ts

  // Clean Architecture Pattern
  interface IUserRepository {
    findById(id: string): Promise<User>;
  }

  class UserService {
    constructor(
      private readonly userRepo: IUserRepository
    ) {}

    async getUserProfile(id: string): Promise<Profile> {
      const user = await this.userRepo.findById(id);
      return new ProfileDTO(user);
    }
  }
Code Quality

Clean, Maintainable Code

I write code for humans first, computers second. My codebase is strictly typed, well-documented, and follows SOLID principles to ensure long-term maintainability.

    TypeScript Strict Mode
    SOLID Design Principles
    Test-Driven Development (TDD)
    Self-Documenting Logic

High Performance

Speed is a feature. I optimize every byte to ensure near-instant load times and buttery smooth interactions, boosting SEO and User Retention.

0

Performance

0

Accessibility

0

Best Practices

0

SEO

Mobile-First Experience

In a world where mobile traffic dominates, I build for the smallest screen first. My layouts are fluid, touch-optimized, and adaptive to any viewport size.

Touch Optimized

Gestures, larger tap targets, and swipe interactions.

Fluid Layouts

Grid & Flexbox systems that adapt gracefully.

High Density

Crisp visuals on Retina/4K displays.

Agile Process

Great software is built with great communication. I utilize Agile methodologies (Scrum/Kanban) to ensure transparency, rapid iteration, and continuous delivery of value.

Kanban Boards

Trello / Jira

Sprints

2-Week Cycles

Daily Standups

Progress Tracking

Collab

Slack / Discord

Sprint Board
To Do
In Progress
Done
Featured Work

My |

Scalable applications built with modern architecture, clean code, and industry best practices.

Enterprise E-Commerce PlatformBISTROFLOW: INTEGRATED FOOD ORDER AND RESERVATION FOR EAST GATE BISTROFinTech Banking DashboardImmersive 3D Portfolio Engine
Enterprise E-Commerce PlatformBISTROFLOW: INTEGRATED FOOD ORDER AND RESERVATION FOR EAST GATE BISTROFinTech Banking DashboardImmersive 3D Portfolio Engine
Enterprise E-Commerce Platform - Slide 1

Enterprise E-Commerce Platform

A modern, responsive storefront for German fashion, showcasing products with a fast, smooth browsing experience

React 18
React Router 6
Zustand
Tailwind CSS
tailwind-merge
Framer Motion
Lucide React
TypeScript 5
Vite 5
@vitejs/plugin-react
ESLint
PostCSS
Autoprefixer
Vercel (SPA rewrites)
React 18
React Router 6
Zustand
Tailwind CSS
tailwind-merge
Framer Motion
Lucide React
TypeScript 5
Vite 5
@vitejs/plugin-react
ESLint
PostCSS
Autoprefixer
Vercel (SPA rewrites)
React 18
React Router 6
Zustand
Tailwind CSS
tailwind-merge
Framer Motion
Lucide React
TypeScript 5
Vite 5
@vitejs/plugin-react
ESLint
PostCSS
Autoprefixer
Vercel (SPA rewrites)
React 18
React Router 6
Zustand
Tailwind CSS
tailwind-merge
Framer Motion
Lucide React
TypeScript 5
Vite 5
@vitejs/plugin-react
ESLint
PostCSS
Autoprefixer
Vercel (SPA rewrites)
BISTROFLOW: INTEGRATED FOOD ORDER AND RESERVATION FOR EAST GATE BISTRO - Slide 1

BISTROFLOW: INTEGRATED FOOD ORDER AND RESERVATION FOR EAST GATE BISTRO

is a comprehensive, full-stack restaurant management system designed to streamline food ordering, table reservations, and kitchen operations. It features a modern, responsive customer interface for browsing menus and placing orders, a dedicated staff dashboard for managing active orders, and a powerful admin panel for menu customization, floor layout management, and sales analytics.

Next.js (App Router)
TypeScript
Tailwind CSS
Zustand
Framer Motion
Jest
React Testing Library
ESLint
PHP
MySQL
RESTful API
Custom Router
Validator
CSRF
RateLimiter
Next.js (App Router)
TypeScript
Tailwind CSS
Zustand
Framer Motion
Jest
React Testing Library
ESLint
PHP
MySQL
RESTful API
Custom Router
Validator
CSRF
RateLimiter
Next.js (App Router)
TypeScript
Tailwind CSS
Zustand
Framer Motion
Jest
React Testing Library
ESLint
PHP
MySQL
RESTful API
Custom Router
Validator
CSRF
RateLimiter
Next.js (App Router)
TypeScript
Tailwind CSS
Zustand
Framer Motion
Jest
React Testing Library
ESLint
PHP
MySQL
RESTful API
Custom Router
Validator
CSRF
RateLimiter
FinTech Banking Dashboard - Slide 1

FinTech Banking Dashboard

Secure financial dashboard with real-time data visualization via WebSockets. Implements end-to-end encryption, role-based access control (RBAC), and regulatory compliance reporting.

TypeScript
NestJS
GraphQL
D3.js
PostgreSQL
Kubernetes
TypeScript
NestJS
GraphQL
D3.js
PostgreSQL
Kubernetes
TypeScript
NestJS
GraphQL
D3.js
PostgreSQL
Kubernetes
TypeScript
NestJS
GraphQL
D3.js
PostgreSQL
Kubernetes
Immersive 3D Portfolio Engine - Slide 1

Immersive 3D Portfolio Engine

A high-performance portfolio template featuring WebGL-powered 3D environments, custom shader materials, and smooth page transitions using React Three Fiber.

React Three Fiber
GLSL Shaders
Framer Motion
Blender
Vercel
React Three Fiber
GLSL Shaders
Framer Motion
Blender
Vercel
React Three Fiber
GLSL Shaders
Framer Motion
Blender
Vercel
React Three Fiber
GLSL Shaders
Framer Motion
Blender
Vercel
Available for Freelance

Let's Build Something
Extraordinary

Have a project in mind or just want to say hi? I'm always open to discussing new opportunities and innovative ideas.

Email Me

johnkennethbalutan@gmail.com

Location

Poblacion, Tayasan, Neg. Or. Philippines

Phone

+63 965 907 1239

Trusted by Clients

"John led our microservices migration and observability rollout. We handled 10x peak traffic with zero downtime and reduced average latency by 42%."
S

Sarah Johnson

"He rebuilt checkout and streamlined our design system. Drop‑off decreased by 18% and overall conversion improved while keeping the codebase maintainable."
M

Michael Chen

"From database indexing to CI/CD, he delivered measurable gains. Build times fell by 55% and incident rates dropped thanks to better monitoring."
D

David Smith

Ready to Build the
Next Big Thing?

I am currently available for freelance projects and full-time opportunities. Let's discuss how I can help your team succeed.

Contact Me