Lasso Tool

Open Source Crop Tool

One of my first tasks at TrademarkVision was to develop a free hand lasso tool (Typescript, Angular, Django, & Python) that would allow our users to draw a polygon over the section of their uploaded image they wish to search. Before this, TrademarkVision used a generic rectangular selection tool. While this was fine for simpler images, trying to search part of a complex image would introduce unnecessary noise to the search. For example, if a user wanted to search just the arm within the red circle of the Arm & Hammer logo, the rectangular crop tool would include parts of the red circle in the corners of the rectangle. However, the lasso tool gave our users far more options and flexibility when it came to searching any subimage they wanted.

After the acquisition by CompuMark around November 2018, my first task was to integrate the lasso tool into their platform, TMgo 365. The most challenging part about this was incorporating our existing lasso tool into CompuMark's Java & JSP legacy codebase that has been largely untouched for 12 years. Furthermore, we had to improve the performance of the lasso tool on Internet Explorer 11 on Windows 7, since that is the browser/OS that a significant majority of CompuMark's customer base uses.

• Date: September - December 2017
• Employer: TrademarkVision
• Category: Front-end Web Development

TrademarkVision Redesign

Web Application

TrademarkVision's search, results, and reports page was built using Typescript, Angular, & Django, but our account and search history pages were built using Typescript & Vue. I was tasked with refactoring the flagship product's search, results, and reports page to also use Typescript & Vue so that we could have a more consistent codebase and style across the entire webapp.

Since I wasn't too happy with the current frontend interface for TrademarkVision, so I redesigned and iterated over a bunch of different mockups, taking feedback from the CEO, COO, sales, marketing, and other developers. The old UI was very cluttered and inundated the user with too many options, especially on the search page. We had gotten customer feedback that the search page was confusing and they thought the optional search parameters had to be filled out, but that was narrowing their initial search too much.

Since users can refine their search on the results page, we decided to put the keywords along with the rest of the advanced options in a toggleable sidebar. Now users don't have to scroll to view all the advanced options on the search page. Also, having the advanced options in a sidebar allowed us to reuse the same component on the results page rather than having two separate components that behave the same.

For the results page, I decided to move all the information in the top bar to the sidebar, taking up less screen real estate while also being able to show more keywords (scroll down rather than increasing height of the top bar). We also added many new features with this redesign, including a slider to change the size of images in grid view, highly requested list view, and localization in Chinese and Korean, with more languages to come as translations are confirmed.

• Date: April - December 2018
• Employer: TrademarkVision
• Category: Front-end Web Development

Anticounterfeit

Web Application

Created a custom solution for a potential client who wanted to be able to upload an image of a product and compare it with authentic images of the product, counterfeit examples of the product, and existing trademarks. We had an opacity slider between the two images to help the user compare. We also had a color difference filter in which the grey parts are the parts of the images that are the same color, anything that isn't grey is the difference.

• Date: May - August 2018
• Employer: TrademarkVision
• Category: Front-end Web Development

Bulk Monitor

Web application

Created a custom solution for a potential client who wanted to be able to search and create monitors (recurring searches) for Chinese trademarks. Leveraged our currently existing Vue components from the TrademarkVision redesign to add this part of the web application.

Users can run a search using trademark application numbers, text, applicant, or owner. After selecting marks to monitor, users then pick or create a project (collection of searches and/or monitors). The email addresses associated with that project then get emailed whenever similar results to the marks they're monitoring are registered.

• Date: May 2019
• Employer: TrademarkVision
• Category: Front-end Web Development

Tatch

Website

Connected with Roy Cohen who gave me the following mockup and asked me to complete the frontend for tatch.com in HTML, CSS, and JavaScript with PHP for email functionality.

• Date: August - September 2018
• Client: Tatch
• Category: Front-end Web Development

Bellare Pizza

Website Redesign

Stumbled on a local pizzeria's website that desperately needed a makeover. I redesigned the website using vanilla HTML, CSS, and JavaScript with the following improvements:

• corrected syntax and grammar
• added favicon
• reduced repetitive text and hyperlinks
• simplified menu navigation
• better styling, images, and background
• Google Maps on Contact page

• Date: December 2017
• Client: Bellare Pizza
• Category: UI/UX Design & Front-end Web Development

Welliventure

Website

Connected with Brendan Laughlin who needed landing, login, and about webpages built for Welliventures. Built them out to his specifications with placeholder text and images.

• Date: October 2017
• Client: The Wellington School
• Category: Front-end Web Development

Vita and Associates

Website Redesign

I noticed my landlord's website looked outdated and I offered to redesign it for him. I sent him a rough draft of the redesign where I combined the eight separate pages into a single page website with modern styling. He liked it and after some back and forth to optimize the styling for a 1920 x 1080 resolution, he ended up with a newer, more modern looking website that looks less like a popoup ad.

• Date: May 2017
• Client: Joe Vita
• Category: UI/UX Design & Front-end Web Development

GrubShare

Web Service and Mobile Application

For the Hack NC 24 hour hackathon, my team and I developed GrubShare, a solution to food waste and food insecurity. Our idea was to provide a means of communication between restaurants with a surplus of perfectly good food and food banks who aim to help those living in poverty. We developed the web application using Django framework and Amazon Web Services with HTML, CSS, and JavaScript. We also utilized ESRI's Route Selector API to find the most efficient routes for a given set of restaurants. GrubShare was designed to be user friendly, streamline the donation and pick up process, and utilizes a route optimization algorithm.

New users register accounts as either a food bank or a restaurant. Logging in as a restaurant will direct to a donation form where restaurants can provide a description of the food they're donating as well as the approximate amount of people it will serve. For food banks, logging in directs to a map centered around the food bank with routes mapped to the available restaurants that day.

Furthermore, we have developed a GrubShare Android application as our final for our Android Application Development course. The Android application was modeled after the web application and also used Amazon Web Services. For restaurant users logging in, the app will direct them to their dashboard where they have the option of submitting a donation. For food bank users, their dashboard allows them to view a map of donations submitted today.

• Team: Azmain Amin, Philip Bennett (Mobile), Keith Denning (Web), and myself

• Date: October - December 2016
• Client: Hack NC Hackathon
• Category: Web and Mobile App Development

Personal Clinical Engagement

Web Application

Collaborated with the UI/UX designers, developers, and project managers to take existing data being pulled from APIs and edit the ReactJS code on Web and Core (logic for both Web and Mobile) to match designs. I came in not experienced in any function oriented programming ReactJS, Redux, or EcmaScript 6 (ES6), but I embraced the opportunity to learn and was coding entire modules for the web application halfway through the internship.

The Personal Clinical Engagement application takes user's health information, calculates a health score for them, and incentivizes users to perform health actions for points they can spend on sweepstakes. My work, shown here, was primarily on the Onboarding flow (what users see once they have registered). Each section was composed of multiple parts that spanned a myriad of files to increase reusability of common elements. I also worked on the Sweepstakes section and coded the History page, Product page, and Sweepstakes Entered page.

• Date: July - August 2016
• Employer: Healthmine, Inc.
• Category: Front-end Web Development

Healthmine, Inc. Dashboard

Website Design

My first project at Healthmine, Inc. consisted of designing and developing a dashboard for the lobby in the office. I was told what kind of data they wanted, i.e. news stories, social media posts, posts from diabetes and asthma forums, a map of users, and how many users using our software. Used plain HTML, CSS, and JavaScript to build out the frontend. For the news stories, tweets, and forum posts, I wrote a Python script to data scrape those sites periodically via Windows Task Scheduler. The map of users have circles that are relative to how many users are in the area's zipcode. This was one of my favorite projects to work on because I was given creative freedom to design and develop however I wanted.

• Date: June 2016
• Employer: Healthmine, Inc.
• Category: Front-end & Back-end Web Development

Ancient Graffiti Project

Web Application

The Ancient Graffiti Project had already been developed, and my team was assigned with the task of improving the look and functionality of the web application. Our client, Professor Benefiel, wanted admin and editor features, allow authenticated users add or edit a graffito, a greatest hits page, and a report function that would present search results in a table with the option to export the table to Microsoft Excel.

My task was the reports functionality, which I built off of the existing search feature. This meant going into the old code, understanding how the database and web application worked together, parse the data into a nicely formatted table. Furthermore, the Generate Report button would only show up on the search page if the user was authenticated. I implemented the report functionality to Professor Benefiel's specifications: only Professor Benefiel and authenticated users would be able to view all the relevant information on all the graffiti at once as well as export that information to Excel for editing and sorting.

• Team: Azmain Amin, Ulemj Enkhbold, Sima Sharma, and myself

• Date: May 2016
• Client: Washington and Lee Department of Classics
• Category: Front-end & Back-end Web Development

Petfinder

Web Application and Web Service Testing

We began to explore the world of web services by starting to use the Petfinder API, which provided us with a myriad of data with which we filled our local database. We made a web application, RockBridge Pets, filled with data retreived from GET requests to the API twice a day and sending a POST request to Twitter to tweet about the new animal on @RockBridgePets.

Once we had a sufficient amount of data, we began designing our own web service and decided on two methods, called search and simple. Search is an advanced search method which finds the pets in the database that match the input parameters and returns all the pet information. Simple is a search method that returns basic information, such as pet name, animal, pet ID, and the time spent in the shelter. Documentation for our API can be found here.

After developing our API, we began testing it using Soap UI. Soap UI checks whether or not a test case is successful using a feature called assertions. Assertions are oracles that can check certain aspects of the response, like whether the response contains a word or value we expect e.g. "Cat" or "Dog". If the conditions of the assertions are met, the test case passes, otherwise, it fails.

• Team: Azmain Amin and myself

• Date: June - August 2015
• Client: Washington and Lee Department of Computer Science
• Category: Front-end & Back-end Web Development and API Testing