Projects

Clear Filter
Recipe Roots project preview

Recipe Roots

List of technologies used:

HTML

HTML logo

CSS

CSS logo

JavaScript

JavaScript logo

PHP

PHP logo

MySQL

MySQL logo

Docker

Docker logo

Apache

Apache logo

Figma

Figma logo
Project description:

This was an assignment for the subject WEB2202 Web Programming at Sunway University. This task was to create a web application using PHP based on the topic of SDG 2: Zero Hunger. Slogan: Your Kitchen Assistant - Create and share your recipes with fellow enthusiasts with easy access to all your cooking needs. Our team consisted of 2 members: Joshua Edwin Rene Bonham and myself. For the first week, we spent a substantial amount of time in designing how the website would look using Figma. A few changes were made in the finished website compared to the initial design in Figma because during the designing phase, we overlooked certain UX features. Because of the strict requirement of the website being done in PHP, 99% of features on the website can be used without JavaScript enabled. The remaining 1% is unusable (editing ingredients for a recipe), but was accommodated for in case JavaScript is unavailable, although UX is enhanced with it (progressive enhancement). Most UI features are done purely using HTML and CSS, including animations and certain functionalities such as modal pop ups. Despite this being a relatively rushed project and our first time working with PHP, this was a good learning experience and the website turned out to be pretty good overall.

Fairu CTF Challenge project preview

Fairu CTF Challenge

List of technologies used:

JavaScript

JavaScript logo

PHP

PHP logo

Apache

Apache logo
Project description:

Fairu was a Capture the Flag (CTF) challenge prepared by SherpaSec for SherpaCTF. Specifically, the author of Fairu is vicevirus. This was a team based CTF but we each solved different challenges, Fairu in this case, was solved by me. It required me to make use of an exploit found in Apache web server to conduct an XSS attack. You may view my full write-up for the solution by clicking the button below.

EventSphere project preview

EventSphere

List of technologies used:

HTML

HTML logo

CSS

CSS logo

JavaScript

JavaScript logo

Figma

Figma logo
Project description:

Assignment for WEB1201 Web Fundamentals. The concept of the website allows people to book venues and contact expert planners for different types of events within Malaysia. The website is fully frontend (no backend) where functionalities are simulated through client-side JavaScript. The latter is done in order to fully showcase the concept of the website. The simulated authentication requires a server to function as it uses the built-in Crypto API in browsers which requires a secure context (SSL/TLS). You may click here for a video presentation on YouTube. The project was done in a group of 4 members: Joshua Edwin Rene Bonham, Lai Yung Wei, Justin Yong Wenn Weii, and I.

MuseCLI project preview

MuseCLI

List of technologies used:

NodeJS

NodeJS logo

JavaScript

JavaScript logo

TypeScript

TypeScript logo

Discord.JS

Discord.JS logo

Git

Git logo
Project description:

Although I have not yet built a full project with Angular, but I have dabbled with it and loved its sophisticated CLI tool implementation and use of decorators. Since I was freelancing as a Discord Bot Developer, I wanted a streamlined way to speed up my development process. Thus, I have created MuseCLI which follows a similar pattern as Angular, but for Discord Bots instead of the web. MuseCLI automatically scaffolds a Discord Bot project within seconds. It also automatically adds music bot features, which I would then modify to fit requirements, as it was a commonly requested. However, MuseCLI became difficult to maintain and has since been abandoned for a simpler system: Yor. Fun fact, it's called Muse CLI, not just because of the music bot feature, but because it was named the μ's idol group from Love Live!

Subtitles project preview

Subtitles

List of technologies used:

Python

Python logo

Django

Django logo

HTML

HTML logo

SCSS

SCSS logo

JavaScript

JavaScript logo

TypeScript

TypeScript logo

Vue

Vue logo

Heroku

Heroku logo

Ubuntu

Ubuntu logo

NGINX

NGINX logo

Git

Git logo
Project description:

In collaboration with Eray Chumak, we successfully developed Subtitles, a web project that addresses the need for a streamlined and user-friendly platform to download subtitles for movies, TV shows, and anime. Eray worked on the frontend using Vue to create a good user experience when browsing. I worked on the backend, integrating OpenSubtitles' API and TMDB's API to retrieve relevant data. We created this together because we both found existing websites for downloading subtitles to be cluttered - especially with ads - and a designed which was outdated. We created Subtitles with a simple goal: to search and download subtitles efficiently without distractions. The project was initially hosted on Heroku. However, we moved the hosting over to Oracle Cloud Infrastructure (OCI) in March 2023 due to Heroku's updates in payment policies. This migration allowed me to learn Bash through SSH and settings up a functional web server using NGINX. This project allowed us to refine our technical skills as well as our teamwork and communication skills, making this a very good learning experience.

Spuiz project preview

Spuiz

List of technologies used:

Python

Python logo

Django

Django logo

HTML

HTML logo

CSS

CSS logo

JavaScript

JavaScript logo

SQLite

SQLite logo

Git

Git logo
Project description:

Spuiz was my first proper, full-stack, web project which lasted from April 24, 2020 to June 7, 2020. I had two reasons when I created this: to learn web application development and to share quizzes with my friends. I learned a lot and gained a very good understanding of how a full-stack web application worked through this project, including user authentication, AJAX requests, and database management. Notably, the project employed SQLite, despite being suboptimal for as a shared production database, I learned a valuable lesson hindsight.