Projects

A list of my technical projects ranging from applications, open source tooling, and experiments in University.

Svelte Headless Table

Unopinionated and extensible data tables for Svelte.

Build and design powerful datagrid experiences while retaining 100% control over styles and markup.

Svelte Headless Table is designed to work seamlessly with Svelte. If you love Svelte, you will love Svelte Headless Table.

a screenshot of the documentation page for Svelte Headless Table

Leptos Llama

A generative AI chatbot built with server-side and front-end Rust
  • Rust Rust

I explored building a full-stack application purely in Rust.

The front-end is built with Leptos and the server-side capabilities are powered by Actix Web. The backend uses Rustformers LLM to run a large language model on-machine for the AI responses.

a screenshot of a chat with the chatbot

Audio Thumbnail Generator

CS424 Image Perception
  • Next.js Next.js
  • Flask Flask
  • TensorFlow TensorFlow

As part of our final project, we built a prototype application to generate image content from audio files using generative artificial intelligence.

This is a preliminary step in improving audio file management by automating the process of creating file preview thumbnails. Users would have an easier time visually identifying their content, reducing time and effort required for file management.

a screenshot of a generated thumbnail for an audio clip of a siren
a screenshot of a generated thumbnail for an audio clip of a jackhammer

Perfect Clear

A real-time Tetris perfect clear solver.
  • Rust Rust
  • WebAssembly WebAssembly
  • TypeScript TypeScript

An interactive and real-time perfect clear solver for Tetris.

The solver algorithm is written in Rust and uses multiple heuristics to achieve acceptable performance. It is then compiled to WebAssembly for native performance in the browser.

a game of tetris where a perfect clear is achieved

Slipbox

Never forget video ideas you find.

Slipbox is a cross-platform organizing tool for the modern short-form video-focused Internet user. It was a venture to build a platform that saves videos seamlessly, searches videos quickly, and reminds users of their saved videos effectively.

While developing the platform, it quickly became clear that the feature was not sufficiently viable as a business and was ultimately put on pause.

a screenshot of the homescreen of the Slipbox app
a screenshot of saving an idea to Slipbox

ThreeJS Journey

Learning WebGL and 3D rendering on the web
A screenshot of my ThreeJS Journey project

Microcontroller Pomodoro Timer

A hardware pomodoro timer built on the ESP32 Development Board
  • C++ C++

A self-led experiment with microcontroller development using the Arduino framework on an ESP32.

I focused on understanding how to read circuit diagrams, how hardware components interface with the microcontroller via its pins, and how hardware interrupts are handled for subsystems like the hardware timer.

a photo of the microcontroller with the current timer time.

Wave

A simple and beautiful pomodoro app to keep you focused.
  • React React
  • React Native React Native
  • Chrome Chrome
  • Firebase Firebase

Wave is a simple pomodoro timer to help you stay focused while working. It alternates between a 25 minute focus mode and a 5 minute break mode while displaying beautiful animations.

Wave also keeps your timer in sync with multiple devices and lets you stay on top of your timers with alert notifications!

All your activity is anonymised and no longer stored after two days. Instead, Wave uses a data-minimal algorithm to provide recommendations for the best hours of the day when you are the most productive without compromising your privacy.

a banner with multiple android phones using my pomodor app

meetwhen.io

A beautiful and mobile-friendly group scheduling application.
  • Svelte Svelte
  • SvelteKit SvelteKit
  • TypeScript TypeScript
  • TailwindCSS TailwindCSS
  • Node.js Node.js
  • Firebase Firebase
  • GraphQL GraphQL

meetwhen.io helps you schedule meetings and hangouts around the world. Quickly create and join meets with no sign up required, or sign in with an account to keep track of your previous and upcoming meets!

You can also add relevant links and details for easy access later and see when your friends are the most available.

a screenshot of a scheduling application I built called meetwhen
a screenshot of the event creation interface for a scheduling application I built called meetwhen
a screenshot of a user's profile for a scheduling application I built called meetwhen

HelloWorld

A mobile AR application that lets you explore the world from your home.
  • React React
  • React Native React Native

CODE_EXP 2021 · 1st Place

HelloWorld is a quick hackathon project that provides a taste of tourism when travel was restricted during the pandemic.

You can decorate your personal spaces with virtual landmarks and attractions to immerse yourself in the cultural icons of your favorite destinations. Once you’ve built your world, hop onto the Discover page to learn more about each landmark.

a screenshot of an augmented reality application I built called HelloWorld
a screenshot of the discover page, which includes a map, for an augmented reality application I built called HelloWorld

Techtris

A simple showcase site.
  • Svelte Svelte
  • SvelteKit SvelteKit
  • TypeScript TypeScript
  • TailwindCSS TailwindCSS
  • Node.js Node.js

Techtris was created by a small group of friends who wanted to work together on hobby projects, hackathons, and group assignments.

The showcase site was primarily built to develop a simple understanding of Three.js.

a screenshot of a showcase website

Ally UI

An open-source widget library for building high-quality, accessible web applications on all UI frameworks.
a screenshot of the documentation page for Ally UI

svelte-popperjs

Popper for Svelte with actions, no wrapper components or bindings required.

svelte-previous

A Svelte store that remembers previous values.

svelte-keyed

A writable derived store for objects and arrays.

svelte-subscribe

Subcribe to non top-level stores in your Svelte template.

svelte-render

Manage complex Svelte behaviors outside of templates with full type safety.

vim-colorscheme-icons

Colorize vim-devicons with the current colorscheme.

tailwindcss-global-dark

A TailwindCSS variant for class-based dark mode with CSS Modules.

tailwindcss-extrude

Extrude your elements for a retro look!

tex-er-diagram

A LaTeX package for drawing entity-relationship diagrams quickly.

sequence-crdt

An implementation of a sequential conflict-free replicated data type in C using LSEQ.

Advanced Threat Detection for GovTech Commercial Cloud

CS480 Final Year Project
  • Amazon Web Services Amazon Web Services
  • Microsoft Azure Microsoft Azure
  • Google Cloud Platform Google Cloud Platform

For our Final Year Project, we developed pipelines for efficiently ingesting data logs, building machine learning models, and deploying those models on AWS, Azure, and GCP.

This involved an analysis and exploration of the many services provided by the different cloud providers to meet the functional requirements for the pipelines. In the process, we designed and trained basic machine learning models using the pipelines developed.

Kopi Time, Microservice Orchestration

CS302 IT Solution Lifecycle Management
  • TypeScript TypeScript
  • Python Python
  • React React
  • Next.js Next.js
  • TailwindCSS TailwindCSS
  • Node.js Node.js
  • Flask Flask
  • GraphQL GraphQL
  • REST REST
  • RabbitMQ RabbitMQ
  • MySQL MySQL
  • NGINX NGINX
  • Docker Docker

Kopi Time is a digital marketplace for coffee-related art and collectables.

We implemented a reliable and robust microservice architecture to handle market trading functionality, listing expirations, and user notifications.

Most notably, we developed a framework-agnostic implementation of the saga pattern we named the Saga Engine to orchestrate transactions and compensating actions across multiple microservices.

a screenshot of the profile screen on Kopi Time

COMO Club, Cloud Architecture

CS301 IT Solution Architecture
  • TypeScript TypeScript
  • Python Python
  • Svelte Svelte
  • SvelteKit SvelteKit
  • TailwindCSS TailwindCSS
  • Flask Flask
  • REST REST
  • RabbitMQ RabbitMQ
  • MySQL MySQL
  • NGINX NGINX
  • Docker Docker
  • CloudFormation CloudFormation

We designed a highly available and maintainable backend architecure for our SMU-X sponsor – COMO Group.

Most notably, our architecture fails gracefully when third-party external services are unavailable.

To do so, we continuously check the health of external services. When an external service fails a healthcheck, we queue all client requests and notify users of the temporary disruption. Once the external service is healthy, we automatically trigger a recovery phase and continue with regular execution.

Wok N Roll, Product Development and Management

CS206 Software Product Management
  • TypeScript TypeScript
  • Java Java
  • Svelte Svelte
  • TailwindCSS TailwindCSS
  • Spring Spring
  • REST REST

We conducted market research and discovered an unfulfilled niche for a comprehensive database and search engine for hawker food in Singapore.

Using this database, we developed a product, risk mitigation strategies, and a feature roadmap for future growth.

the add review page of Wok N Roll
the home page of Wok N Roll
the review page of Wok N Roll

Ryver Bank, API Development

CS203 Collaborative Software Development
  • Java Java
  • Python Python
  • Spring Spring
  • Flask Flask
  • scikit-learn scikit-learn
  • REST REST
  • MySQL MySQL
  • Docker Docker

We designed a simple trading platform for our SMU-X sponsor – Credit Suisse.

Given multiple core functionalities in the requirements, we used microservices to reduce the complexity of each component and enable developers to work semi-independently.

We also developed a simple machine-learning-powered stock recommendation engine.

For our efforts, we were awarded the Best Technical Team achievement.

Simulation of Voting Fairness in Singapore

CS426 Agent-based Modelling and Simulation

We modelled various gerrymandering and Group Representation Constituency allocation strategies using an agent-based simulation to explore the impacts of voter flexibility and distribution on the fairness of representation.

a screenshot of the simulation environment
CS441 Network Security

We emulated a simplified version of the MAC and IP protocol on top of network sockets for our physical layer.

With the emulated network, the project requires a study and implementation of IP spoofing, IP filtering, and packet sniffing. Our group went beyond the requirements to implement private and public network separation, a simple public routing protocol, the ARP protocol, and IP traceback.

Optimizing Hotel Bookings

CS421 Introduction to Machine Learning
  • Python Python
  • scikit-learn scikit-learn

We analyzed data on hotel booking demand and explored a variety of machine learning techniques to predict the cancellation of a given hotel booking based on pre-existing features.