Projects

Flask

Stocks Investing Application   +
Flask, JavaScript, SQL
  • Uses Python extensively to deal with potential HTML injections and to handle any errors made when making POST or GET requests
  • Uses Jinja templating to create a streamlined design
  • Integrates AJAX requests to IEX Cloud's API on the quote.html page to dynamically generate stock symbols as the user types
  • Communicates with a SQL database using the CS50 library to facilitate the commands

Express.js & Mongoose.js

Issue Tracker   +
Express.js, Mongoose.js, MongoDB Atlas, Chai.js
  • Connects to a MongoDB Atlas database via Mongoose.js and accesses one model: Issues (/api/issues)
  • Specific projects can be accessed from /api/issues/:project with the default project for the forms on the index.html page being "apitest"
  • Supports GET, POST, PUT, and DELETE requests
  • All routes accept and process a wide variety of parameters (all the fields used for the Issues model, e.g. issue_title, issue_text, created_by, etc.)
Personal Library   +
Express.js, Mongoose.js, MongoDB Atlas, Chai.js
  • Connects to a MongoDB Atlas database via Mongoose.js and accesses one model: Books (/api/books)
  • Stores books titles and comments made about each book
  • Supports GET, POST, and DELETE requests to the routes /api/books and /api/books/:id
  • The POST request accepts a title and a comment while the DELETE requests accepts a Mongo DB _id number
Exercise Tracker   +
Express.js, Mongoose.js, MongoDB Atlas
  • Connects to a MongoDB Atlas database via Mongoose.js and accesses two models: User (/api/users) and Exercise (/api/exercises)
  • Supports POST requests with forms to either create a username or create a log of an exercise (as long as a valid user id is provided)
  • Handles three query parameters (to, from, and limit) for GET requests to the route /api/users/:_id/logs
URL Shortener Microservice   +
Express.js, Mongoose.js, MongoDB Atlas
  • POST requests are made with the lone form at the top of the page - the user must enter a valid website with a protocol (HTTP or HTTPS) at the beginning
  • Connects to a MongoDB Atlas database via Mongoose.js with the model Url (/api/shorturls)
  • Dynamically generates the list of URLs stored in the Url model on the bottom of the home page (using an EJS template)

Express.js

American-British English Translator   +
Express.js, Chai.js
  • Uses a Translator class to translate between the American and British dialects of English
  • The Translator class uses regex and functional programming with arrays, i.e. the functions some() and reduce(), to parse text and translate it using a series of JavaScript objects that contain translations of words between dialects
  • Performs unit tests on the Translator class and functional tests on the sole route /api/translate (POST requests are supported)
Sudoku Solver   +
Express.js, Chai.js
  • Uses a Sudoku Solver class to validate and solve a sudoku puzzle
  • The solve() method uses a brute force algorithm in conjunction with recursion, passing a dictionary of indices mapped to an array of values with each call to the function
  • Performs unit tests on the Sudoku Solver class and functional tests on the routes /api/solve and /api/check (POST requests are supported)
Metric-Imperial Converter   +
Express.js, Chai.js
  • Converts between metric and imperial units (between any of the following units: km <-> mi, gal <-> L, lbs <-> kg) using a convert handler class
  • Uses regex expressions to parse the user input for a valid number and a valid unit
  • Runs unit tests on the methods of the convert handler class and functional tests that make GET requests to the /api/convert route (the only route)
Timestamp Microservice   +
Express.js
  • Shows the current unix and UTC/GMT time when the subdirectory /api/ is accessed
  • Accepts a date parameter in the same subdirectory, converts it to either unix or UTC/GMT, and shows both dates in JSON format
Request Header Parser Microservice   +
Express.js
Displays the ip address, language and internet browser information of the user at its unique subdirectory /api/whoami
File Metadata   +
Express.js
  • Allows a user to upload any file and make a POST request to the path /api/fileanalyse
  • Returns a JSON object with name, type, and size

React.js

25 + 5 Clock   +
React.js
  • Manages a timer with 3 components: 2 components for incrementing and decrementing the break and session time and 1 for pausing/playing the timer and resetting the timer to its initial settings: 25-minute session & 5-minute break
  • Plays an 8-second alarm once the session is over and starts counting down the break
  • Manages state with hooks and uses props to communicate between siblings, using the parent component ("App") as the liaison
Drum Machine   +
React.js, Redux.js
  • Uses React (class) components to create a drum pad with drums that can be triggered by clicks or the pressing of the corresponding keys (Q, W, E, A, S, D, Z, X, C)
  • Plays drum sounds and displays active styles of the drum pad component that's triggered
  • Utilizes Redux.js to manage the state of the power (on/off), which can be toggled by pressing the power button
Markdown Previewer   +
React.js
Compiles in real time Markdown text to HTML elements using one React (class) component
Random Quote Machine   +
React.js
Randomly chooses a quote from a list when the user presses a button using one React (class) component

JavaScript

JavaScript Calculator   +
Vanilla JavaScript
  • Calculates expressions of strings containing digits, decimals, and any PEMDAS/BODMAS operator using formula/expression logic
  • Employs a variety of data structures: (1) queues and stacks to simplify operations and (2) abstract syntax trees created with operator/operand nodes to process calculations
  • Uses regex expressions heavily to process strings with chains of operators and erroneous uses of parentheses
  • Contains many event listeners that process both keydown and click events in the same function
Portfolio Website   +
jQuery, HTML, SCSS
  • Designed with a Desktop-first approach, but still includes mobile responsive styles
  • Lots of toggle events, text replacement (even language translation), and background image resizing created with jQuery's standard library
  • SCSS used extensively: nesting of blocks, color variables, and mix-ins for responsive design (laptop, small, and extra-small sizes)
  • Supplements my résumé with more experience, education, and projects

D3.js

Treemap Diagram   +
D3.js
  • Shows a D3.js treemap diagram of top 100 videogame sales by console, movie sales by genre, and kickstarter pledges by category
  • Uses pure D3.js for all formatting and rendering, i.e. all div and svg elements
  • Makes AJAX calls for each data set when the corresponding button is clicked to dynamically regenerate the treemap according to the dataset
  • Uses regular expressions to create tspan elements within the text elements
  • Employs functional programming to link the tspan elements to the corresponding rectangle element so that the tooltip shows the correct information when hovering over a tspan element
Choropleth Graph of Educational Attainment in the US   +
D3.js
  • Shows a D3.js choropleth map of educational attainment by county in the USA from 2010 to 2014 constructed with D3 paths and topojson.js
  • Uses only D3.js for all formatting and rendering (no CSS or HTML)
  • Uses asynchronous programming when retrieving json files from two different urls (mapping paths data and educational data by county)
Heat Map of Global Temperatures Over Time   +
D3.js
  • Shows a D3.js heat map of global temperatures from 1753 to 2015 constructed with D3 rectangles
  • Uses D3.js to create a custom tool tip and legend with its own gradient made of rectangles and its own axis
  • Uses a conditional fill to show the relative variance in temperature based on the average for the time period 8.66°C
Scatterplot Graph of Fastest Cycling Times   +
D3.js
  • Shows a D3.js scatterplot graph of the 35 fastest times of cyclists up the Alpez d'Huez
  • Uses D3.js to create a custom tool tip and legend
  • Uses a conditional statement to show the riders who were claimed to have been doped and those who weren't
Bar Chart of US GDP   +
D3.js
  • Shows a D3.js bar chart of the US GDP from 1947-2015 (data from a JSON object)
  • Implements a custom tooltip that shows the year, quarter, and amount in millions of dollars of a data point (bar)

HTML & CSS

Language Learning Website (Linguaphilia)   +
HTML & CSS
  • Currently has one HTML page introducing Japanese and another introducing Spanish
  • Integrates a form, an image map (language "wheel"), and several pages with text and images
  • Customized for responsive design, especially mobile and print formats
Vanilla JavaScript Documentation   +
HTML & CSS
  • A single-page Vanilla JavaScript reference page
  • Includes many anchor and code elements throughout to offer users more than just an explanation
  • Explores the underlying classes of HTML elements exposed by specific Vanilla JavaScript functions
  • Utilizes media queries to create a responsive HTML page optimized for mobile devices; changes the layout for different screen sizes, i.e. a fixed side menu for large desktops to a small fixed menu at the top of the page for mobile devices
Tea Company Product Landing Page   +
HTML & CSS
  • A product landing page for a hypothetical tea company called TheaThyme
  • Uses flex & absolute positioning to extensively format elements and fixed positioning for the navbar at the top of the page
  • Employs media queries to optimize the page for mobile devices
  • Uses CSS variables in a :root selector and the calc() function to format elements consistently
Survey Form   +
HTML & CSS
  • An HTML survey form for a hypothetical platform that connects coders
  • Integrates several <fieldset> tags with the <legend> tags, drop-down <select> menus, and <textarea> sections
  • Pairs <label> tags with corresponding <input> tags
Tribute Page: Alan Turing   +
HTML & CSS
  • An HTML tribute page for Alan Turing, the father of computer science
  • Uses max-height and max-width CSS properties to create a responsive website (instead of media queries)
  • Employs a lot of CSS styling to create a crisp user interface

Java, C#

Employee Roster Console & Form Application   +
C#, Visual Studio Forms
  • Utilizes many OOP concepts: custom exceptions and several try-catch blocks for error handling
  • Allows user to perform CRUD operations with a list of employees in both a console and form format
Client Database Array Search & Sort Console Application   +
Java, SQLite
  • Communicates with a clients database file by way of a SQLite JDBC driver to support all CRUD operations via pathways A (add), M (modify), R (remove), and P (print)
  • Creates and populates arrays to be manipulated by various sorting algorithms (bubble & insertion sort, java.util.Arrays sort) and searching algorithms (binary & linear search)
  • The algorithms for bubble sort, insertion sort, and binary sort can search through an entire string to sort a list alphabetically (past the first letter)
  • Before exiting a session, prints summary of actions performed in a session and shows the clients table before and after the changes
Seize the Station CLI Game   +
Java
  • Uses probability and sequential and selection control structures
  • The user can choose between three levels (easy, medium, and hard)
  • During the fifth round, the user chooses a letter and depending on the accuracy of the guess, the user has a better chance of winning

Python

Virus Propogation and Drug Computational Model   +
Python
  • Uses matplotlib's plyab interface to create graphs showing the population of a virus in a patient (with or without prescriptions and )
  • Uses the random module to simulate stochastic events, e.g. reproduction of a virus, inheritance of resistance to specific drugs, etc.
  • Integrates OOP concepts to solve a problem, e.g. the ResistantVirus class is a child of the SimpleVirus class

Swift

Health & Wellness iOS Application   +
Swift, XCode
  • Includes four different view controllers: home, BMI, locations, wellness today, heart rate
  • The BMI calculator generates pop-up alerts after calculating one's BMI with the information provided
  • The heart rate provides instructions for calculating one's heart rate along with a visual slider that shows the time elapsing in real time.