Projects

My guiding project philosophy is to create something that I want to use or that I know that would solve a problem that I've noticed before. On this page I've grouped together the main types of projects that I've implemented: those for community organizations to solve a problem I've noticed before, and personal projects for things that I wanted to use myself.

Jump to Community Projects
Jump to Personal Projects

Community Projects

I have designed and implemented a great deal of projects, both for myself and the organizations that I have been a part of. Something that I think is really great about programming is how code can be re-used, and how projects can lead into other greater projects. In this way, I tried to capture the process of me developing these projects for the organizations I've been a part of.

Jump to TeCanal
Jump to UMBC SGA
Jump to hackUMBC

TeCanal

TeCanal was a student-run 501(c)(3) nonprofit organization that aimed at providing STEM education and technology resources to underserved areas in Baltimore City. I served as the CTO, CEO, and Director of Technology before the organization was dissolved.

Speedy Math

In October 2016, as my first foray into making educational games, I created SpeedyMath, an customizable math problem game. It started out with only the "Race" mode, where you had to answer as many questions you could in one minute. However, then I added "Practice" mode (later called "Infinity" mode) where there was no time limit, so that students could do math without the pressures of a time limit, more akin to doing a worksheet.

Math Slayer

About a month after first developing Speedy Math, I wanted to create an engaging math game that did not rely on time pressure, as that could stress some students out, making them answer incorrectly. Thus, Math Slayer was born, where each correct answer inflicts damage to the monster character, and an incorrect answer causes damage to the player, until their HP runs out. It started out as its own program, but later on got folded into the Speedy Math umbrella as "Survival" mode.

TeCanal Volunter Portal

The first version of the TeCanal Volunteer Portal (TeCanal Driver) was a MVP of a carpool registration application that I adapted from a hackaathon project that involved Firebase and Angular.js. For each outreach session, a driver would add their car, which would has their name and the number of seats in their car, which allows that number of volunteer signups directly into their vehicle. As time went on, I was able to add more resources about volunteering such as pre-filled waivers/volunteer applications, as well as pages that outlined the reasons why you should volunteer for TeCanal, etc.

Type Racer / Type Shooter

In late 2016, following from success of using Speedy Math at TeCanal STEM tutoring sessions, I knew I also wanted to create some kind of typing game. The computer we were using were low-powered and also there was no internet connection at the centers we were tutoring for, so making our own typing game that could run off an HTML and JS local file seemed like the logical move.

Binary Explorer

Speedy Math and Type Shooter were great games with educational value, but they didn't really teach anything, they only allowed for practice of already learned concepts. For this reason, I created Binary Explorer, a way for students to learn about Binary, especially its connection with ASCII. This game was later improved upon by a TeCanal Intern to add a "Story" mode.

Meme Maker / Webcomic Creator

In March 2017, I discovered Mozilla's X-Ray goggles project, as well as some of their other development activities. This made me recreate one of the lessons about meme-making with a live-reload editor built with CodeMirror. Building on the success of Meme Maker, I made Webcomic Creator shortly after, loosely inspired by Comic Life. This was used in our Creative Coding summer camp that we ran with Creative Alliance.

Read More About Discovery-Based Learning HTML Creation Games

TeCoin

This is an application that was created, but shortly thereafter retired after we decided that we wanted to go in a different direction. The idea was that we wanted for students to be able to earn points to reward good behavior, of which they could then spend for rewards/privileges at a later time. It had a quick interface for students to add/remove points, a leaderboard, and a shop system that would allow students to "purchase" their rewards. While I still stand by this as a good idea, the delayed nature of the gratification of this program didn't produce the results that we hoped.

The Sandwich Algorithm

Inspired by the classic Computer Science activity where you have to instruct someone how to make a sandwich, I wanted to make a coding game that captured that basic premise. I got to building out a JavaScript API and HTML/CSS components for the game, but I never really got around to fully implementing it, due to scope creep and my ideas slowly getting larger for it. I wanted it to be like you were a head chef at a restaurant, and you would be instructing other cooks on how to make sandwiches. You would create code to procedurally make this sandwiches, and the levels would eventually get to use control structures like if-statements and for-loops. However, I never really figured out the game progression and ended up abandoning the project.

AR Turtle

This application was a fun idea in practice, but I never really got around to fully implement it because it seemed like a decent amount of programming would be needed for a mediocre payoff. The idea was that the application would be able to access the webcam data, and then with code, the students would control the Turtle (much like Logo). The Augemented Reality portion still appeals to me, but I think that the amount that students could actually do with Turtle would be pretty limited. If it went the way Vidcode I think that it could be something of promise.

Kids Corner

In April 2018, in an effort to consolidate STEM education resources, I created the TeCanal Kid's Corner. It pulled together all the games I worked on previously, and also added a Free STEM Library. This was a collection of Creative Commons or Public Domain STEM books that I found and had download links for students and their families to use. In the Summer of 2020, we had a Software Engineering Intern program that was able to add new features to my old games, as well as add brand new ones.

Mosaic

In July 2019, I began the year-long development of a JavaScript learning tool. My aim was to decouple JavaScript from HTML/CSS, and instead allow the user to have a environment to receive instantaneous visual feedback while being able to be creative while focusing on JavaScript syntax and concepts. To date this is the TeCanal project that I am most proud of.

Syntax Tutor

In June 2020, as a result of developing Mosaic and thinking of its educational possibilities, I began familiarizing myself with the field of Computer Science Education. Syntax Tutor was the first program in a series of projects that I wrote with the intent to help students practice or learn Computer Science, particularly JavaScript. Syntax Tutor works by showing examples of correct or incorrect syntax examples in order to improve students recognition of syntax errors.

Parsons2Play

Parsons2Play is actually built on top of Mosaic, and my goal was to combine the work of Petri Ihantola, Ville Karavirta (2011) with js-parsons, and Evelyn Stiller (2017) with Program2Play. Parson's Puzzles are about rearranging code blocks to produce the correct result, and Program2Play is where the student has to implement a small part of a game in order to play it, thus providing a goal-oriented programming learning environment. In my case, they are rearranging code blocks with Mosaic code in order to complete a feature within a larger game, and then be able to play it.

Trace Tutor

When I was reading the 2020 ACM Proceedings that were free online due to the COVID-19 Pandemic, I ran across Ruixiang Qi and Davide Fossati. 2020. Unlimited Trace Tutor: Learning Code Tracing With Automatically Generated Programs. I thought it was a really great idea, as this comes up in AP Computer Science a lot, but also is an important skill to have. Unlimited Trace Tutor was only implemented in Java, so I wanted to make a version for JavaScript that also ran on the web. Trace Tutor and Syntax Tutor share a lot of the same UI components and functionality, so it was a pretty straightforward project to implement.

Interactive Video Cards

In September 2020 the COVID-19 pandemic had shut down schools and everyone was learning online, so I wanted to create an application that would allow for TeCanal to produce asynchronous learning content. Existing products like EdPuzzle were similar enough to this, but I wanted this tool to work on our own video content, or allow add-ons onto existing content made by others.

UMBC SGA

While studying at UMBC, I was a Senator for three years (Sophomore - Senior). I focused on creating web applications to increase data autonomy and empower students to take control of their student experience.

Salary Search

As a Freshman in my Spring semester (2019), someone showed me the UMDCP's Salary Search tool, and how cool it was. I knew that UMBC employees were state employees since we are a public university, so after some quick googling, I found the Baltimore Sun's dataset. After cleaning the CSV, I used PapaParse on the frontend to convert it into a JavaScript object to make it easier to work with after fetching.

Open Now

Excited about the seed of the idea of creating applications for UMBC students to use planted by Salary Search, I turned my focus to information centralization and visualization. I found it quite hard to keep track of all of the opening and closing times for all of the various buildings and stores on campus, especially since weekend hours were different. I made this app to show which places were Open Now, Closing Soon, and Closed, as well as displayed the hours. Later on, I also added a section that displayed what the current meal period was. I eventually stopped development on the app because similar functionality was going to be added to our campus web portal, myUMBC.

Transit Activity Guides (TAG)

When I went to the STRIVE leadership retreat at UMBC, I was in a discussion group focused on thinking of ways to improve the weekend life at school. I had used the UMBC Transit system, which is free to all UMBC students, a few times to go into Catonsville and Arbutus, so I thought that was a natural point for providing students with things to do. The Activity Guide was a specific activity that a person could do if they got off at a certain transit stop. I initially wanted to allow users to submit their own, but I eventually decided against it.

Nap Map

Nap Map was an application that was inspired by a poster of the same name that I saw posted around campus by the Office of Health Promotions. I wasn't familiar with mapping libraries when I made the app, so I used a high-res screenshot of the campus map instead, and create a <map> element to allow clicking to view locations. Similarly to TAG, I initially wanted to allow users to submit their own, but I eventually decided against it. I stopped development on this project to get folded into a larger mapping application called Grit Map.

UMBC ID Scanner

UMBC provided handheld barcode laser scanning to scan UMBC IDs for event attendance, but they had a limited amount, which often created bottlenecks at larger events. I used the Quagga barcode scanning API that worked on HTML5 Camera streams, and used the Google Sheets API to automatically record scanned barcodes. It probably would've been better to do server-side barcode analysis, but I didn't/do't have the infrastructure for that. I stopped development on this project because it was kind of impractical to do this on mobile devices, and myUMBC was potentially planning on implementing a QR code for students that would allow for a much better scanning experience.

Meal Breakdown

The next app that I made during my Freshman year was a meal plan analysis tool. I figured out that you could download the data of your meal plan swipes as a CSV, so using the lessons I learned with PapaParse from Salary Search, I was easily able to get the data into a usable state, to which I used D3 to visualize the data. This was a lot of fun to make, in addition to being an excuse to learn D3.

Menu View / Food Notify

In the summer before my Sophomore year, I wanted to develop an idea I had for awhile, an application that would notify you when your favorite meal was being served at the dining hall. I got pretty far in the Node.js version, before I learned that the UMBC infrastructure only allowed for LAMP stack applications. I didn't want to rewrite my work, so instead I just focused on the menu viewing functionality, as the DineOnCampus website was super slow.

Conversation Cards

Our Vice President for Student Affairs, Dr. Young had this stack of cards with various conversation prompts that she had in her office that she would use to kick off meetings with students. In a way to make this endlessly portable, I created a simple web application that allows you to shuffle through the cards to pick a prompt. You can also change the color of the cards to any of the UMBC brand.

UMBC Generator

One of my favorite things to do was to create new meanings for the UMBC acronym. In an effort to make this process more random and potentially more humorous, I made this application that queries a Word API to find words that start with U, M, B, and C to facilitate the process of creating new meanings for UMBC.

Waste Sort

Also in the summer, since I had just learned more about the HTML5 Drag API, I created this waste sorting game as a way to teach students what materials went in which bin.

Wasted Tuition Calculator

During my Sophomore Fall Semester (2019), as a somewhat tongue-in-cheek gesture, I created this application to calculate the amount of tuition money that was wasted if a person skipped their class. It's a simple calculation, but a funny, but also rather powerful reminder of how much your education costs.

Luck Simulator

One of UMBC's most enduring traditions is that before midterms or finals, students will rub the nose of the statue of True Grit (our mascot). During the COVID-19 pandemic, not many students had access to campus, but I still wanted people to be able to rub True Grit's nose for good luck. So in December 2020, inspired by UMD College Park's version, I decided to create one for UMBC and was able to get it pushed out to UMBC students before finals.

Grade Calculator

One of my biggest pet peeves about Blackboard (UMBC's LMS application) is that most times the professor does not configure it to calculate your final grade. Additionally, Blackboard has no ability to to What If grading, like what Canvas LMS has. I sought to create this with an application that can do weighted grade calculations with What If calculations. I also wrote a bookmarklet that would allow students to scrape their grades from Blackboard and import it into the application to facilitate a quicker application onboarding process.

Crime Report Parser / Crime Incident Visualizer

During my Junior Spring Semester (2021), I was finally able to work on a project that had been on the back of my mind for a whole year. I knew about the UMBC Police public incident reports, and I tried to parse it, but I couldn't pull it off. Then I found pdf.js-extract which allows parsing of PDF documents without OCR, and then creating the parser was smooth sailing from there. Then I was able to plot the points on the UMBC Campus MapBox map that was created by the UMBC Sys Admin/Software Development club.

GPA Calculator / Transcript Analyzer

Since UMBC doesn't use the +/- system, I always found online college GPA calculators to be quite annoying, so I set out to create my own. That was easy enough, but then I wanted a way to quickly calculate cumulative GPA which was hard, because I needed a way to import a lot of class data. Then the SGA President suggested the Unofficial Transcript, which was perfect because I just adapted pdf.js-extract for the web, and created a parser for the transcript document. Transcript Analyzer has a slightly more advanced parser, and shows more information as well as lets the user search and sort through their data.

Grit Planner

Some classes at UMBC are only offered during certain semesters i.e. Fall and Winter, or only Spring, etc. This application utilities historical course offering data in order to predict whether a class will be offered during a certain semester or not in order to allow students to more accurately plan out what classes they will take and when. It utilities API data from Gritview to get enrollment information and course offering data.

hackUMBC

hackUMBC is UMBC's hackathon and hackathon organizing student organization. hackUMBC is 24-hour tech innovation marathon where students across the East Coast collaborate to develop ideas to build mobile, web, and hardware projects. HackUMBC invites diverse groups of students to enjoy a weekend of programming, workshops, tech talks, networking, and other fun activities. At the end of 24 hours, participants' projects are presented and judged for different prize categories from sponsors and other organizations.

Hack Check

This first project wasn't officially for hackUMBC, but I actually did it at the hackUMBC Spring 2018 hackathon before I was officially enrolled as a UMBC student. I won third place for this project, but also was able to get a spot on the hackUMBC Tech Team to be able to implement something similar. I ended up integrating the QR check-in concept into Quill, an open-source hackathon registration system initially developed by hackMIT. I still stand by the original vision of Hack Check, that being the social media part, but COVID-19 thwarted my development and rollout schedule.

Quill

Quill is the open-source version of hackMIT's signup system, of which many different hackathons implement. While we never merged anything back upstream, we made some modifications that we thought would make the application experience better for us and the hackers we served. Like I mentioned in the Hack Check section, I added QR codes to the attendee home page so that they could more easily check-in when they got to the hackathon. Additionally, I added a Yellow Triangle next to people's name when they registered with Dietary Restrictions, so that the people at check-in would know to give them a special wristband that would help them later at the event when they get food.

Static Site

hackUMBC was lucky enough to have a talented team of designers that would design assets and other theme-related things for the website, so I did a lot of content management, style fixes, color changes, etc every year to adjust the site for the yearly theme.

hardModeCode

I was watching some competitive programming videos on YouTube as well as practicing Leetcode/Hackerrank problems in order to get prepared for interviews, when I had an idea. What if you couldn't use backspace? Instead you had to start from scratch every time you made a mistake? That's how this idea was born, and it eventually morphed into a platform in which people could self-host it to make it a game. This game idea was perfect for hackUMBC so I brought it under the Tech Team and assigned it to a member to flesh out the architecture more. It went very smoothly, but COVID-19 prevented us from actually trying it since I did not want the first launch to be virtual and try to debug it while people were trying it from all over the world.

Mental Health Resource Site

This site was a space for me to experiment with how hackathons could offer resources to help bolster the mental health of their attendees. The application had reading resources about Imposter Syndrome that I curated, a deep breathing timer application that I created, as well as a relaxing GIF/music experience that was designed by Tirzah, hackUMBC's lead designer. I think that this could definitely be expanded with more reading resouces, but also more interactive applications as well, maybe even a chat feature.

Meetups

One thing that I always noticed at hackUMBC and hackathons in general is that most times people talk to new people at the beginning when they're looking for teams, and maybe new people if they go to a workshop or some event. I wanted to make an application to allow people to plan "meetups" that will allow you to congregate with people who share a commonality in order to forge friendships that last far beyond a hackathon. As is a common theme with my hackUMBC projects, this project was never officially launched because we had a virtual hackathon. This would have translated fairly well to online, I think, but I didn't want the first launch to be virtual.

Personal Projects

My personal projects are often times excuses for me to learn new things and practice new skills. However, this is not always the case, sometimes it is simply to bring an idea I have to life, often times if it is just an application for my own personal use.

Jump to Minimalist Web Applications
Jump to Miscellaneous Projects

Minimalist Web Applications

As a sort of unofficial series, I made a number of web applications that employed the same minimal aesthetic. This was because I copied and pasted a lot of the CSS between the applications, but I used no frameworks, CSS or JS, so each application was implemented just a little bit differently. The thread between all of them was localStorage for persistent data storage/state, very little color usage, and a rendering engine written all in Vanilla JS.

Balance

I found myself incredibly inspired by the User Interface/Experience of A Dark Room by Doublespeak Games, particularly the minimal black-and-white interface with simple buttons and progress bars. I'm only an admirer of games, I don't particularly like playing them, nor do I typically develop them either, but I thought that I would at least try once in the spirit of A Dark Room. I was just playing around with the idea of progress bars and buttons when the idea came up with trying to get the progress bars to the same percentage value. I don't think that this is incredibly engaging game play that will capture you for hours, but I think its a creative and cool concept. However, the utility of this game mostly came from its rooting of the minimal black and white aesthetic in my mind.

Dodue

Coming off of Balance, I knew I wanted to make an actually helpful application, rather than just a toy concept game. I used Notion or just a physical notebook as a way to manage my to-dos, but neither was the Goldilocks solution for me. This is because I wanted to be able to separate the "do" date from the "due" date, meaning I wanted to track when the assignment was actually due, but also when I was planning on doing it. I added a lot of keyboard hotkeys so that all the app navigation and tasks can be done without ever needing to touch the mouse. The systems I created in order to handle keyboard hotkeys, localStorage, and rendering elements were all at least in part reused in my further minimalist apps.

Note Pile

This was the first application that I utilized color in, and that was because I just had to include the most iconic sticky note colors to make the application more skeuomorphic. This was mostly an experiment for practicing drag-n-drop functionality, and as such, the application doesn't have many features. If I worked on it further, I definitely would allow for note deletion, as well as pile formation and drill-down pile navigation, which was my initial vision for the application before I got bogged down in the technical details.

Bucket List

One day I was talking to my friend about their bucket list and while I didn't have a bucket list of my own, I wanted to create an application that would help facilitate the process for them, and perhaps myself in the future as well. A person can add/remove items from their list, mark them as complete, view completed and non-complete items, and also randomly select an item from their list. This was the first time I used emojis on a web project, I think that it fit the aesthetic of the app fairly well, but I definitely don't think that emojis are appropriate for every application.

Time Tracker

As a way to track the time I was spending on working on these various applications, I wanted to create an application that would allow me to track work sessions like lap times. Nothing was particularly innovative in this application, it was a lot of code reuse from my other applications, but I did have it so it wouldn't start the timer until the tab was blurred, and would automatically pause when the tab was focused. It also allows you to create new projects and switch between projects so that your timed sessions are organized and you can see an accurate total time spent. If I were to spend some more time with this project, I would add some graphs or analytics because I think that would be fun and useful.

Book Pacer

When I was getting back into reading during winter break from school, I watched a video that showed the small habits can have really transformational benefits. This may be obvious to some, but if you just read 30 pages of a book a day, you can finish that book in ten days. This would allow you to finish three books in a month, which is more than some people read in a year. I wanted to create an application that I would use, or at least serve as a reminder, to read every day and subdivide books into smaller chunks that are easy to tackle.

Epoch

This was the only other app where I used colors other than black and white, and that was because I was emulating the app I Am Sober. I think that it's a great app, but the social features are not necessary for everyone, so I wanted to create one that was more private. I also wanted to make it a more general tool, because the timer can also be used as one of those Life Counter tools to see how old you are.

Soundboard

I have always used localStorage in my minimalist web applications, and I have tried to use it creatively in order to bring exciting features to the applications. One day, I wanted to see if I could store full sounds in localStorage by encoding the data into a text format and reconstructing it from localStorage. I used base64 to encode the data and then would convert that data from text into a Blob in order to play the sound.

Miscellaneous Projects

Below is an assorted collection of my projects that I have done, but didn't have a singular focus like my run of Minimalist Web Applications. However, I am very proud of all of the projects, and I think that they actually form a better picture of the kind of developer I am, one that tries to solve problems or doing interesting things with code.

Collocation Feud

With the popularity of Wordle at the time, I was feeling motivated to make a social web game. My friend really enjoyed word games like Wordle, so I tried to think of some new kind of game that would be fun and require some brain usage. What I came up with was a mixture of Family Feud and word collocations. In linguistics/data science, collocates are words that occur near a given word, and they can provide very useful insight into the meaning and usage of the words near which they occur. In this game, you have to guess which collocates for a given word contain the most information. I tried frequency, but it would sometimes have weird order, something I suspect has to do with the corpus of the dataset the collocates were found in.

Spotify Playlist Analyzer

As someone who creates a lot of Spotify playlists, I also know a lot of other people who create lots of playlists as well. I think that the way that people collect songs and name their playlists is something that is very fascinating, and so I wanted a way to be able to quantify some of this uniqueness. This app consists of a Spotify playlist retrieval API that then communicates with the frontend which contains a host of visualizations and data analytics about a Spotify user's playlists. The analytics include: average playlist word count, average energy/danceability/valence of songs in a playlist, number of playlists, number of unique songs, number of unique artists, and more.

Scratchpad

Scratchpad is a skeuomorphic notepad where the rich-text contents live in your localStorage. I based it off of the design of Rapidtables' notepad app, but with my own improvements. I didn't want the toolbar that RapidTables had, I wanted the application to be as pared down as possible. However, later as I was using the application on the day-to-day, I realized that while I could separate my notes out on one super note, it would be nicer if I could create different notes that would display at the top that I could switch in between. I ended up taking the tabs interface from Bootstrap and used that to add the ability to have multiple notes in Scratchpad. There are also many basic formatting keybindings in the application to make the content richer.

GroupMe Bot

My friends and I always had a large groupchat on GroupMe, so I wanted to create a bot that would be able to add some more fun/interactive functions to the group. It provides points for interacting in the chat, and users can view the leaderboard to see how they rank in terms of engagement. There also is the ability to add pictures to a gallery with a name that can be recalled at any time with the /pic command. There are also lots of text transformation comamands like mock, shout, glitch, and more.