Projects

I've worked on quite a few side-projects, which you can read about below. There are a couple of projects I'm working on at the moment that aren't listed here, because they haven't been released properly yet.

The code for many of my projects is available on my GitHub profile.

Kalva

articles from sources you love, all in one place

Visit This Project  →

github.com/xtrp/kalva

Node.js, Next.js, React.js, Vercel Deployment, Webpack, Babel, PostCSS, CSS Modules

React & Next.js App to Aggregate News Fetched from 100+ Sources

  • This web app fetches news articles from hundreds of sources (such as Bloomberg and the Washington Post) and allows them to be searchable and sortable.
  • It's built in Next.js and React, and uses popular React packages like react-select. It's also completely mobile responsive.
  • I created all of the styling for the site, and no UI frameworks were used.
  • It takes advantage of Next.js' server-side capabilities by fetching articles on the server and caching scraped data.

CubeSimulator

an interactive Rubik's Cube scrambler, solver, and simulator

Visit This Project  →

Webpack, Handlebars, SASS/SCSS, Babel, PostCSS, PWA, WorkBox, Rust, PHP, Vercel Deployment

Mobile-First Progressive Web App Built with Handlebars

  • This project was built with Handlebars and SASS, with source code compiled and minified to a static site with Webpack.
  • I built the visualization functionality first in Rust and PHP to generate images on the server-side, but later opted for a solution in HTML5 Canvas.
  • I built the Cube class to store 3D cube data, process moves, and manipulate the faces, and I built the solver program from scratch as well.
  • The web app is mobile responsive and is built as a PWA using WorkBox. As a PWA, the app works on mobile devices, even when offline.

Coronavirus Live Monitor

the hub for news, information, and latest updates on COVID-19

Visit This Project  →

github.com/xtrp/Coronavirus-Live-Monitor

Python, PHP, JavaScript (ES6), CSS, YouTube API

JAMstack App Deployed Quickly, with Cronjobs, Scrapers, and Third-Party APIs

4.4K+ Views  •  20+ GitHub Stars

  • Includes latest case count numbers, news on the virus from more than 100 countries, and latest media briefings from the WHO.
  • I built and deployed this site in under a week. It reached the front page of Hacker News and has had thousands of users.
  • Python cronjobs are used to update data on the site through a PHP server.
  • The design and UI was written in completely custom CSS without any framework(s).

Jupiter

web-based AI to play the game 2048

Visit This Project  →

github.com/xtrp/jupiter

Webpack, Babel, PostCSS, JS (ES6), HTML, CSS, Web Workers API

ML with MCTS on a Custom Designed, Responsive Web App with SEO

~1,300 Lines of Code  •  3.2K+ Views  •  40+ GitHub Stars

  • Jupiter is a completely machine-learning based AI that achieves the 2048 tile (wins the game) almost 100% of the time. I built and published Jupiter in September 2020, and wrote three articles about the project on my blog.
  • I used web workers, multi-threaded JS, and webpack minification to increase performance, speed, and load-times.
  • I implemented machine learning techniques including the MCTS (Monte-Carlo Tree Search) algorithm in JavaScript.
  • I also wrote a technical article about the AI algorithm used in Jupiter, which reached the front page of Hacker News and was read by thousands of developers.

NY Times Fixer

a program to fix errors in archived NY Times articles

Visit This Project  →

github.com/xtrp/nytimesfixer

Node.js, Vercel Deployment (with GitHub Actions), Webpack, Babel, PostCSS

Webpack Minified Web App Deployed with Vercel and GitHub Actions

  • I identified a common transcription error in archived NY Times articles, which appeared over 300 times in just three notable articles, including the first article in the Pentagon Papers release. My program fixes the errors automatically with ease.
  • I wrote the program in JavaScript to be run on both the web and on a server with Node. The Google Ngram Dictionary and commonality rankings were used to help fix errors in words.
  • I built and deployed a site with a demo of the program using Vercel with GitHub actions.
  • I am currently liaising with a NY Times archivist to see how this program can be of help to their team.

Coronavirus Special Edition

newspaper special edition site on COVID-19

Visit This Project  →

HTML5, CSS3, JavaScript (ES6)

Responsive Site Built Quickly to Showcase News Articles and Coverage

  • I built this site for the Standard (school newspaper), showcasing a timeline of articles, infographics, and more.
  • The site was viewed by thousands of students, parents, and faculty in a matter of hours and received praise from the principal and the head of school.
  • The site got second place in National Scholastic Press Association Best of Show Award (Spring 2020, for News/Feature Package).
  • I personally received merit from the National Scholastic Press Association for my design and programming work on this site.

Daily Developer Jokes

daily dev humor, and the first bot on DEV

Visit This Project  →

Python, Jekyll, GitHub Pages, PHP, Node.js, Puppeteer, Express.js, DEV API

Uses Python Cronjobs with a PHP Server, Node.js for Joke Images, and Jekyll on GitHub Pages

  • Daily Developer Jokes posts developer humor ever day on the website and on the DEV community.
  • The Daily Developer Jokes bot, which posts the daily jokes, is the first ever bot on the DEV community, and uses the DEV API.
  • The bot uses a PHP server to generate joke banners and store images generated with Puppeteer and Node.js.
  • To post jokes daily, a Python cronjobs system was implemented to interface with the DEV API and send email updates to maintainers.
  • The site uses GitHub pages, and jokes are stored as markdown and compiled to a static site using Jekyll and Ruby.

Studio Filters

a clone of Zoom's Studio Effects feature in Python and OpenCV

Visit This Project  →

github.com/xtrp/studio-filters

OpenCV, Flask, NumPy, face_recognition, Python PIL, Python

Edits Facial Features from Camera with OpenCV and Streams the Result to a Flask Server

  • This project takes the user's camera feed and adds customizable facial features like lipstick, facial hair, and eyeshadow.
  • The result of filters is streamed to a local web server using Flask, and can be broadcasted to a LAN server or a virtual webcam.
  • I used OpenCV, NumPy, and the face_recognition package to detect facial features, and PIL to add those facial features to the live video frames.
  • Most of this code was in fact written before Zoom's Studio Effects beta was released in September 2020.

Your Voice, Your Vote

a platform for students to empower change through school student councils

Contact Me for a Demo

Firebase, Google OAuth, PHP, JavaScript (ES6)

Full Authentication and Database System, Google OAuth, and Firebase

  • This project allows students to propose ideas to the student council and for other students to vote on those ideas.
  • The platform is mobile responsive and uses Firebase for Google Sign-In and the database.
  • I used PHP to create a secure, password-protected admin dashboard to approve, deny, or rescind submitted proposals.
  • This system allows students to have more of a voice and for the student council to focus on the things that matter most.

HTML5 Rocket

free, custom designed HTML5 site templates

Visit This Project  →

github.com/html5rocket/

HTML5, CSS3, JavaScript

Responsive, CC0 Licensed Site Templates with Plain HTML & CSS

  • I built HTML5 Rocket as a set of responsive site templates for use without attribution.
  • I designed all of the sites without any CSS or UI frameworks.
  • All of the templates are easily downloadable and customizable from the HTML5 Rocket Website.

Some of my projects aren't yet included here.

You can see these other projects on my GitHub profile.