Skip to content
View arifineu's full-sized avatar
❤️
this cat is cute
❤️
this cat is cute

Organizations

@frontend-id@poteto-dev@itcsmkn1sby@infinitedevsign@digital-entropy

Block or report arifineu

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
arifineu/README.md

Hi there, I'm Arifin Izzah Maulana 👋

Frontend Engineer | TypeScript | Web Quality & Test Automation

I am a Frontend Engineer with over 5 years of experience building, optimizing, and maintaining robust web applications. I specialize in the Vue/Nuxt and React ecosystems using TypeScript.

What sets me apart is my deep focus on software quality and stability. I don't just build UI; I ensure it's reliable through end-to-end test automation (Playwright, CodeceptJS) and scalable application architecture.


🚀 Technical Expertise

CategoryTechnologies & Tools
Frontend CoreTypeScript, JavaScript (ES6+), Vue.js, Nuxt 3, React, Next.js, Vite
State ManagementPinia, Vuex, Zustand, React Context API
UI & StylingTailwindCSS, Bootstrap, Vuetify, Element Plus, SASS/SCSS
Testing & QAPlaywright, CodeceptJS, Vitest, API Testing (Postman/Swagger)
Backend & IntegrationsNode.js, Express.js, Hono, RestAPI, GraphQL, Socket.IO, IndexedDB
DevOps & ToolsGit, GitHub, GitLab, Cloudflare Workers, Docker, Jira, Figma

🛠️ What I'm Working On

  • Frontend Architecture: Recently led a migration from a Micro Frontend architecture (Vite Federation) to a Nuxt 3 monolithic architecture to boost DX and deployment efficiency.
  • Offline-First Experiences: Building reliable real-time and offline capabilities using Service Workers and IndexedDB.
  • Bulletproof Automation: Designing test suites and custom composables to make E2E component testing a breeze.

📂 Highlighted Projects

🌟 Subtify

A high-performance subtitle search app featuring server-side transcript fetching, keyword match highlighting, and deep-linked YouTube timestamps.

  • Tech Stack: React, TypeScript, Zustand, TailwindCSS, Hono, Cloudflare Workers, Wrangler

A mobile-first PWA Nuxt 4 web app for Susi Air pilots with Atomic Design and BEM CSS methodology

  • Tech Stack: Nuxt, TypeScript, Pinia, SCSS, Chart.js, Vitest, Storybook

A responsive, mobile-friendly chat platform featuring user auth, session persistence, and full unit test coverage.

  • Tech Stack: Vite, Vue 3, TypeScript, Pinia, Vitest, TailwindCSS

A Nuxt-based web application built to explore and visualize defense procurement data from public datasets.

  • Tech Stack: Nuxt, TypeScript, TailwindCSS

👥 Community Involvement

  • Event Organizer @ AndroidDev Surabaya (2019 - 2024) – Managing and driving tech events in the local community.
  • Mentor @ IT CLUB SMK Negeri 1 Surabaya (2017 - 2019) – Shared web development fundamentals with aspiring developers.

📬 Connect With Me

Stats

visitors

Pinned Loading

  1. sipri-indonesiasipri-indonesiaPublic

    SIPRI Indonesia — Arms Transfers Database

    Vue

  2. susi-air-pilot-app-assessmentsusi-air-pilot-app-assessmentPublic

    A mobile-first Nuxt 4 PWA app for Susi Air pilots with Atomic Design and BEM CSS methodology

    TypeScript 1

  3. simple-chat-appsimple-chat-appPublic

    Simple Vue+Vite chat app

    Vue

  4. subtifysubtifyPublic

    Search words and phrases inside YouTube subtitles. Paste a video URL, load the transcript, and find every match with a clickable timestamp that jumps to that moment in the video.

    TypeScript

  5. Encrypt and Decrypt using AES-256-CB...Encrypt and Decrypt using AES-256-CBC in node environment
    1
    import{randomBytes,createCipheriv,createDecipheriv}from'node:crypto'
    2
    3
    // Secret key and IV
    4
    constkey=randomBytes(32)// 32 bytes for AES-256
    5
    constiv=randomBytes(16)// 16 bytes IV
  6. computed with parameterscomputed with parameters
    1
    constdragOverStyle=computed(()=>{
    2
    return(overId : number,index:number)=>{// replace params inside brackets
    3
    returnoverId===index ? 'bg-[#FBD1DE] ml-4 rounded' : ''
    4
    }
    5
    })