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

Category Technologies & Tools
Frontend Core TypeScript, JavaScript (ES6+), Vue.js, Nuxt 3, React, Next.js, Vite
State Management Pinia, Vuex, Zustand, React Context API
UI & Styling TailwindCSS, Bootstrap, Vuetify, Element Plus, SASS/SCSS
Testing & QA Playwright, CodeceptJS, Vitest, API Testing (Postman/Swagger)
Backend & Integrations Node.js, Express.js, Hono, RestAPI, GraphQL, Socket.IO, IndexedDB
DevOps & Tools Git, 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

πŸ’¬ SimpleChatApp

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-indonesia sipri-indonesia Public

    SIPRI Indonesia β€” Arms Transfers Database

    Vue

  2. simple-chat-app simple-chat-app Public

    Simple Vue+Vite chat app

    Vue

  3. subtify subtify Public

    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

  4. subtify.old subtify.old Public

    Subtify is open-source platform that helps you to find words in subtitles or captions from YouTube videos quickly, and it's 100% free!

    HTML 17 1

  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
    const key = randomBytes(32) // 32 bytes for AES-256
    5
    const iv = randomBytes(16)  // 16 bytes IV
  6. computed with parameters computed with parameters
    1
    const dragOverStyle = computed(() => {
    2
          return (overId : number, index:number) => { // replace params inside brackets
    3
            return overId === index ? 'bg-[#FBD1DE] ml-4   rounded' : '' 
    4
       }
    5
    })