Royan Farid.
Frontend Engineer · Semarang, Indonesia

Digital experiences, thoughtfully built

Thoughtfulinterfaces.Solid engineering.

I build refined web experiences that combine thoughtful UI, intuitive interactions, and maintainable frontend architecture.

Explore my workGet in touchView CV
✳Component-driven UI✳API integration

Selected Work

Projects built with purpose.

A selection of web applications and digital experiences I've contributed to, from project management systems to interactive user interfaces.

Project Management SystemJul — Oct 2023

SELECTED WORK / 01

Sistem Manajemen Konstruksi Proyek (SIMAKPRO).

A web-based project management system developed to support contractor project management workflows.

My contribution

Developed interactive frontend interfaces and translated project requirements into usable, maintainable components.

React.jsBootstrapReact ContextReact QueryFormik

Next project

Pharma Cash

01 / 05
SIMAKPRO project management system interface
Project managementPROJECT / 01
02

Up next

Pharma Cash

Desktop Point of Sale

Project 1 of 5: Sistem Manajemen Konstruksi Proyek (SIMAKPRO)

About me

Thoughtful by design. Practical by nature.

I'm a Frontend Engineer focused on building web applications that balance thoughtful user interfaces with reliable implementation.

My work spans reusable component development, API integration, form handling, state management, and collaboration with design and backend teams to turn requirements into maintainable products.

01 /

Interface engineering

Responsive, accessible, reusable UI components.

02 /

Application integration

API-driven workflows and maintainable frontend architecture.

Experience

Experience in practice.

A closer look at the roles, products, and responsibilities that have shaped my frontend engineering experience.

01

Contributed to the development and maintenance of an enterprise web application as part of the Digital Project Team.

Key Responsibilities

  • Collaborated with UI/UX designers to translate design specifications into responsive and consistent user interfaces.
  • Integrated REST APIs and handled asynchronous data fetching using TanStack Query in collaboration with backend developers.
  • Developed reusable UI components using Next.js, React, TypeScript, Tailwind CSS, and shadcn/ui.
  • Implemented form handling and validation with React Hook Form and Yup, and managed application state using Zustand.
  • Developed interactive components, including modals, and implemented multilingual interfaces using i18n.
  • Implemented PDF generation and document handling using pdfmake, pdf-lib, and html2pdf, and integrated rich-text editing with TinyMCE.
  • Maintained readable, reusable code, debugged frontend issues, and collaborated with cross-functional teams to meet design and functional requirements.

Technology Stack

Next.jsReactTypeScriptTailwind CSSshadcn/uiTanStack QueryZustandReact Hook FormYupi18n
02
03
04

Education

Learning never stops.

Continuous Learning

Additional Experience& Development

Professional training and learning experiences that complement my frontend engineering background.

01
Professional TrainingNov 2025

Short Course of Web Developer (CAWD)

Syntaxnesia Professional Training Center

Completed professional web development training covering Laravel, SQL, debugging, and software development fundamentals.

  • Laravel and SQL
  • Debugging and User Acceptance Testing (UAT)
  • Programming algorithms and software scalability

Certified Associate Web Developer (CAWD)

Online

02
Independent Study ProgramFeb 2023 – Jun 2023

Tech4Impact — Front-End Development

Skilvul

Developed frontend skills through practical projects, collaborative development, and UI/UX design activities.

  • JavaScript and React.js
  • React Hooks, React Router, and state management
  • REST API integration
  • Collaborated on EarthCare, a climate-crisis awareness website

Completion with Honor — one of 10 recognized mentees

Online

03
Independent Study ProgramAug 2022 – Dec 2022

Web Developer Program

Hacktiv8

Built a foundation in modern web development through structured learning and hands-on projects.

  • Responsive web development and JavaScript
  • Asynchronous programming and API integration
  • DOM manipulation and jQuery
  • Built landing pages, a COVID-19 tracker, and a weather forecast website

Online

04
Technical TrainingJul 2022 – Aug 2022

Fresh Graduate Academy — Big Data Using Python

Digital Talent Scholarship (DTS)

Explored Python programming, data processing, and introductory data analysis and machine learning concepts.

  • Python and object-oriented programming
  • Data processing and analysis fundamentals
  • Introduction to machine learning

Online

05
Technical BootcampJul 2021 – Sep 2021

KMMI — Social Network in R

Sadasa Academy

Studied social network analysis and applied analytical methods in a sentiment analysis project.

  • Social network analysis and graph visualization
  • R, igraph, and Gephi
  • Instagram comment sentiment analysis concerning PCR test price reductions

Online

Expertise

Engineering interfaces.Solving problems.

The skills and tools I use to transform requirements into functional, maintainable, and user-friendly applications.

01 / PRIMARY FOCUS

Frontend Engineering

Building responsive web applications with reusable components, maintainable architecture, and thoughtful interactions.

ReactNext.jsTypeScriptJavaScriptVue.js
Core specializationFrontend / Web
02INTERFACE

UI Engineering

Turning UI/UX designs into consistent, responsive, and reusable interfaces.

Tailwind CSSBootstrapshadcn/uiHTMLCSS
03INTEGRATION

API & State

Connecting backend services and managing asynchronous data, forms, and application state.

REST APITanStack QueryZustandReact Hook FormFormikYup
04ECOSYSTEM

Tools & Ecosystem

Supporting development workflows across web and desktop applications.

GitAxiosPostmanElectron.jsFigmaJira

MY APPROACH

From requirements to refined interfaces.

A practical workflow
01

Understand

Requirements & UI/UX

02

Build

Components & interfaces

03

Integrate

APIs & application state

04

Refine

Usability & consistency

Get in touch

Have something good in mind?

I'm open to meaningful conversations, collaborations, and opportunities to build thoughtful digital experiences.

Send me an emailConnect on LinkedIn