PROJECTS
RESPONSIVE WEB DESIGN
TRIBUTE PAGE
Simple Tribute Page with built-in responsiveness and semantic HTML
mark-up.
Github source code
SURVEY FORM
Simple HTML Form markup with CSS Styling with CSS Grid layout adjustment
for larger viewport.
Github source code
PRODUCT LANDING PAGE
Sample Product Landing Page with extensive use of CSS Grid and Flexbox for
Layout.
Github source code
BOOTSTRAP FRAMEWORK
CAR WORKSHOP LANDING PAGE (www.swsmotor.com.my)
Fully Functional Website built for Car Workshop Company and hosted on actual domain. Features include:
- Navbar and page responsiveness built using Bootstrap.
- WowJS framework used for Scrolling animation.
- Embedded Google Map location.
- Contact Form feature using embedded Google Forms.
MEDICAL CENTER LANDING SITE TEMPLATE
Fully Responsive website built purely based on Bootstrap components and plugins.
- Minimal CSS markup used.
- Override Bootstrap default styles only when necessary using '-custom' namespace in CSS, consistent with best practices.
- Full use of Bootstrap components and plugins including Modal, Carousel, Scrollspy, Nav, Navbar, Forms, Popovers, Layout.
- Modified Carousel,Popover & Modal Plugins using JQUERY.
ReactJS
RANDOM QUOTE MACHINE
Provides random Inspirational Quotes. User can share quotes using Twitter.
Built using ReactJS.
Github source code
MARK DOWN PREVIEWER
App automatically parses Markdown format to HTML5. Built using ReactJS
and styled using Bootstrap layout.
Github source code
DRUM MACHINE
Built using ReactJS. Including keydown features. Styled using
Pure CSS.
Github source code
JAVASCRIPT CALCULATOR
A Fully Functional Calculator that can chain mathematical operations
together. Built using React.
Github source code
POMODORO CLOCK
A Countdown Clock that uses the Pomodoro technique and alternates between
Session Timer and Break Timer. The length of the Timers are customisable and can be reset. Built using React
and Settings UI is styled using Bootstrap Modal module.
Github source code
D3 DATA VISUALISATION
D3 BAR CHART with Dynamic filtering
United States GDP
Github source code
D3 Scatterplot
Doping in Professional Bicycle Racing
Github source code
D3 HeatMap
Monthly Global Land-Surface Temperature(Celcius) 1753-2015
Github source code
D3 Choropleth
United States Educational Attainment - Percentage of adults age 25 and
older with a bachelor's degree or higher (2010-2014)
Github source code
D3 Treemap
Kickstarter Pledges - Top 100 Most Pledged Kickstarter Campaigns Grouped
By Category
Github source code
CLASSIC GAMES
SNAKE
Built using PURE HTML/CSS/VANILLA JAVASCRIPT.
- Game designed using OOP principles using self-contained Objects with its own properties and functions.
- Rendering is done using DOM API.
- Responsive Design.
- Controls draggable on Touch Screens using Touch API.
SPACE INVADERS
Built using vanilla JavaScript rendered with HTML CANVAS using OOP Principles (more performant than using DOM API
due to GAME having significantly more moving parts compared to SNAKE GAME).
Github source code
MICROSERVICE
TIMESTAMP MICROSERVICE
This service accepts a valid date (either in the format YYYY-MM-DD or in UNIX timestamp seconds) submitted as part of the GET METHOD. It will return a JSON object with UNIX and UTC time properties of the submitted date. If an invalid date is given, it will return a JSON object stating so.
- Built using NodeJS and ExpressJS.
- Hosted on Netlify.
- Server-side API is built using Netlify's serverless AWS Lambda Functions.
FILE METADATA MICROSERVICE
This service accepts a single file upload and will return a JSON object with name, type and size(in bytes) properties of the uploaded file.
- Built using NodeJS and ExpressJS.
- Hosted on Netlify.
- Server-side API is built using Netlify's serverless AWS Lambda Functions.
HEADER PARSER MICROSERVICE
This service parses your GET request header and returns your IP address, language, operating system and browser specs.
- Built using NodeJS and ExpressJS.
- Hosted on Netlify.
- Server-side API is built using Netlify's serverless AWS Lambda Functions.
URL SHORTENER MICROSERVICE
This service accepts a VALID URL and will return both the original URL and the shortened URL in a JSON response. User can pass the shortened URL to the API and it will redirect the user to the original URL website. Service will return a JSON error if user pass an invalid URL (either invalid website name or invalid protocol ie HTTP/HTTPs/ftp).
- Built using NodeJS and ExpressJS.
- Database - MongooseJS and MongoDB.
- Async/await ES6 Javascript functions used in interaction with Database.
- Hosted on Netlify and server-side API is built using Netlify's serverless AWS Lambda Functions.
EXERCISE TRACKER MICROSERVICE
This service is an exercise tracker and allows users to track their user (id and name) and exercise data (description, duration and date completed) through the API in JSON form. Also allows filtering of exercise data. Data is stored in MongoDB (document database).
- Built using NodeJS and ExpressJS.
- Database - MongooseJS and MongoDB.
- Async/await ES6 Javascript functions used in interaction with Database.
- Hosted on Netlify and server-side API is built using Netlify's serverless AWS Lambda Functions.
Accounting Software
Protocount
Fully functional Web-Based Accounting Software prototype built to imitate an off-the-shelf commercial accounting system Autocount. Built as a Single Page Application (SPA) using the following technology stack:
Front-End
ReactJS, ReactRouterJS for client side routing, Bootstrap (framework for CSS)Back-End and Database
NodeJS (Javascript runtime web server), ExpressJS Framework (lightweight framework for NodeJS), NodeJS-MySQL driver (connector for database)Database
MySQL (relational database - community version database)Development tools
Git (version control), Create-React-App (development tool for ReactJS), MySQL Workbench (schema for MySQL)Development hours:4 months (300 hours)
Live Version (Hosted on Heroku) [Username:protocount Password:password]
Github source code (Front end)
Github source code (Back end)
Blog (How I made the App)
Chat Application
Proto Chat
Simple chat app built to mimic normal chat applications. Interface optimised for user experience. Application features stated in /app-info.
Front-End
- Native HTML,CSS and JS (server-side rendered using PUG template engine). Pug compiled functions i.e. modalTemplate.js (compiled using Pug-CLI) are used in scripts on client side to ensure code reusability and to simplify development.
- Bootstrap for styling.
- Socket.io on client side.
Back-End
- NodeJS and ExpressJS.
- Socket.io for websocket interface to enable real time chat messaging.
- MongooseJS (Object Data Modelling and connector for MongoDB database).
Database
- MongoDB Atlas (Document-based NoSQL database).
Authentication
- PassportJS for OAuth 2.0 federated authentication (Google and Facebook login).
- Express-SessionJS for managing user sessions and authentication.
Development hours:2 weeks (70 hours)
Live Version (Hosted on render.com) [create new user account or login using Google or Facebook]
Github source code
Ethereum Geo
A prototype landing page powered using NextJS as a fullstack framework (App router) and D3.js showing Ethereum South East Asia Ecosystem Partners and Affiliates.
The page has an interactive globe that pans and zooms according to user interactions and display more information about the entities.
I bootstrapped the page as a prototype as requested by Ethereum Foundation to demonstrate project viability using existing component templates and styling based on the official Ethereum website Ethereum.org
and integrated the interactive globe into the website using existing data.
Styling Framework
- ChakraUI
Development hours:2 weeks
Live Version (Hosted on vercel.com)
Github source code