Projects

I've been coding for over 5 years now. I started out programming using the popular language Python, but have since moved on to working with programming languages like PHP, and JavaScript to build websites, desktop apps, and Chrome extensions.

I've built a number of projects, including a machine-learning based AI to play the popular online game 2048 (jupiter.xtrp.io), and live monitor on latest news and statistics of the COVID-19 pandemic (covid19.xtrp.io), and Daily Developer Jokes which includes daily programming-based jokes posted daily. I've recently started experimenting with mobile app development with Flutter and React Native as well.

I'm also active in the open source community, and have contributed to several open source projects and volunteered for a few closed-source ones as well. I completed both the Hacktoberfest 2019 and Hacktoberfest 2020 challenges.

Below are a few notable projects I've built in the last 5+ years. All of these projects and more can also be found on my GitHub profile. Check out what I've done!

— Gabriel Romualdo, October 21, 2020

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.

Rubik's Cube Playground

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.

Car Crash Evaluation Research

evaluates safety of cars based on car crash test videos

Contact Me for a Demo

Open CV, Python, NumPy, Google Colab

Computer Vision Project Using OpenCV in Python; Runs on a Cloud Computing Server

  • This program evaluates EuroNCAP car crash test videos to evaluate car safety.
  • I used Python OpenCV to extract the frames of the image and identify the location of the driver and car wheels in each frame.
  • The program can then determine the velocity of the driver's head during the crash, which determines how hard the person would be hit.
  • I ran the program using Google Colab on a Jupyter notebook. I also used tools like Logger Pro to verify results.

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.

CapitolNet

your new hub for news and information on U.S. politics

Visit This Project  →

github.com/xtrp/capitolnet/

Jekyll, GitHub Pages, HTML, CSS, JavaScript, Ajax

JAMstack with Jekyll, GitHub Pages, and U.S. Government APIs

  • This site uses various APIs from the U.S. Federal Government to compile indexes of politicians and government representatives and other information.
  • The site indexes 538 politicians each listed with phone numbers, office addresses, ages, and more.
  • This site is completely written in JAMstack and fetches from APIs on the client-side.

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.

Programming Articles

30+ educational articles I've written with 100K+ views

Visit This Project  →

Articles on JavaScript, CSS, Python, AI & Machine Learning, and more

  • I write educational programming articles which have been read hundreds of thousands of times.
  • I post articles on my website at xtrp.io and on the DEV Community.
  • On DEV, I was one of the top 500 authors in 2019, one of the top members in 2020, and was featured on the DEV Top 7 list.
  • I frequently interact with the developer community through my educational writing.

xtrp.io — Personal Website

my website, blog, and more

Visit This Project  →

github.com/xtrp/xtrp.io-v4/

PHP, Webpack, Node.js, CSS3, HTML5

Responsive Design, PHP Backend, SEO, Webpack

41.4K+ Views

  • This is my personal website. It contains my blog, projects, résumé, and more.
  • The backend, frontend, UI, and theme of the site was built entirely by myself without any frameworks.
  • It runs on a PHP backend with an API for fetching information from JSON and markdown files.
  • I focused on load-times and SEO for this site — Webpack was used for minification and numerous SEO meta tags are included.
  • I built my own PHP MVC system for this site as a learning exercise, and it currently works very effectively.
  • The site is supported on a number of often unsupported browsers and devices, including Internet Explorer and browsers with JavaScript disabled.

Some of my projects aren't yet included here.

You can see these other projects on my GitHub profile.