Portfolio

Angular Task Manager

Demonstrates use of:

  • Two-way binding.
  • Content projection with ng-content.
  • A custom pipe with PipeTransform.
  • Use of RxJs to combine two streams of data (tasks and projects) and shows combined results in the template.

Task cards demonstrate full CRUD capability. Users can also manage projects. If any task cards are linked to a particular project, the user won't have the ability to delete that project.

Features that have not been added yet include: (1): UI/UX for due dates that are in the past; (2) Remove the ability for users to add a due date in the past; (3) Users ability to update a project – currently users can only create, read, and delete projects; (4) New information entered by user is not stored and does not persist.

CAN bus with React.js and Typescript

  • Programmed using React/Typescript.
  • Utilizes custom "drag and drop" functionality.
  • Decodes a binary file, parses through it with respect to 17-byte UDS communication protocol, converts back to binary and makes the new file available for download.

This React/Typescript app parses a binary file to extract transfer data from a CAN bus communication log between a dongle and an engine computer. It then converts the data back to binary and provides a download option.
*To see this app in action, I can provide the starter file upon request.

Ownership Page - Figure Financial

  • Utilizes Angular with NgRx.
  • Self-referencing design structure with customer input.
  • Users can edit data "inline" using the edit button on each row.
  • Tables become "scrollable" on mobile, with an indicator to the user (see gif).

I was given the responsibility to design a system that could efficiently organize customer input, using a self-referencing structure. Essentially, when a customer filled out ownership information, specific details from this input would automatically cascade into other tables. This allowed users to interact with the data at various levels, ensuring a seamless and consistent flow of information throughout the system.
*To demo, go to Ownership Page > both user/pass are: “spencer.ricks” > click “Test 1” > “Business Questionnaire” > “Ownership”. Interact with the page.
**I do not have access to this codebase anymore, the experience is subject to change.

Geo-locator - Gladiator

  • Utilizes a custom-built Node.js middleware for integration between Shopify and SAP.
  • If the user has location services enabled in the browser, this geo-locator will estimate a zip code/postal code based on their IP address.
  • With the source of truth being SAP, the script would update Shopify product quantites on a location basis twice per day to ensure quantities were in sync.

The goal of this project was to allow users to enter their zip code (or postal code for Canada) and for the online storefronts to automatically display or hide products based on their availability at the nearest fulfillment center. This feature needed to seamlessly integrate with Shopify's product quantites and the client's ERP system, SAP. The solution ensured customers saw only the products they could actually purchase and have delivered from their closest distribution point.
*I do not have access to this repo anymore. This experience is subject to change.

Scheduler middleware

  • Integrates APIs between Acuity and 7shifts to simultaneously schedule staff as a client makes a booking.
  • Central server built utilizing Node.js with Express.js.
  • Constructed Node/Express server from scratch.

When a user schedules an appointment (on Acuity), the company's staff is automatically notified and scheduled (on 7Shifts). Likewise when an appointment is cancelled or edited.

click for screenshots

Willow Bay Resort

This site was build for Willow Bay Resort using a template with pre-built JavaScript, JQuery, HTML, and CSS. Other services were added to the template, see below bullet points. The site serves to provide information about resort services to the user.

  • Users can autonomously book a camper spot or boat rental.
  • Users can find location and weather information directly on the site.

*I no longer have access to this repo. This experience may have changed from the screenshots

Skillset

  • Angular

  • RxJs

  • React

  • Redux

  • Vue

  • nodejs

  • express

  • Typescript

  • javascript

  • html5

  • css3

  • SCSS

  • Figma

  • Git

  • Postgres

  • Firebase

  • Shopify

  • WordPress

  • AEM

  • Accessibility

  • OneTrust

  • BeePro

  • Litmus

  • Handlebars.js

About Me

Hi, I'm Spencer.

I began my career in the Finance and Commercial Real Estate sectors, where I worked as a commercial real estate appraiser. While I excelled in this field, I found my true passion lay in the software that helped my team create appraisal reports. This realization led me to transition into software development, combining my unique industry experience with a deep interest in technology.

Through extensive training and hands-on projects, I've become a skilled software engineer, bringing a unique perspective to my work. My background in real estate and finance allows me to understand the business side of things, while my technical skills enable me to develop effective software solutions.

According to my recent Gallup StrengthsFinder test, my top five strengths are Restorative, Focus, Futuristic, Significance, and Consistency. With three out of five strengths in the "Executing" quadrant, I have a proven ability to meet deadlines and deliver results.

In my free time, I enjoy spending time with my family and indulging in my passion for cars, especially behind the wheel.

If you're looking for a dedicated professional who can bridge the gap between business and technology, I'd love to connect.

Get in touch

I would love to hear from you! Feel free to reach out at any time.