Eric Klempnauer

Software Engineer

Projects

Astrolabe Player and Staff Tools

The Astrolabe - Player and Staff Application

As part of my support of the gaming community I belong to, and have been volunteering my time to support, I have been creating a software application for our players and our staff. This application now hosts a wide range of tools for players to engage with the server and learn more about the game while also consisting of tools for staff to manage and moderate our players.

This dual use architecture has led to development of a wide range of functionality from case management to crafting resources for the game. It is built with Next.JS as the underlying framework for our React development backed by a MySQL database and connection to that using a query builder. All queries are built to be reused throughout the application with permissions checks to exclude sensitive data from player views.

This application has been a focus of mine in my free time for the last two years and has evolved greatly. From online player statistics on the Player Portal, a Crafting Compendium, Account Profile, and Case Management tools the application is a passion of mine. I still continue to expand the use of the application whenever possible. Feel free to explore it at the link below.

Digital Auction Platform

To enable the sale of diverse art from a local art gallery I worked together with others at VizworX to develop a state of the art web application to support display and auction of art pieces digitally. This application investigated existing platforms for a quick solution but it was determined that the clients needs did not justify existing third-party options. A new application was developed to allow the client to store, track, and display artworks with auctions handled directly in the same application.

The application was developed using Next.JS being used for the primary platform, this enabled us to quickly prototype and develop alongside designers and produce a modern and minimalist interface. For all secure pages and endpoints we leveraged a third-party OAuth 2.0 identity provider, this provider is used for both administrators and public users of the platform.

The auction interfaces connected to an Express service developed specifically to handle the complex logic of bids, auction states, and rapid data synchronization between bidders. This back-end service provided REST and WebSocket endpoints to balance the needs of singular requests and subscription based updates to users. This combination allowed us to implement auctions in a more modern form than existing competitors.

Lab Information System

A robust Lab Information System (LIS) developed to support the storage needs of a client with medical data to be inserted into a connected, privacy-compliant database.The application was implemented using the Next.JS framework for React with server-side rendering of all data, secured behind OIDC / OAuth 2.0 compliant user authentication. The application leveraged server-side rendering to ensure that all filter, sorting, and data delivery was reduced to the minimum required data for the users request.

All change requests to the system were handled through page-based request routing to reduce the reliance on API requests and ensure that all changes to data delivered the user to an updated resource after validation and submission. This process allowed a greater level of security for the client and back-end processing in a complex manner to ensure data integrity.

Mobile Application for Field Data Collection

Mobile Data Collection Application

As part of a modernizing business practices a client requested a new application to facilitate digital collection of field data using their employees mobile devices. With a split of user devices between iOS and Android we utilized React Native to allow development of a unified experience across platforms in a single code base. Together with the mobile application a web portal was developed to allow office staff to perform administrative tasks and to add new entries to the database for automatic form assignment and generation.

For this project I acted as team lead and  was responsible for guiding the development of the project as the SCRUM master but also reporting directly to the client in weekly meetings. During the development process I also acted as lead developer for the React Native portion of the application while also developing, performing code reviews, and mentoring the team responsible for development of the administrative portal.

To address challenges in the mobile space we opted to utilize GraphQL as our endpoint on the back-end with custom resolvers built around form generation and common workflows of users. This allowed the team to develop a mobile application that supported an offline mode, allowing users to complete work while in the field in low-network settings and sync data when a connection was available.

Aurora and Satellite Visualization

Visualization of Aurora and Satellite Data

For the Aurora project we were tasked with developing a modern visualization to display collected aurora data from an API endpoint managed by the University. To accomplish this goal we worked with a stack utilizing Node.js on the back-end which produced a GraphQL based endpoint from the existing API. This allowed the team to restructure and compress incoming data. The compression of data from the existing API was essential to make requests on the client side performant and allow playback of the existing date/time based data.

On the front-end the visualization was built with a pairing of React and three.js for the interface and Apollo for managing GraphQL queries. Through the use of react-three-fibre we were able to maintain an efficient and modern framework for the application that gained the state management and efficient render methods of React while also having a robust and customizable 3D viewer in the application. The final application was built to be expandable with future datasets allowing future phases of development to continue adding new types of data to the visualization.

The first of these was the introduction of satellite and ground based instrument data in a second phase of the project, again through the utilization of an API endpoint provided by the University. With the existing structure of the first phase, minimal refactoring was required to allow the interface to support the new datasets. Development is continuing in phases for this project and the application is currently in its alpha stage.

Ultrasound Processing Application

Ultrasound Processing Application to Blackbox API

For the platform developed for Morphometrix the development team utilized a broad set of technologies to produce a modern and easy to use web application. The primary goal of the application was to provide users with a front-end that was intuitive and would allow equine veterinarians to upload ultrasound videos and provide the needed data for a proprietary back-end to process and analyze the ultrasound. Through the analysis multiple data points would be generated, these data points can be viewed directly in the application, including 3D imaging, charts, images, and videos.

Throughout the development process as the Team Lead of the project I assisted developers with prioritizing work through weekly sprint planning, acting as the SCRUM master for the project, while also contributing code as a developer. As Team Lead I was also responsible for managing our CI/CD process and ensuring that production deployments could be completed efficiently while also maintaining high uptime on the application. The final product is being deployed to AWS on Elastic Beanstalk and Fargate resources running Ruby and Docker instances, respectively. This deployment process was automated with a testing suite for the application running on GitLab and a final manual QA driven approval before automated tiered deployments occurred to staging, demo, and finally production environments.

City of Grande Prairie

City of Grande Prairie Website

After continuing to add to my understanding of Drupal and gaining a greater level of expertise, I was assigned a new project for a website build for the City of Grande Prairie. My largest project to date, this proved to be a rewarding challenge that pushed my abilities with Drupal and have honed my understanding of the CMS. The new website brought together content from numerous sources using maps, news feeds, calendars, item lists, and other formats to clearly and concisely present content in an easy to navigate structure.

Township of Clearview

Clearview Website

The Township of Clearview in Ontario approached Upanup to build a replacement website for their outdated website, however with new legislation in the province they needed to directly target improving the accessibility of their website. By working with the design team throughout the design process and into development we were able to focus strongly on accessibilty and meet the required WCAG 2.0 AA standard and even go beyond that requirement in many places. With the success of the Clearview website all Upanup projects have begun to meet a higher level of standards for accessibility.

TPC Financial

TPC Financial Website

As an ongoing maintenance client with Upanup, TPC Financial approached us to breath some new life into their existing website. With the assistance of our internal design team new designs were created. Using existing content a new structure was formed around their website and gave the online brand for TPC Financial some much needed improvement. Their website was made fully responsive, with consistent styling throughout the website with improved readability.

Comox Sanitation and Waste Management

CSWM Website

The Comox Sanitation and Waste Management (CSWM) website was built from the ground up using a new Content Management System (CMS) that I had not used in the past extensively, Drupal. This was an exciting challenge for me and with the help of online resources and my coworkers I was able to deliver to the client a highly functional and visually appealing new website that fulfilled the goals of the project. This website also contained complex maps as well as a few customized webforms to move CSWM from paper forms to more user friendly online forms.

Pembina Hills Public Schools Multi-Site Network

Pembina Hills Public School Website

Upon moving from my previous position and joining Upanup my first project was a multi-site WordPress network for the Pembina Hills Public School Division. This multi-site network required two themes for launch, one for their main division site and another for the schools in the division. These two themes were designed in house by the design team and then provided to me, from which I built the division and school themes. Using modern HTML5 and CSS3 the designs were given life, JavaScript was applied on top of these new themes to increase the functionality and usability of the website.

If you are interested in seeing more of my past projects please reach out for a meeting with me. Many of my projects are client driven and not available for display publicly.