Skills
Development
- Typescript
- Javascript
- ReactJs
- VueJs
- NodeJs
- Express
- Loopback
- Fastify
- AdonisJs
- PHP
- Laravel
- Rustlang
- Golang
Infrastructure
- Linux
- Ansible
- Docker
- Redis
- Postgresql
- Cloudflare Pages
- Cloudflare Workers
- Netlify
- AWS EC2
- AWS RDS
- AWS SNS
- AWS Elasticache
- AWS CloudWatch
Side Projects
*Expand to view details
April 2023 - Present
Home Lab
I host my own infrastructure using a mini PC thats running rocky linux 9. All core software and applications are deployed using docker containers and are behind traefik reverse proxy.
To allow other devices to reach this server, i run tailscale VPN for applications that i only want to be accessible for nodes in my tailnet (tailscale terms for a group of devices). But for applications that i also want to be accessible from the internet, i use cloudflare tunnel to expose them.
This homelab is for learning containers, infrastructure and linux administration in general. All application specific configurations files, and docker compose files are version controlled and managed using portainer.
Currently hosted things:
- Portainer
- Traefik (sits infront of every app)
- Authelia (Single sign-on)
- Cloudflare Tunnel
- Postgres
- Clickhouse
- Grafana & Prometheus (With node exporter and cadvisor)
- Microbin (https://github.com/szabodanika/microbin)
- Nginx (Serve static files or PHP code)
- Plausible & umami (Analytics for my web application)
March 2023 - March 2023
Envoi - NodeJs Version
A rewrite of my Golang application to NodeJs. I needed new features and I needed them fast, so I rewrote it to NodeJs, and this time it has a UI in React.
This is a webhook demultiplexer. It has a backend that forward a webhook to multiple destination. There is a web UI that you can use to configure the routes. Data are stored in Redis. Websockets are used to notify the frontend of any new webhook request.
You can specify URL path that accept 1 webhook, and specify destinations for them.
Motivation:
- Usually any web services that provide webhooks integration only allows 1 destination for each application. I want to able to demultiplex (or forward) this 1 webhook, into multiple other webhooks destination.
Features:
- Accept HTTP request
- Forward HTTP request to 1 or more destinations
Tech stacks:
- NodeJs
- React
- Redis
- DigitalOcean virtual server
- Systemd as process manager
- Websockets
October 2022 - February 2023
Shopee web scraping - Rustlang
Rust version of my old shopee scraping bot (https://github.com/DoReVo/mr-scrappe)
This arguably has fewer features, but it was a project to learn rust. Instead of choosing a new idea, i just rewrite my shopee scraping bot from nodejs to rustlang.
Uses webdriver (geckodriver) to run firefox in headless mode, and scrape the website. Uses a yaml file config to configure shops and keyword to scrape. It saved the list of items in a yaml file.
Tech stacks:
- Rustlang
June 2022 - July 2023
Kronos - Prayer Time App
A Progressive web app that displays Malaysia's Islamic prayer times.
Built out of frustrations of other apps on the play store that was either, have ads that downgrade the UX, buggy at times, or trying to be a super app by having many functionalities. So i built a prayer time web app that adhere to the unix philosophy of “Write programs that do one thing and do it well.”
The frontend is a Single Page Application while the backend is a Node.Js server that scrape prayer times from “www.e-solat.gov.my” API and cache it in redis.
Available at: https://kronos.izzatfaris.site
Tech Stacks:
- Typescript
- VueJs with vite
- Tailwind
- Node.Js with fastify
- Redis
- Edge deployment with cloudflare pages
- DigitalOcean VPS for backend.
- Systemd (No PM2)
Repos:
March 2022 - March 2023
Vite Template
A frontend framework template for me (or anyone) to use to quickly scaffold a VueJs project.
Main motivation of creating this is for me to be able to quickly scaffold a frontend project with all the toolings and plumbing already setup. Uses Vite instead of webpack, so HMR (Hot Module Replacement) is blazingly fast :D
Features:
- Vite, Vue 3
- Vue Router
- Pinia (Vuex replacement)
- Saas
- Tailwind
- Typescript (all the way).
Toolings and plumbings:
- PostCSS (with autoprefixer)
- Prettier
- Very strict ESLint config
Pages included:
- Sign in
- Credits page (For any free resource used)
Extra:
- Captured PWA (Progressive Web App) install prompt and installed event. This is to facilitate making a custom install flow for PWA.
February 2022 - February 2023
Envoi - Golang Version
A webhook demultiplexer built in Golang.
Its a backend service that forward a webhook to multiple destination. You can specify URL path that accept 1 webhook, and specify destinations for them. You can also add custom handling for each URL path, just in case the web service of that webhook requires some sort of verification. My first real Golang project.
It uses a JSON file to store your config, so that you can easily set up this service without requiring any sort of database. It logs each events to journald so you’ll have an easy time accessing the logs.
Motivation:
- Usually any web services that provide webhooks integration only allows 1 destination for each application. I want to able to demultiplex (or forward) this 1 webhook, into multiple other webhooks destination.
Features:
- Accept HTTP request
- Forward HTTP request to 1 or more destinations
- Everyting is configurable
Tech stacks:
- Golang
- Google Compute Engine (Ubuntu VPS)
- Systemd as process manage
February 2022 - February 2022
Sudop bot
A platform agnostic chat bot that you can use to track your todo list.
The bot can accept and reply messages from platform such as ,Line, FB Messenger, Telegram, Slack, Wechat, Viber and many more. Built as a POC of app integrating with SendQuick.io
Features:
- Add task
- Delete task
- List task
Tech stacks:
- NodeJs (Fastify)
- Redis
- Google Compute Engine (Ubuntu VPS)
- Google stack driver (Logging)
- Systemd as process manager (No PM2)
- SendQuick.Io (A SaaS that offered unified API for social & collaborative platforms)
December 2021 - December 2021
Bantu
A web app that was created to curate tweets regarding the flood in Selangor that occured in December 2021.
It was created to help rescuers locate people in need of help during the flood. I had midnight thoughts about it and decided to engineer a little something to solve it. MVP was built just over 12 hours.
Background:
- When the flood started, people started tweetings with the hashtag #daruratbanjir to give updates about whats going on. In some of those tweets, there are coordinates in them. These coordinates represent people needing help. It could be people who’re trapped in their house due to the flood, or people stranded on highways when water level rose up. But its hard to discover the tweets that contain coordinates.
Problem:
- There are thousands of tweets with the #daruratbanjir, its hard for tweets with coordinates to be discovered by you or rescuers. You literally need to scroll the timeline and read every tweet.
Solution:
- Use twitter API and search for tweets using the hashtag #daruratbanjir
- Process the tweets on the server-side with NodeJs to check if they contain number pair that looks like coordinates of people needing help. This is simply just a regex match againts the tweet.
- Check those pair of numbers using Mapbox. I use their reverse geocoding API to determine whether those pair of numbers are coordinates within Malaysia. If they’re valid, save them.
- Displays all these tweets and coordinates in a dashboard (https://bantu.izzatfaris.site), with links to open google map.
Caveats/problems discovered:
- Pair of numbers that could look like coordinates but actually they’re not.
- Finding reverse geocoding API with the best free plan.
Condition for the tweets to be picked up by the system:
- contain the hashtag #daruratbanjir
- has Malaysia latitude and longitude coordinates in it.
Tech stacks:
- Vuejs (Vite)
- NodeJs (AdonisJs)
- Postgresql
- BullJs / Redis
- Digital Ocean VPS
- Twitter API V2
- Mapbox API
- Cloudflare Pages
November 2021 - November 2021
Web scraping - IpohWorld.org
Scraping all 10,000++ records on https://db.ipohworld.org/web_report for data and saving the results into a CSV file.
Url of the images are taken and saved into the CSV file. The website uses AJAX to fetch data, therefore you have to use puppeteer to scrape it. Why not use the API endpoint that the AJAX request was using? It was badly engineered, hard to understand. Its faster for me to just use puppeteer.
Problem:
A friend ask for help to scrape this site :)
Solution:
- Analyze the site HTML structure and
- Analyze how it loads data from the backend, whether its server-side rendered or an SPA.
- I decided that it was easier and faster for me to just use puppeteer instead of their API endpoint.
Tech stack:
- Javascript
- NodeJs
- Puppeteer
August 2021 - August 2021
Covid Dashboard
A progressive web app that tracks the status of covid-19 in Malaysia. It shows positive cases, deaths and vaccinated numbers.
The initial app was built just under 24 hours.
The backend built with NodeJs on the cloudflare workers serverless platform, it scrapes data (every 12 hours) from the official Ministry of Health and CITF github, process it for the frontend SPA to consume, and store the data in cloudflare KV store.
The web client was built with react (with vite not CRA), uses REST endpoint exposes by the NodeJs backend to fetch the summary data, or the graphs data, and display them in an easy to digest dashboard.
Live version at https://sc2.izzatfaris.site
Data source:
Features:
- Daily, weekly and monthly stats
- Graphs
Tech Stacks:
- Typescript
- React (Vite)
- NodeJs
- Cloudflare Workers
- Cloudflare KV stores
- Cloudflare Pages
April 2021 - April 2021
Mr-Scrappe
A shopee scraping bot that can notify you whenever an item in a particular store is in stock
Everything is configurable. It will notify you through discord.
My primary motivation in creating this was to look for graphics card to buy on shopee. I’ll find a list of shopee stores that i want to keep an eye on, and I will configure my bot to look for certain keywords in these stores every X amount of minute. If it found matching keywords, it will send notification to me through Discord.
Solution:
- Uses shopee public API to get preconfigured search results from the preconfigured list of stores.
- Match those results againts the preconfigured list of keywords.
- Post in a discord channel if there is a match using webhooks.
Tech stacks:
- Typescript.
- NodeJs.
- Cloudflare workers
- Discord webhook
- Shopee public API (No auth required)
January 2021 - January 2021
Tv-Plan
A progressive web app that enables you to keep track and get notified of your favorite tv shows.
Tech Stacks:
- Typescript
- VueJs (Nuxt)
- NodeJs (AdonisJs)
- Postgresql
- Redis
- Progressive Web App
Project is currently on hiatus.
Repositories are private.
October 2020 - October 2020
Sensasi RSS
A webapp that shows you summaries and snippets of today's news with links to read the full article.
Made to make it easy for you to consume news without overwhelming you. The news article are from AWANI. The initial app was built just under 2 hours.
The client is a PWA VueJs single-page application, and initially the backend was built using AdonisJs (A NodeJs framework). But it was later changed to a cloudflare worker script because i don’t want to pay for hosting on DigitalOcean. The frontend was initially hosted using DigitalOcean app platform but was later changed to cloudflare pages.
Everything was written in typescript.
Live version at https://sensasi.izzatfaris.site
Tech Stacks:
- Typescript
- VueJs (Nuxt)
- Cloudflare workers
- Astro Awani RSS API (XML)
- Cloudflare pages
- Progressive Web App
Old Tech Stacks:
- AdonisJs
- DigitalOcean $5 droplet
- DigitalOcean app platform
Repositories
- Client - https://github.com/DoReVo/sensasi
- Cloudflare worker - https://github.com/DoReVo/sensasi-api
June 2020 - June 2020
SMS Queuing System
A project for a competition
This system aims to replace the paper based queuing system at public facilities and business such as hospital, post office and JPJ. It substitute traditional paper based queuing system with an sms based queuing where customers only need to provide their phone number. MVP built in just 24 hours.
They will be notified when :
- Joining the queue (Welcome message and display their current turn number)
- The queue moves and the current customer had been served (Will notify existing customers in queue of their new turn number)
- When their it is their turn (Sms telling them that their turn is up and the business is ready to serve them)
Tech Stack:
- VueJs
- Lumen Laravel
- DigitalOcean Ubuntu droplet
- Apache webserver
- MariaDB
- AWS Simple Notification Service