All Projects

Design System

This is my personal design system based on Atomic Design by Brad Frost. This includes my theme and colour palette (used on this portfolio website), component primitives built on top of React Aria and RadixUI, and component composites constructed by integrating multiple primitives.

I have created a series of websites for hypothetical businesses to showcase the adaptability and versatility of this design system. An example is LearnCo, a conceptual project inspired by online learning platforms like Coursera.

TypeScript
ReactJS
TailwindCSS
Vite

Todoist Monorepo

For this project, I aim to create a complete working template of a production-ready, full-stack application. I chose a Todo app because it is easily modifiable to cover the majority of CRUD operations in other applications. To prioritize functionality of the app, I am replicating Todoist's user interface instead of creating my own custom design.

It is hosted in a monorepo with several packages. It includes a static landing page or marketing site, serving as the initial point of contact for users. The web app features user authentication to enable personalization and ensure security. It also has a UI component library package that is shared by the different applications. In addition to the web, the project extends to mobile platforms with dedicated iOS and Android apps, and the backend of the application is structured around an API that communicates to a relational database in order to serve the mobile and web frontends.

TypeScript
ReactJS
NextJS
Vite
React Native
NodeJS
ExpressJS
MySQL
TailwindCSS
Redux
RTK Query
Vitest
Supertest
Turborepo

ProSearchX

A wrapper around Google Search, designed specifically for professionals and power users who seek a more efficient and effective way to unlock Google Search capabilities.

My inspiration for this project is I often find myself modifying initial search queries to obtain more relevant results. For instance, appending 'StackOverflow' to a programming question, or searching for an error in a recent version of a library but getting results from years ago. So if your work relies heavily on internet research, this might just be the tool for you.

JavaScript
ReactJS
Vanilla CSS

Soma Landing Page Redesign

A much needed overhaul of Soma's online presence.

TypeScript
ReactJS
Vite
TailwindCSS
Vitest

Google Search Clone

A clone of Google Search with instant real-time search results using Custom Search Engine (CSE). My motivation for this project was to create a scalable architecture of a React project that employs the principles of Bulletproof React.

JavaScript
ReactJS
Vanilla CSS

Snake Xenzia Python Game / UDP Pinger

This was the final project of my system software engineering course at UBC. The first part of the project implements a graphical Snake game that utilizes Python's multithreading module to improve performance, and queue module to ensure safe multithreading.

The second part of the project was focused on network communication, featuring a client-server architecture that operates using the User Datagram Protocol (UDP). It is a pinger application that simulates the variability of normal Round-Trip time by having the server randomly wait for some time between 5 to 50ms before responding. The application also imitates real-world packet loss scenarios ( the server has a 10% probability of randomly ignoring a message or request).

Python
Tkinter

Coruscant Cafe - Custom Webpack SPA

This vanilla JavaScript application simulates the sophisticated operations of frontend Single Page Application frameworks, but it is uniquely built without relying on these frameworks. The key to this is a custom webpack configuration that is designed to bundle all the JavaScript, CSS and image source files into a bundle that is efficiently injected into a div in starting HTML file.

It is a website for a fictional cafe set in the Star Wars universe and is one of my favorite designs among the websites that I've built (I plan to make it mobile responsive later).

Vanilla JavaScript
Vanilla CSS
Webpack
HTML

Unbeatable TicTacToe

A vanilla JavaScript project that allows a human player to challenge an AI opponent that is programmed to be unbeatable. The app dynamically manipulates the DOM with JavaScript methods to offer a seamless and interactive user experience without page reloads, similar to those created by Single Page Application frameworks like Vue or React.

The project implements the module pattern which provides a level of encapsulation to JavaScript similar to OOP languages like Java. The algorithm used for the unbeatable player is the minmax algorithm that always selects the move with the greatest payoff - either minimizing user's payoff or maximizing bot's payoff in the next move or both.

Vanilla JavaScript
Vanilla CSS

Metal Detector (PIC 32-bit MicroController)

A metal detector using inductance changes in a magnetic coil to detect nearby metals. The inductance changes are converted to frequency variations using a Colpitts oscillator implemented using NOT gates from discrete MOSFETs. The PIC32 MicroController board is programmed in C to give audible feedback on the kind of metal detected (video demo on GitHub).

C
MicroControllers

Drag and Drop Demo app

A kanban-style drag and drop app built in preparation for implementating a similar feature in the Lab Management System (LMS) web app that I was working on at the time.

JavaScript
ReactJS
Styled Components

Sketch Application

An online sketchpad built to improve my understanding of JavaScript DOM manipulation methods. The app has 'change colour' and 'erase drawn sketches' functionality.

JavaScript
Vanilla CSS
HTML

Liquid Level Detector (EFM 8-bit MicroController)

A liquid/water level detector to aid visually impaired people to serve drinks. It provides audible output of how full the cup is in 10% increments and says 'cup is full' when it reaches 100%. The liquid level is also displayed on a 72 MHz LCD display and the EFM8 board is programmed in 8051 Assembly (see video demo and in-depth explanation on GitHub).

Assembly
MicroControllers

Blue Horizon Weather App

A weather forecast app that shows Vancouver's realtime weather forecast by default but also allows users to search the weather of specific cities. The main motivation for this project was to improve my understanding of asycnronous JavaScript and working with APIs.

Vanilla JavaScript
Vanilla CSS
HTML

Admin Dashboard

A simple admin dashboard built with CSS Grid for layout. My motivation for this project was to learn more about CSS Grid.

Vanilla CSS
HTML

Signup Form

A simple sign up form built in order to understand how HTML forms and validation.

Vanilla JavaScript
CSS
HTML

More projects coming soon. Press G to see all my public GitHub projects.