Portfolio/2026

Ode Afdal

Fullstack Engineer with 4+ years of experience building web and mobile applications with React, Next.js, Vue, and React Native. Experienced in performance optimization, REST/GraphQL API integration, and automated testing, working with remote teams across Singapore and Malaysia.

Open to opportunitiesJakarta, Indonesia

01 / Education

Education

Jan 2022 — Apr 2022

Fullstack JavaScript Bootcamp

Hacktiv8

2015 — 2019

Bachelor of Information Systems (GPA 3.36)

STMIK Bina Bangsa Kendari

02 / Experience

Experience

Oct 2022 — Oct 2026

Fullstack Engineer (Frontend Focus)

10Xers Holdings Pte. Ltd.

Singapore

  • Built web applications with React and Vue using reusable components and consistent UI patterns
  • Optimized application and website performance using Google Lighthouse and PageSpeed Insights
  • Designed and integrated RESTful APIs with Node.js, Express.js, and MongoDB with cross-functional teams
  • Wrote automated tests with Playwright and Jest to keep releases stable
  • Optimized SEO, hosting, and SSL for Webflow and WordPress sites; researched new tools
  • React & React Native
  • Vue 3
  • Node.js
  • Express.js
  • RPA & PWA
  • Playwright
  • SEO
  • Webflow
  • WordPress
  • AWS & CI/CD

Oct 2022 — Nov 2022

Fullstack Engineer (Freelance)

Brik Construction

Jakarta, Indonesia

  • Developed backend APIs and databases with Node.js to support a Vue-based frontend
  • Debugged and improved existing backend code for better stability
  • Node.js
  • Express.js
  • PostgreSQL
  • REST API
  • Backend

May 2022 — Sep 2022

Fullstack Engineer

Nadi Healthtech Sdn. Bhd.

Kuala Lumpur, Malaysia

  • Developed the web admin panel with React.js and built new features with reusable code
  • Converted designs into mobile layouts and delivered a digital health and wellness app with Ionic
  • Improved page load times and resolved bugs through debugging and testing
  • Built backend APIs with Node.js, Express.js, and MongoDB to support the web admin panel and mobile app
  • React.js
  • Ionic
  • Node.js
  • Express.js
  • MongoDB
  • TypeScript
  • Angular

03 / Skills

Skills

Frameworks

  • React
  • Next.js
  • Vue 3
  • React Native
  • Ionic
  • Capacitor
  • Expo
  • Angular

State Management

  • Redux
  • Zustand
  • Redux-Thunk
  • Redux-Saga
  • React Context
  • Vuex

Styling & UI

  • Tailwind CSS
  • Tamagui
  • Ant Design
  • SASS/SCSS
  • Elementor
  • Bootstrap
  • Daisy UI

Languages

  • TypeScript
  • JavaScript (ES6+)
  • PHP
  • HTML5
  • CSS3
  • SQL

API & Backend

  • REST API
  • GraphQL
  • Apollo
  • Node.js
  • Express.js
  • MongoDB
  • PostgreSQL
  • Redis
  • Payment Gateways (Stripe, Paddle, Apple/Google Pay, Erad, Amazon Payment Services, Xendit)

Testing & Automation

  • Jest
  • Playwright
  • RPA Automation
  • Supertest
  • AdsPower

Performance & SEO

  • Core Web Vitals
  • Google Lighthouse
  • PageSpeed Insights
  • SEO Optimization
  • SSL & Hosting

CMS & E-Commerce

  • WordPress (Themes & Custom Plugins)
  • Custom Elementor Widgets
  • Shopify Theme App Extensions
  • Webflow

Internationalization (i18n)

  • i18n / l10n Architecture
  • Bi-directional RTL / LTR Layouts
  • Arabic & English Localization

Tools & DevOps

  • Git & GitHub
  • Vite
  • Docker
  • CI/CD (GitHub Actions)
  • AWS Ecosystem (S3, CloudFront)
  • Cloudflare Workers
  • Firebase
  • PWA
  • PostHog Analytics
  • Heroku

04 / Projects

Featured Work

AI & Outreach Automation Platform

webautomation

GrowReach

AI-powered B2B lead generation and LinkedIn automation platform featuring an AI commenting agent, lead sequencer, post scheduler, and unified inbox.

  • React
  • TypeScript
  • Stripe
  • Playwright
  • RPA
  • Zustand
  • AI Automation
  • PostHog
  • Ant Design

Web & Mobile Platform

webmobile

GrowEasy Salon

All-in-one salon and beauty business management platform across web and mobile, featuring online appointment booking, centralized staff calendar scheduling, client profile management, and on-the-go service notes.

  • React
  • React Native
  • TypeScript
  • PWA
  • Shopify CLI
  • REST API
  • Ant Design

Web & Mobile Platform

webmobile

Ajerly Car Rental

Car rental marketplace in Saudi Arabia. Engineered the frontend ecosystem across three applications: a React Native customer mobile app with map search, KYC verification, Apple Pay, and Arabic RTL localization, plus React and Vite vendor & admin portals for fleet management and analytics.

  • React
  • React Native
  • Vite
  • Ant Design
  • Zustand
  • Tamagui
  • SCSS
  • TypeScript
  • Apple Pay

Grocery Delivery & Admin Platform

webmobile

Jumlaty Groceries

On-demand grocery delivery and FMCG marketplace in Saudi Arabia. Engineered the mobile customer application in React Native and web admin dashboard in React with Ant Design, delivering order fulfillment lifecycles, delivery dispatch modules, Redux-Saga state architecture, Arabic RTL localization, and secure Erad Payment Gateway checkout.

  • React Native
  • React
  • Redux-Saga
  • Ant Design
  • Erad Payment
  • SCSS
  • JavaScript
  • Arabic RTL

Corporate Web Platform

web

MAC Establishment

Corporate web platform for MAC Establishment built on WordPress and Elementor, featuring custom theme development, PHP bespoke plugins, custom Elementor widgets, and performance tuning deployed on Hostinger.

  • WordPress
  • PHP
  • Elementor
  • Custom Elementor Widget
  • Custom Theme
  • Custom Plugin
  • Hostinger

Web & Mobile App

webmobile

Jasmine Trades

Digital commodities marketplace modernizing global agricultural trade. Engineered cross-platform web and mobile applications using Vue 3 and Capacitor, featuring interactive trading workflows, contract checklists, user verification modules, and dual English/Arabic (LTR/RTL) localization for international trade participants.

  • Vue 3
  • Vuex
  • Tailwind CSS
  • Capacitor
  • TypeScript

Fullstack & Mobile

webmobile

Career Portal (Web & Mobile)

End-to-end job portal across web and mobile built with GraphQL Apollo gateway, Redis caching, and containerized Docker deployment.

  • React
  • Redux
  • React Native
  • Expo
  • Tailwind
  • GraphQL
  • Apollo
  • MongoDB
  • Docker
  • Redis

Dine-In Mobile App

mobile

Nuer Pay

Dine-in mobile ordering and cashless payment app built with React Native and Expo, integrating GraphQL Apollo services, Xendit API, and automated testing with Jest.

  • React Native
  • Expo
  • Tailwind
  • GraphQL
  • Apollo
  • Xendit API
  • Jest

Fullstack Web App

web

CMS Data KIB

Asset and inventory management system featuring geospatial mapping with Mapbox, QR Code generation, PostgreSQL persistence, and Firebase integration.

  • Vue
  • Vuex
  • Tailwind
  • Express.js
  • PostgreSQL
  • Firebase
  • Mapbox
  • QR Code

Repositories & Bug Fixes

webautomation

Open Source & Upstream Contributions

Active contributor to open-source developer ecosystems, including upstream SDK bug fixes for Erad Payment Gateway (Saudi Arabia, merged into official codebase) and production repositories delivered at 10Xers.

  • Open Source
  • Erad SDK
  • Payment Gateways
  • TypeScript
  • GitHub

05 / Blog

Engineering Guides & Articles

06 / Let's Connect

Let's Connect

Open to Fullstack and Frontend Engineer opportunities, remote collaborations, and conversations about building fast, reliable web and mobile products.