Frontend Developer - Freelance at CV. Richo Bahari — Rafif Sava Adyvka Pratama
ContractCV. Richo Bahari (General Contractor & Industrial Engineering)

Frontend Developer - Freelance.

Commissioned by CentraDev to lead the frontend engineering and UI/UX architecture for CV. Richo Bahari, an established industrial general contractor operating across West Java and Jabodetabek. Transformed scattered PDF brochures and unorganized worksite photo archives into an enterprise-grade digital flagship built on Next.js 16, React 19, and Tailwind CSS v4—dignifying years of real physical labor, heavy steel fabrication, and strict K3 Zero Accident safety standards.

Role
Lead Frontend Engineer & UI/UX Architect
Client / Entity
CV. Richo Bahari (Industrial General Contractor)
Agency / Team
CentraDev Team
Engagement
Freelance (Production Live)
Period
May 2026 — Aug 2026
Tech Stack
Next.js 16 (App Router), React 19, Tailwind CSS v4, TypeScript
OrganizationCV. Richo Bahari
Next.js 16React 19Tailwind CSS v4TypeScriptReact CompilerVercelFramer MotionIndustrial EPC
Zero Acc.
K3 Safety Record

Digitized and highlighted certified workplace safety standards essential for tier-1 factory tender bids

5 Pillars
Engineering Capabilities

Unified Civil, MEP, Steel Fabrication, Storage Racking, and Logistics into a structured interactive catalog

< 1.2s
Sub-Second LCP

Optimized heavy high-resolution worksite galleries for fast loading on throttled factory floor connections

100%
Modern Architecture

Next.js 16 App Router, React 19, React Compiler, and Tailwind CSS v4 with zero legacy bloat

01NARRATIVE & MINDSET SHIFT

Giving Hard-Working Builders the Digital Dignity They Deserved

How modern web engineering bridged the divide between grueling physical craftsmanship and corporate procurement trust.

"Seeing the pride in the client's eyes when their years of sweat, steel fabrication, and zero-accident field safety were finally presented with world-class digital elegance reminded me why I write code: software at its best doesn't replace human labor, it dignifies and champions it."
Chapter 01

The Invisible Builders Behind Modern Industry

Every single day across the industrial corridors of Sukabumi, Cikarang, and greater West Java, the field crews of CV. Richo Bahari perform grueling, indispensable physical work. They pour rigid concrete pavement under punishing heat, weld heavy-duty structural steel jigs, and assemble multi-tiered warehouse pallet racking inside giant manufacturing facilities for clients like NGK Ceramics and PT Selatan Jaya. Yet outside those factory walls, their reputation was essentially invisible. When competing against multi-billion rupiah contractors for high-value factory tenders, they were stuck sending fragmented, low-resolution PDF brochures and raw WhatsApp photos. Their physical craftsmanship was exceptional, but their digital presence didn't do them justice. When CentraDev brought me in as Lead Frontend Engineer, I didn't see it as merely building another corporate website; I felt an immediate personal responsibility to give these hard-working builders the digital dignity they had earned with their own hands.

Chapter 02

Architectural Empathy: Designing for Two Disparate Worlds

Engineering this platform required deep empathy for two completely opposing user personas. On one side stood the corporate procurement committee in an air-conditioned Jakarta boardroom, inspecting K3 Zero Accident safety protocols and ISO compliance on retina displays. On the other side stood the rugged plant supervisor in Sukabumi, attempting to pull up civil engineering specs on a dust-covered phone over a fragile 3G connection in the middle of a noisy fabrication workshop. To serve both without compromise, I rejected bloated templates and built an ultra-lean foundation on Next.js 16 App Router, React 19, and Tailwind CSS v4. By leveraging React Server Components, responsive AVIF image compression pipelines, and automatic memoization via the React Compiler, we achieved sub-1.2s page loads. We paired this speed with a tactile, blueprint-inspired design system that translates complex industrial machinery into an intuitive, respectful visual experience.

Chapter 03

From Scattered PDFs to Corporate Pride

The most fulfilling moment of any project isn't when the code compiles without errors; it's the human reaction during handover. When the leadership and project coordinators of CV. Richo Bahari first explored the live platform—seeing their 5 core service pillars clearly articulated, their verified client case studies documented with measurable results, and their safety record given the prestige it deserved—the atmosphere completely changed. They weren't just looking at web design; they saw their life's work respected and validated. The platform immediately became their primary digital credential for bidding on factory expansions and manufacturing tenders, with direct consultation requests flowing straight into their communication pipeline. As a vocational high school student balancing late-night development sprints with dormitory life, this experience grounded me: technology isn't about Silicon Valley buzzwords; it's about amplifying the dignity of real human effort.

02ENGINEERING DELIVERABLES

Key Architectural Contributions & UI/UX Engineering

Modernizing industrial contractor presentation through bleeding-edge frontend architecture, tactile design systems, and responsive edge performance.

DELIVERABLE // 01Core Architecture

Bleeding-Edge Next.js 16 & React 19 Foundation

Architected the corporate web platform using Next.js 16 App Router, React 19, React Compiler, and Tailwind CSS v4, achieving uncompromising performance and optimal search crawler visibility.

  • React Server Components delivering instant First Contentful Paint (FCP) and rich metadata SEO for factory search queries
  • React Compiler automatic memoization eliminating unnecessary re-renders across dynamic interactive elements
  • Strongly-typed TypeScript data repositories cleanly decoupling industrial project models from layout presentation
DELIVERABLE // 02UI/UX Engineering

Tactile Industrial Design System & Bento Showcase

Crafted a bespoke visual identity featuring technical blueprint grid lines, monospace typography tokens, and interactive bento cards reflecting heavy engineering precision.

  • Technical blueprint aesthetic pairing Plus Jakarta Sans with Space Grotesk accents for an authentic engineering look
  • Interactive bento masonry showcasing Civil, MEP, Steel Fabrication, Storage Racking, and Logistics capabilities
  • Subtle kinetic micro-interactions and smooth Framer Motion transitions designed to feel solid, deliberate, and industrial
DELIVERABLE // 03Performance & Mobile

Field-Ready Performance & Edge Media Pipeline

Engineered responsive image processing and mobile-first layouts so plant managers and field supervisors can inspect worksite proofs on weak factory cellular connections.

  • Automated AVIF and WebP responsive picture formatting reducing heavy industrial gallery bandwidth by up to 75%
  • Sub-1.2s Largest Contentful Paint (LCP) benchmarked across real-world 4G networks and factory Wi-Fi environments
  • Mobile-first navigation with tactile bottom-sheet drawers and single-tap direct engineering consultation links
DELIVERABLE // 04Enterprise Credibility

Structured Industrial Case Studies & K3 Safety Standards

Transformed unstructured worksite histories into verified, structured corporate case studies emphasizing measurable outcomes and strict zero-accident safety records.

  • Challenge-Solution-Result framework detailing projects for PT Selatan Jaya, NGK Ceramics, and Sanwa Musen
  • Prominent K3 Zero Accident safety protocol matrix reassuring tier-1 factory tender audit committees
  • Integrated downloadable executive marketing collateral and 4:5 executive overview flyers
DELIVERABLE // 05Business Impact

Streamlined Commercial Inquiry & Consultation Funnel

Engineered frictionless contact funnels routing corporate inquiries directly to executive estimators and field directors.

  • Contextual WhatsApp consultation triggers pre-populating specific industrial service inquiries
  • Server-side sanitized contact form pipeline preventing spam submissions while maintaining zero data loss
  • Edge-cached static deployment on Vercel with zero server overhead and 99.99% uptime
03GROWTH & RETROSPECTIVE

Personal Growth & Human Retrospective

Reflections on craftsmanship, empathy in engineering, and the profound responsibility of representing real human effort.

Software Should Dignify Physical Craft

We often celebrate pure tech startups, but traditional physical industries—welding, civil paving, warehouse racking—are the literal backbone of modern life. Helping these craftsmen present their work with digital excellence made me realize that code has the power to uplift and honor honest physical labor.

Performance is an Act of Empathy

When you know a field supervisor might need to open your site under direct sunlight on a dusty factory floor with two bars of cellular signal, optimizing web vitals stops being an abstract Lighthouse score—it becomes a direct gesture of respect for the user's time and conditions.

Balancing Commitments Sharpens Shipping Discipline

Leading frontend engineering for an enterprise corporate client while managing vocational boarding school academics and existing project responsibilities taught me ruthless prioritization, clean component boundaries, and shipping discipline without cutting corners.

Deep-Dive Project

CV. Richo Bahari

Corporate Profile & Industrial Engineering Project Catalog

Deep-dive case study exploring the Next.js 16 App Router architecture, tactile blueprint design system, bento masonry, and edge performance optimizations built for CV. Richo Bahari.

Next.js 16React 19Tailwind CSS v4TypeScriptIndustrial EPC
Explore Case Study
CV. Richo Bahari
What's next

Let's build something.

Recruiting, contracting, or just curious — the inbox is open.

aRafif Sava Adyvka Pratama