List of projects what I've worked on. Mostly OSS
Jawa Bali, Bus ticket order app. Deployed on vercel with ported external domain (domainesia). The application is built on top of NextJS13, and prioritizes mobile first with PWA. Backend using NodeJS, and PostgreSQL as a main database. Support online payment using Xendit as payment gateway.
I Work as a team lead to handle all technical and team issues, then communicate with clients directly
Challenges:
Tech Stacks: NextJS13, React Query, Multithread, Koa.js, PostgreSQL, Xendit, Zod, TypeScript, TurboRepo, PWA, Sequelize, Async Mutex, Android Development, Sentry
Site: https://app.sigitourtransport.com/
(Try to reload again if you found req timeout, some limitation problem https://vercel.com/docs/limits/overview)
XState is a State Machine library for Elixir. The goal of XState to make state machines easy and flexible to use, without requiring developers to messy with gen server process, focus on state transitions instead.
XState provides a simple API for defining states and transitions. Developers can focus on modeling state machines. XState aims to be beginner-friendly, and uses finite-state-machine concepts in its implementation.
Challenges:
Tech Stacks: Elixir, State machine knowledge, Actor Model, Dialyxir
Site: https://hex.pm/packages/xstate
An experimental data scraping project in Rust. As a low-level, statically typed, compiled, non-garbage collected language, Rust prioritizes speed and control. These features make Rust well-suited for data scraping.
This project let me explore Rust's potential for web scraping. I chose Rust over other languages like Python because performance matters in scraping large datasets. Rust's lack of a garbage collector also gives more predictability over memory usage.
Challenges:
Tech Stacks: Rust, Reqwest, ReasonML, Diesel
Site: https://github.com/natserract/reason-rust-scraper/tree/master
React hook for handles fetching data recursively from a paginated API. The hook was originally designed for internal needs, but its functionality could be adapted for general use.
The backend API would need to support parameters like offset and limit that this hook relies on for pagination. With some API tweaking, this hook could provide a clean way for React developers to load paginated data.
By recursing through the pages, it prevents the need to manually handle each page fetch. This keeps component logic simple. The hook encapsulates the pagination logic from the UI code. Developers using this hook only need to specify how to fetch each page. The hook handles the rest.
Challenges:
Tech Stacks: React Hook, TypeScript, Type Sytems knowledge
Site: https://www.npmjs.com/package/use-recursive-fetch-paginate
Project demo shows how I built React components from scratch using the Component-Driven Development (CDD) approach with focuses on creating robust, performant, and type-safe components.
Following best practices like cohesion and separation of concerns. Each component has a clear purpose and handles a discrete task. This makes the components reusable, testable, and maintainable. The result is a modular codebase where components can be quickly understood, modified, and rearranged as needed.
CDD encourages building UIs flexibly while avoiding tightly coupled or duplicated logic. This project demonstrates the strengths of CDD for crafting robust React apps one component at a time.
Challenges:
Tech Stacks: Component driven, React, TypeScript, StyledComponents
Site: https://github.com/natserract/cdd-react
Typescript library for handles local storage in an Observer pattern to enable reactive reading of changes from external stores like local storage. This overcomes limitations of the Storage event API, which does not detect changes made on the same page.
By implementing an Observer pattern with local storage as the subject, this library can monitor changes to local storage made externally and propagate those changes through the observer instances.
Challenges:
Tech Stacks: RxJS, TypeScript
Site: https://www.npmjs.com/package/local-storage-observer
An experimental project implements a Git hooks workflow using Rust. The project explores several APIs:
The project focuses on leveraging Rust's performance and safety to build robust Git hooks. These hooks run custom logic during Git actions like committing code or pushing branches. For example, a pre-commit hook could lint changed files before accepting a commit.
Challenges:
Tech stacks: Rust, Futures
Site: https://github.com/natserract/rust-git-hooks
An experimental library that provide syntatic sugar for if-else statements. The goals of this library are to enable consistent return types, and a cleaner syntax.
Challenges:
Tech Stacks: TypeScript, Type System knowledge
Site: https://www.npmjs.com/package/predict-sugar
CLI for generate page/components base on Templates built on top using shell script.
Challenges:
Tech Stacks: Shell script