Web App Front-End Upgrade
This project was about upgrading a user interface for a web application. The purpose of the web application is to provide data visualization tools within the field of acoustics. The upgraded app uses the amcharts library heavily. It also makes use of the jspdf library for generating PDF files. In order to view the upgraded user interface, please watch the video associated with this project.
Craft CMS Landing Page
This project was about creating a landing page for an ads campaign on the client's website. The landing page is divided into 3 sections:
1. Overview and survey question form
2. Contact form
3. Thank you section
For details about this landing page, please see the video associated with this project.
Add new pages to Craft CMS Website
This project was about adding new pages to an existing Craft CMS website. 2 new pages were added:
1. How We Are Different
2. Who We Work With
Please see the video associated with this project in order to view these 2 new pages.
During this project, several other enhancements were made to the site such as rearranging the navigation bar and adding more content to existing pages.
Upgraded Events Page (Craft CMS, Twig)
This project was about adding filters to an events page as well as allowing a guest user (anonymous user) to submit an event.
The events page allows the user to search by either keywords, event type, or start/end dates of an event. The user is allowed to filter by multiple event types if desired. The filters were implemented using the Craft CMS and the Twig templating engine.
Also, the user can click on the "Submit an Event" button in order to add their own event if desired. The add event form was implemented using Craft's "Guest Entries" plugin. The form also contains several validation checks.
Website Upgrade (ASP.NET Core, Bootstrap, jQuery, CSS)
The goal of the project was to convert an existing "Classic ASP" website to use the ASP.NET Core framework. This required rebuilding the entire website from scratch. The old classic ASP website contained 5 "modules" with over 100 total pages. There are 5 user types and depending on the type of user, they will be redirected to the appropriate module.
The website uses the following stack of technologies:
Front end: JavaScript and jQuery
Back end: C#/ASP.NET Core
Database: MSSQL
The website is hosted on the Microsoft Azure platform.
Web Application Front End Upgrade (Angular/CSS/TypeScript)
The project was about upgrading the front-end of a web application to use Angular, TypeScript, and SCSS. The old version of the app was using the Bootstrap framework and jQuery library. While upgrading the front-end, the app was also updated to connect to a new back-end REST API for getting and setting data.
I was the lead developer for the front-end portion of the project and working with 3 other developers throughout the project. I also collaborated with a project manager, a designer, and the CEO of the company throughout the project. We would meet at least once a week to discuss progress and any issues that need to be discussed with the team.
Workflow Board
This project was about adding the ability for an attorney to manage a list of tasks for a case. The attorney can create tasks that are placed in various columns of a workflow board. They can either rearrange tasks on the board, assign a task to a user, enable or disable different types of notifications such as email notifications, start a task, end a task, and much more. They can also add new columns or tasks at any time as demonstrated in the video.
Questionnaire Selection Widget
The purpose of this page is for an admin user to set up a questionnaire that will be sent to a specified email address. This page is very dynamic and heavily relies on JavaScript code for enabling or disabling certain features on the page. Here are a couple of examples which are demonstrated in the demo video:
1. Once the user selects a process, a list of checkboxes are displayed underneath the process. These checkboxes represent the documents that are associated with a process. The documents that are displayed depends on which process was selected.
2. Once the user selects both a process and language, another list of checkboxes are displayed at the bottom of the page. These checkboxes allow the user to select which pages will be displayed in the questionnaire that will be sent.
3. Some questionnaire pages contain an information icon next to them. When the user clicks on the icon, a modal will be displayed which provides the user with more information about what the questionnaire page is.
4. In addition, the user may type in a search term inside the process dropdown in order to find the process they want.
Medical Facility Heat Region Map
This software is used by staff at a medical facility to keep track of the status of various rooms in a facility.
The first video demonstrates the user interface. The background image/color of a room identifies the doctor. The checkmark as well as the animation of the room indicates the status. For example, a green room with a check mark means Doctor A is in the room. A blue room that has no checkmark and is flashing quickly means the patient is in the room waiting for Doctor B.
This site is responsive and works on every device type. In production, it is primarily used on a tablet.
The second video demonstrates the admin interface, It is used for configuring the doctors, background images/colors, facilities, and rooms that are shown in the first video. The admin is able to build a new heat map by uploading an image and then specifying heat regions (rooms) in that map.
Medical Facility Heat Region Map - Room Editor
This project is related to my "Medical Facility Heat Region Map" portfolio entry. Please read that first.
The client requested the ability to add, edit, or delete heat regions in the heat region map. For example, maybe they want to add rooms or change the name of a certain room. Also, they want to be able to setup new maps for facilities if needed.
The HALS software contains an admin interface that allows the user to do this. As long as the user has permissions, they can create new facilities and also add new maps for that facility.
When the user opens the Room Editor, they can either a) create a heat region rectangle using their mouse, b) update an existing room, or c) delete a room. The Room Editor also has an undo feature.
The client was very impressed with this feature and they have already set up 3 facilities/maps in production so far.
Interior and Exterior Screens for Digital Billboard
The goal of the project was to create digital screens for the interior and exterior sections of an autonomous vehicle.
The first video demonstrates the screen that is displayed inside of the autonomous vehicle.
The second video demonstrates the screen that is displayed outside of the autonomous vehicle.
This website accepts inputs from an external API interface. The digital screens respond to these events. Animations are displayed as it transitions between different types of events such as the vehicle stopped, the vehicle is continuing to the next location, emergency, etc.
Digital Billboard for Autonomous Vehicle
The goal of the project was to create a digital billboard for an autonomous vehicle.
The first video demonstrates the top section of the billboard which displays a) the next stop, b) ads that change every x seconds, and c) a Google map that shows all available stops.
The second video demonstrates the bottom part of the billboard which displays all upcoming stops.
This website accepts inputs from an external API interface. The billboard responds to these events. Animations are displayed as it transitions between different types of events such as the vehicle stopped, the vehicle is continuing to the next location, etc.
Digital Resource Center
The client requested a web application that allows a user to select a Health Care Provider (HCP) and then launch different types of applications and content with that HCP selected. The app records user actions such as when content was opened, what the user's GPS coordinates are, what time it was opened, etc. The app is intended to run on an iPad.
The app is written using HTML, CSS, and the AngularJS library. It consists of 12 AngularJS components and 16 AngularJS services. Some of the services are intended to be reusable in other apps.
Content Manager
My client wanted to develop a custom jQuery application that is similar to a Google Spreadsheet. The client had particular requirements for how this application should behave such as:
- Rows should be locked/unlocked depending on if a user is editing it.
- The user should be able to sort by any column.
- Each cell may contain a readonly field, textbox, checkbox, or dropdown.
- Any time a row is added, edited, or deleted, an internal API service created by my client is invoked.
- Validation is performed on cells before values are updated on the server side.
I was the only developer of this project and built the entire application.
The client was very happy with the result of this project and has not reported any bugs since the initial round of beta testing.
Attendees Heatmap
My client wanted to create a heatmap that shows attendee counts at different locations of a map. The purpose of the heatmap was to determine which booths at the event were the most popular at each hour of the day.
I built a single page app that uses the simpleheat library for drawing the heatmap. The HTML page consists of an image of the map and a HTML5 canvas displayed on top of that map. The simpleheat library draws the heatmap on this canvas. The app also allows you to configure many settings such as how slow or fast to play the heatmap animation, which day to display the attendee counts for, and the radius/blur of the heatmap drawing.
The backend of the app connects to a MSSQL DB which contains 60,000+ RFID tag readings from attendees at the event. The backend C# code analyzes this data and determines how many attendees were at each booth for the given time frame received from the front-end. Example: How many attendees were at each booth between 2 - 3 PM on Monday? This data is then fed into the simpleheat library.
This project met the client's requirements and they were happy with the results.
Advanced Search Bar
My client wanted to develop an advanced search bar that groups search results in different categories as well as provides shortcut action items for each category.
When the user types text in the search bar, it will automatically search for any contacts, cases, or employers on the user's website. The search results are grouped by type (contact, case, or employer). In each result, there are shortcut action items that can be clicked on such as viewing that contact/case/employer. Some of the shortcuts are only applicable to that category. Example: You can only "Add a Reminder" for case results.
The search bar is powered by the jQuery typeahead plugin. The backend consists of a Classic ASP script which invokes a MSSQL stored procedure. The stored procedure returns the search results.
The client was very happy with this new functionality and will be deploying the change to all of their clients.
Custom DataTables Inline Editing Solution
The client wanted the ability to edit rows in a dataTable without having to open a modal dialog to edit the data or click the Save button to apply the changes. As soon as the user types a value, that data is saved immediately.
The project uses the dataTables jQuery library. In order to implement the goals for this project, I created a heavily customized dataTable that makes uses of several of its features. This solution is unique in that it not only allows inline editing, but also still allows the user to sort columns, type in a filter, export the data to Excel, PDF, etc. These operations can be done in any order.
Similar changes were made to around 10 other pages on the website and this has saved clients a lot of time. They no longer have to wait for extra screens to load and there are less clicks involved.