Languages

Rust Logo
Rust
Go Logo
Go
TypeScript Logo
TypeScript
JavaScript Logo
JavaScript
HTML Logo
HTML
CSS Logo
CSS
Python Logo
Python
Java Logo
Java
PHP Logo
PHP
C++ Logo
C++
C Logo
C
Solidity Logo
Solidity

Libraries & Frameworks

Svelte Logo
Svelte
SolidJS Logo
SolidJS
React Logo
React
Tailwind Logo
Tailwind
Tokio Logo
Tokio
Hyper Logo
Hyper
Espressif Logo
Espressif
Express.js Logo
Express.js
Electron Logo
Electron
Discord.js Logo
Discord.js
Flask Logo
Flask
Django Logo
Django
FastAPI Logo
FastAPI
Huggingface Logo
Huggingface
Hardhat Logo
Hardhat
Anchor Logo
Anchor

Technologies

Git Logo
Git
Docker Logo
Docker
CMake Logo
CMake
Deno Logo
Deno
Node.js Logo
Node.js
Android Logo
Android
PostgreSQL Logo
PostgreSQL
MySQL Logo
MySQL
MongoDB Logo
MongoDB
Solana Logo
Solana
Ethereum Logo
Ethereum
Arbitrum Logo
Arbitrum

DRAP: Draft Ranking Automated Processor

DRAP Git Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS PostgreSQL

DRAP is the open-source Draft Ranking Automated Processor for the University of the Philippines Diliman, Department of Computer Science's annual draft of research lab assignments. The system automates the submission of lab preferences by students, the selection of draftees by faculty members, the assignment of lab memberships per draft round, the randomization of draftees during lottery rounds, and the dispatch of email notifications throughout the entire draft process.

Previously, this process would have spanned weeks' worth of email exchanges between the department administrators and the faculty members. With the DRAP automation in place, the August 2024 Draft wrapped up within the week. The August 2024 Draft also happened to be the largest draft in DCS history: 111 participating students, 9 lab heads, and 3 draft administrators (i.e., 123 total users).

The DRAP automation is implemented as a full-stack SvelteKit web application with PostgreSQL as the database. To streamline user authentication, the application leverages Google's OpenID Connect provider via OAuth 2.0. Rather conveniently, the OAuth 2.0 integration also enables DRAP to send emails via the Gmail API.

DRAP History Timeline
DRAP History Timeline
DRAP Rankings Page

Hotspotter

Hotspotter Git Android CapacitorJS Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS PostgreSQL

Developed in fulfillment of the final requirements for my Bachelor of Science degree in Computer Science, Hotspotter is an open-source incentivized crowdsensing system that collects, maps, and visualizes Wi-Fi and cellular data to pinpoint hotspots and dead zones. The system is composed of three main subsystems:

  1. The database subsystem is responsible for (1) the persistence of user data, user-submitted readings, and leaderboards and (2) data aggregation for map visualization. Hotspotter uses the PostgreSQL database management system for all queries and mutations in SQL. To improve the efficiency of geospatial queries, Hotspotter leverages the H3 hexagonal hierarchical geospatial indexing system by Uber Engineering for generating, querying, and aggregating data points. The hierarchical index, which enables Hotspotter to aggregate data at varying resolutions, is especially useful for optimizing download times by pruning viewport-occluded data points from the map visualization.
  2. The web subsystem interfaces with the database subsystem. It is responsible for marshaling HTTP requests as SQL queries to the PostgreSQL database. The web server is a Representational State Transfer (REST) Application Program Interface (API) that returns SQL results in JSON format. The API endpoints service the dynamic interactions that the front-end user interfaces would require (e.g., data uploads).
  3. The mobile subsystem features an Android mobile application that leverages built-in sensors in modern smartphones to collect and upload data on nearby Wi-Fi access points and cellular network signal strengths. Under the hood, the mobile application is a front-end Svelte web application wrapped inside an Android WebView application. Low-level system calls into the Android API are marshaled by customized handwritten Java plugins for the CapacitorJS framework.

Field work was then conducted in eight sitios of Barangay San Lorenzo, Norzagaray, Bulacan to validate and stress-test the system under the extreme network conditions of Geographically Isolated and Disadvantaged Areas (GIDAs). In the end, the mobile application's passive sensing, collecting, and caching of data successfully operated even in the most isolated areas without an internet connection.

Wi-Fi Map of UP Diliman in Hotspotter
List of Cached Readings in Hotspotter
Data Collected by Readings in Hotspotter
4G Map of Quezon Memorial Circle in Hotspotter

Dapped Out!

Git Solana Anchor Rust Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS

Dapped Out! is an open-source timing-based casino game built on the Solana blockchain. The objective of the game is simple: try to press a button as close to a targeted marker as possible. The closest contestant to the target wins the greatest share in the contested pot.

The application accepts any valid token in the Solana blockchain as a currency for contests. When creating a new contest, simply point it to the mint account of the token being transacted. For instance, the USDC coin may be transacted by pointing the contest to the mint address EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v. For convenience, it is also possible to create (only) one brand new program-derived user-generated token instead. The creator has the privilege of minting new supply as well as transferring tokens to other wallets.

Users may now join the existing contest by staking some tokens into the shared pot. They now try their luck in timing the meter as closely as possible. At any point in the future, the contest host may close the contest to finally distribute the winnings in proportion to the accuracy of each contestant. Past contests are archived for future audits.

The game is implemented as an installable progressive web application powered by Svelte in the front end. In the back end, the game logic runs on Solana programs written in Rust with the Anchor framework.

Botoken Mint Page
Botoken Contest Page

Botoken

Git Ethereum Arbitrum Hardhat Solidity Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS

Botoken is a simple open-source polling system for decentralized autonomous organizations. Polls, proposals, motions, and referendums are published in the Ethereum blockchain for permanence and transparency. Voting power is then quantified as fungible tokens that the organization controls and regulates. Members within the organization thus "spend" their voting power (i.e., fungible tokens) on polls to express their consent or dissent on organizational processes. The "tokenomics" of this setup enables an interesting exploration into self-balancing cycles of tokenized voting power.

The main user application is an installable progressive web application powered by Svelte that interfaces with Arbitrum, a Layer 2 blockchain technology on top of Ethereum. The back-end logic is implemented and deployed as a Solidity smart contract.

Botoken Poll Page
Botoken Admin Page

ACDA: Aggregated Crash Data Analytics

ACDA Git Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS PostgreSQL

The Aggregated Crash Data Analysis (ACDA) is a component of Project CREATE by the Intelligent Systems Laboratory (ITSLab) of the National Center for Transportation Studies (NCTS). ACDA is a comprehensive solution designed to generate crash data reports and statistics to help policymakers and officials promote road safety in the Philippines. This solution combines data from various sources, including police reports, hospital records, and other data repositories collected by the Philippine Integrated Traffic Incident Database (PITAD), to create a compsrehensive view of road safety incidents in the country.

Under the hood, ACDA is an installable full-stack progressive web application powered by SvelteKit with PostgreSQL as the database. To speed up the geospatial queries used in map visualizations and data aggregations, the back-end server extensively leveraged the H3 geospatial indexing system developed by Uber Engineering. The front end then renders the data in a Svelte application via Chart.js.

This application was completed as a service project of the UP Center for Student Innovations, where I served as the lead developer of the entire project.

ACDA GIS Page
ACDA Analytics Page
ACDA Help Page with Filters

UP CSI Website

UP CSI Git Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS

The UP Center for Student Innovations is a student-oriented organization aimed towards the enhancement of student learning from the University of the Philippines Diliman, Department of Computer Science by working with real-world projects. As part of my 2023-2024 term as the Director for Engineering, I was tasked to lead the development and deployment of the organization's official website—a project that had previously been postponed over the years.

The website is an open-source static website powered by SvelteKit and developed in the open by UP CSI's members.

UP CSI Home Page
UP CSI Events Page

HATiD: Helpdesk and Ticketing Dashboard

HATiD Git Node.js TypeScript JavaScript Svelte HTML CSS TailwindCSS PostgreSQL

HATiD is an open-source Helpdesk and Ticketing Dashboard powered by SvelteKit that aims to modernize ticketing systems such as the popular osTicket. The project was initially developed as part of the 2023 internship program at the University of the Philippines Diliman, Department of Industrial Engineering and Operations Research.

HATiD Chat
HATiD Labels in a Chat

Drippy IoT

Drippy Git Rust Tokio Hyper Espressif TypeScript Svelte HTML CSS PostgreSQL

Drippy is an open-source Internet-of-Things (IoT) system that records the water flow rate of an outlet in a household over time. Periodic reports are aggregated in the cloud so that stakeholders (e.g., customers, the water company, etc.) may access a time-series representation of water consumption through a dashboard interface on the Web. The project was ultimately a Top 3 Finalist in the IoT Cup 2023 hosted by the University of Philippines Diliman Department of Computer Science.

Aside from data analytics, Drippy’s marquee feature is its ability to detect leaky pipes. As soon as the IoT device detects sufficient conditions for leakage, it automatically closes a master valve in the same pipe to stop the wasted flow of water. A prominently positioned LED lights up to indicate the actuation of said valve. Through the web dashboard, a customer/user may remotely release the valve. Inversely, they may also remotely close the valve (under normal operation) should the need arise. Thus, the IoT system reactively guards against wastage due to leaks and overconsumption.

login page for Drippy dashboard
Drippy dashboard

The ESP32 firmware is open-source and written in Rust on top of C bindings to the ESP IoT Development Framework, which are provided by Espressif Systems themselves. All cloud interactions (backed by a PostgreSQL database) are handled by an open-source centralized web server written in Rust with the Hyper HTTP framework on top of the Tokio asynchronous runtime. Finally, the dashboard is a web application written in Svelte.

schematic diagram for Drippy circuitry
Drippy testbench on actual hardware
enclosed circuitry for Drippy and its ESP32 chip

DocTrack

DocTrack Git Deno TypeScript JavaScript Svelte HTML CSS PostgreSQL

DocTrack is an open-source mobile-first document tracking system built for the modern age. It reimplements and improves on the DRS by the UP ITDC by leveraging PWA technologies for:

Wherever possible, the project utilizes a TypeScript-centric application stack. With Svelte in the front end, TypeScript ensures that events, messages, and interactions between UI components remain consistent. In the back end, Deno facilitates the development of robust type-safe HTTP request handlers for the REST API.

DocTrack Mobile
DocTrack Desktop

pal.ai

pal.ai Git Deno TypeScript Svelte HTML CSS Python Hugging Face

The pal.ai project is an installable open-source mobile-first progressive web app that uses images of rice leaves to identify rice leaf diseases.

In the back end, we use a minimal Deno Deploy server that proxies the Hugging Face Hosted Inference API, which interfaces with a model that uses a BEiT vision transformer model to classify images of rice plants for the presence/absence of diseases. The model is pre-trained using ImageNet 22k then finetuned using the PH Rice Leave Diseases dataset. The model achieves 95% accuracy using the dataset test set despite having only 1120 training data points.

In the front end, pal.ai is an installable progressive web app (PWA) written in TypeScript with the Svelte framework. It uses the Parcel build tool for asset bundling, packaging, and optimization. The PWA allows users to upload their own images of rice plants for classification.

pal.ai home page with file upload and camera controls
pal.ai results page showing 79.28% confidence in Healthy classification

SoundRave

Git Node.js Express.js HTML CSS JavaScript MongoDB

SoundRave was an aggregator app for new music released by a user's followed artists on Spotify. At the time, the news feed was missing from Spotify's features. The app aimed to fill in this hole.

The UI is primarily rendered by the server via the Express framework for Node.js. For data persistence, MongoDB is used as the database and cache for Spotify API calls.

SoundRave Mobile
SoundRave Desktop

Chrozone

Chrozone Git Rust Tokio Hyper Deno

Chrozone is a Tokio-powered Discord bot written in Rust that provides time-based utilities via slash commands. One of its primary features is to format a given date as a dynamic timestamp message (as seen in the screenshots below).

For global Discord communities that have special timezone considerations, Chrozone empowers users to send timezone-adaptive announcements. No need to convert the timezones yourself! Let Chrozone do the work.

Chrozone Autocompletion Menu
Chrozone Preview Result

Quizzo

Quizzo Git Rust Tokio Hyper Deno PostgreSQL

Quizzo is a Tokio-powered Discord bot written in Rust for hosting limited-time quizzes. With Discord's built-in message components, Quizzo provides an easy-to-use interface (and a trivially scalable setup) for large-scale quizzes with many users. When the quiz timer expires, Quizzo notifies everyone in the channel which users answered the quiz correctly. The pioneer use of message components differentiates Chrozone from the other bots in the market which use clunky reaction-based polling mechanisms.

Quizzo Chat Output

UDP Multicast Chat

Git Rust Tokio

The UDP Multicast Chat Project is a basic chat application written in Rust. The front-end GUI uses the popular egui library to render the updates from the back end. Meanwhile, the back end is a Tokio-powered server that listens for UDP messages over a specified multicast address. The same multicast channel is also used for sending new messages. This setup effectively allows multiple hosts in the local area network to communicate with each other via a common UDP multicast channel.

UDP Multicast Chat Preview

Snake Clone with SDL2

Git C++ CMake

Using the popular SDL2 library, the sdl-basic-snake project reimplements the classic game Snake with modern object-oriented C++20 code.

In line with the theme of modern best practices, the project also uses CMake as its cross-platform build system generator. Assuming the necessary system dependencies have been set up, the project may be built and run on any platform.

Snake Score 1
Snake Score 6
Snake Score 16

A Block of Optionals!

Git Rust

The option-block crate is an open-source Rust package that provides a basic direct address look-up table, where empty slots are tracked by a single bit mask. Although it is rather simple, this is a fundamental data structure in embedded development, where memory constraints especially matter.

From the pull request dlkj/usbd-human-interface-device#89 by @jedrzejboczar:

Currently, heapless::FnvIndexMap is used to store idle times for reports, which takes 260B (out of 460B for whole RawInterface) to store at most 32 u8 values. This PR changes it to use option-block which basically is [u8; 32] with u32 bitmask of "used" slots, which takes 36B (RawInterface is now 236B)... In my use case, with 3 HID interfaces, this saves 672 bytes of RAM usage, while I also observed minor improvement in code size—usbd-human-interface-device takes 406 bytes less space.