Projects, and tinkerings

Backtracker

Image

Technologies Used :
  • React.js
  • Spectre CSS for grid and components

Backtracker is an algorithm learning/visualization tool built with vanilla React that displays step-by-step environment visualization for popular recursive algorithms including Permutations, Subsets, Combinations, and Parentheses Generator. Check out the code and app.


Data Structures in JavaScript using Test-Driven Development

Image

Technologies Used :
  • Mocha.js for running tests
  • Chai for assertions

Learn to write unit tests and review data structures at the same time! This Project is a library that you can use to learn to implement data structures in JavaScript in your local environment while at the same time utilizing TDD(Test-Driven-Development).

The project supports the following data structures :

  • Binary Search Trees(balanced/unbalanced)
  • Heaps(Min-Heap)
  • Graphs(Includes Depth-First Search, Breadth-First Search, Cycle-Detection)
  • Tries(Prefix Trees)

I created the entire testing spec/each implementation from scratch because I wanted to review data structures while practicing TDD and writing unit tests.


JSON Query Generator

Image

Technologies Used :
  • React.js
  • Redux for state management
  • Jest, and Enzyme for testing
  • Bootstrap for UI

Query Generator is a simple JSON Query generator based on a given schema - It was completed in 72 hours as part of a coding challenge, so it was built with functionality in mind with minimal focus on UI(Bootstrap was used).

The query accepts a table name, start/end time(in UNIX Epoch Format), select_fields, and a where_clause that will be dynamically generated depending on its parameters(AND/OR, etc).


Leaflet Book Review App

Image

Technologies Used :
  • Handlebars.js for templating
  • IndexedDB, Service Worker for caching and offline access
  • WordPress REST API

Leaflet is PWA(Progressive Web App) that fetches data from book reviews posted on previous personal blog using the WordPress API. It’s fully responsive across all devices, and on Chrome uses a service worker for faster page load on repeated visits, and even works offline!


RateMyCarl

Image Image Image

Technologies Used :
  • Vanilla JavaScript

RateMyCarl is a weekend side project - A Chrome extension built for my school, it displays RateMyProfessor.com ratings on Carleton College’s course registration website. No more searching for each individual professor during class registration time. It was taken down from the Chrome Store per RateMyProfessor.com’s request.


Sayspeaking Web Platform

Image

Technologies Used :

  • HTML5/SCSS
  • Bootstrap

Sayspeaking is an online platform where students can take Korean conversation classes with trained tutors. I inherited the legacy project which was a themeforest template, and prototyped/developed the UI while at the same time refactoring most of the front-end codebase to reduce technical debt and allow for scalability/maintainability.