Tyler Hawkins

thawkin3@byu.net

Web Applications

JS Data Structures

JS Data Structures and Algorithms

npm package and learning tool complete with a playground of interactive examples.

Built with: Vanilla JavaScript, React.js, Storybook

View in GitHub

Webpack Demos

Webpack Demos

Example demos for key features in Webpack, including various loaders and plugins.

Built with: Webpack 4, Vanilla JavaScript, React.js

View in GitHub

React Concepts Demo

React Concepts Demo

Example demos to illustrate different key pieces of React's functionality, including some of its newest features.

Built with: React.js, React Router

View in GitHub

Node.js Event Loop

Node.js Event Loop

Demo app for better understanding the Node.js event loop.

Built with: Node.js, Express, Vanilla JavaScript, Heroku

View in GitHub

Tables and Grids

Tables and Grids

Examples and guidance for building accessible tables and grids in React.

Built with: React.js, Storybook

View in GitHub

Article Recommendation Engine

Article Recommendation Engine

Similarity search using the Pinecone SDK to find articles that are similar to ones you've read in the past.

Built with: Python, Flask, Pinecone SDK

View in GitHub

A11y Workshop

A11y Workshop

Workshop on common accessibility issues, how to identify them, and how to correct them.

Built with: React.js, React Router

View in GitHub

Accessible Tooltips

Accessible Tooltips

Examples and guidance for building accessible tooltips in React.

Built with: React.js

View in GitHub

Nested Interactive Content

Nested Interactive Content

Examples and guidance for building accessible nested interactive content in React.

Built with: React.js

View in GitHub

Card Components

Card Components

Examples and guidance for building accessible card components in React.

Built with: React.js

View in GitHub

Accessible Listboxes

Accessible Listboxes

Examples and guidance for building accessible listboxes in React.

Built with: React.js

View in GitHub

Fun Facts SMS

Fun Facts SMS

App that allows users to enter their phone number to receive an SMS text with a fun fact.

Built with: Node.js, Express, Infobip API

View in GitHub

NES Games API

NES Games API

Simple REST API. Tests written with Insomnia and Inso. Run in a CI pipeline using GitHub Actions.

Built with: Node.js, Express, Insomnia, Inso CLI, GitHub Actions

View in GitHub

API Wrapper Demo

API Wrapper Demo

Demo of some concepts from Clean Code, Chapter 8. Thin layers of abstraction and API wrappers.

Built with: React.js, Moment.js, Day.js, date-fns

View in GitHub

Plagiarism Checker

Plagiarism Checker

Similarity search using the Pinecone SDK to find articles that contain the same or similar content as what's entered by the user.

Built with: Python, Flask, Pinecone SDK

View in GitHub

Customer Service Chatbot

Customer Service Chatbot

Similarity search using the Pinecone SDK to find similar questions from a dataset.

Built with: Python, Flask, Pinecone SDK

View in GitHub

Readit

Readit

Reddit clone app. View subreadits, posts, comments, and users.

Built with: React.js, React Router, Apollo Client, Slash GraphQL

View in GitHub

Pokédex Slash GraphQL

Pokédex Slash GraphQL

Gotta catch 'em all. Mark which ones you've captured. Filter your Pokémon by type or captured status.

Built with: React.js, Material UI, Slash GraphQL

View in GitHub

Puppy Playdate

Puppy Playdate

Tinder clone app, but for puppies. Find the perfect friend for your new puppy.

Built with: React.js, Apollo Client, Slash GraphQL

View in GitHub

Dad Joke "Dadabase"

Dad Joke Dadabase

Where do you keep your dad jokes? In a "dadabase" of course. Rate my jokes.

Built with: Vanilla JavaScript, Heroku, GraphQL, JSON Server

View in GitHub

HTML to PDF Demo

HTML to PDF Demo

Demo app exploring various PDF export solutions.

Built with: Vanilla JavaScript, DocRaptor, pdfmake, jsPDF

View in GitHub

Single-SPA Demo

Single-SPA Demo

Simple demo app resulting from my single-spa tutorial.

Built with: single-spa, React.js, React Router, Heroku, AWS S3

View in GitHub

Unit Price Calculator

Unit Price Calculator

Uses seven new JavaScript features from ES2020.

Built with: Vanilla JavaScript, Heroku

View in GitHub

Pun Generator

Pun Generator

View some terrible puns with this app. Experimental test strategy using DOM Testing Library.

Built with: Vanilla JavaScript, DOM Testing Library

View in GitHub

Totes Votes

Totes Votes

Full stack voting app complete with authentication and CRUD API.

Built with: MongoDB, Express, AngularJS, Node.js, C3.js

View in GitHub

JavaScript 30 Challenge

JavaScript 30

30 JavaScript apps in 30 days.

Built with: Vanilla JavaScript

View in GitHub

Office Competition Ranking

Office Competition Ranking

Full stack app for leaderboard rankings for games like ping pong.

Built with: MongoDB, Express, Node.js, Passport, jQuery

View in GitHub

Crossy Block

Crossy Block

HTML5 Frogger-like game.

Built with: MongoDB, Express, AngularJS, Node.js, Canvas element, requestAnimationFrame

View in GitHub

Venue Finder

Venue Finder

App similar to Yelp to help you find great places for entertainment in any geographic location.

Built with: MongoDB, Express, AngularJS, Node.js, Yelp API

View in GitHub

MongoDBreakout

MongoDBreakout

Knock-off Breakout game.

Built with: MongoDB, Express, AngularJS, Node.js, Canvas element, requestAnimationFrame

View in GitHub

Chat Sockets

Chat Sockets

WebRTC app that creates a simple chatroom. Complete with a Giphy integration.

Built with: MongoDB, Express, AngularJS, Node.js, Socket.io, Giphy API

View in GitHub

Qrappy Bird

Qrappy Bird

Everyone's favorite Flappy Bird knock-off, complete with a theme song.

Built with: MongoDB, Express, AngularJS, Node.js, requestAnimationFrame

View in GitHub

Pixel Mania

Pixel Mania

Multiplayer game (WebRTC) similar to agar.io

Built with: MongoDB, Express, AngularJS, Node.js, Socket.io, Canvas element, requestAnimationFrame

View in GitHub

Corporate BS Generator

Corporate BS Generator

Parody app for helping you communicate with your boss.

Built with: Express, Node.js, jQuery

View in GitHub

Bubble Ball

Bubble Ball

HTML5 game in which you must dodge all the incoming obstacles to stay alive.

Built with: Canvas element, requestAnimationFrame, Vanilla JavaScript

View in GitHub

Stacks on Stacks on Stacks

Stacks on Stacks on Stacks

HTML5 game in which you must jump on top of incoming platforms to make the tallest stack.

Built with: jQuery, CSS3 animations

View in GitHub

React+Redux Walking Skeleton

Redux Example

Walking skeleton of a React+Redux app built using create-react-app.

Built with: React.js, Redux

View in GitHub

Comment Board

Comment Board

Post a comment and your name to contribute to the discussion.

Built with: MongoDB, Express, Node.js, jQuery

View in GitHub

Markdown Previewer

Markdown Previewer

App that allows you to write marked up content and see the output side by side.

Built with: React.js, Marked library

View in GitHub

Free Code Camp Leaderboard

Free Code Camp Leaderboard

Sortable/filterable table pulling in data from a webservice.

Built with: React.js, FreeCodeCamp API

View in GitHub

Recipe Box

Recipe Box

App for storing your favorite recipes. CRUD API.

Built with: React.js, React Router, Local Storage

View in GitHub

Conway's Game of Life

Conway's Game of Life

Interactive Conway's Game of Life simulation.

Built with: React.js

View in GitHub

Dungeon Crawler

Dungeon Crawler

Battle enemies, find weapons, eat food, defeat the boss.

Built with: React.js

View in GitHub

Drum Machine

Drum Machine

Click on the drum pads to hear each sound.

Built with: React.js

View in GitHub

Camera

Camera

Desktop camera app that lets you take a picture and download it using the HTML5 getUserMedia API. (Note: HTTPS is required.)

Built with: jQuery, getUserMedia API

View in GitHub

Quote Generator

Quote Generator

Simple demo for reading JSON from a file via an AJAX request.

Built with: XMLHttpRequest, JSON

View in GitHub

Utah Weather

Utah Weather

Simple demo for text suggestions, reading JSON from a file, and using a weather API service.

Built with: Express, Node.js, Weather API

View in GitHub

The Movie Database

The Movie Database

Find a good movie to watch with this simple API demo with a sortable/filterable table.

Built with: jQuery, Movie Database API

View in GitHub

Wikipedia Search Engine

Wikipedia Search Engine

Search for top Wikipedia articles or find a random article.

Built with: jQuery, Wikipedia API, CSS3 Keyframe Animation

View in GitHub

Best Music

Best Music

Upload your favorite songs and then vote on them.

Built with: MongoDB, Express, AngularJS, Node.js

View in GitHub

Current Local Weather

Current Local Weather

Uses your location and a weather API to find the current weather for your location.

Built with: Geolocation, Weather API

View in GitHub

Twitch TV Streamers

Twitch TV

Simple app that uses the TwitchTV API to show which of your favorite streamers are online and which are offline.

Built with: jQuery, TwitchTV API

View in GitHub

JavaScript Calculator

JavaScript Calculator

Calculator UI capable of doing some simple math.

Built with: Vanilla JavaScript

View in GitHub

Pomodoro Timer

Pomodoro Timer

Timer UI to help keep you more productive.

Built with: Vanilla JavaScript

View in GitHub

Pokedex

Pokedex

Gotta catch 'em all. Keep track of your Pokemon here by adding an image and a name.

Built with: MongoDB, Express, AngularJS, Node.js, C3.js

View in GitHub

Camper News

Camper News

News feed delivered to you via the FreeCodeCamp API.

Built with: jQuery, FreeCodeCamp API

View in GitHub

Firebase Chatroom

Firebase Chatroom

WebRTC chatroom built with a Firebase database from Google.

Built with: AngularJS, Firebase

View in GitHub

Scroll up to previous section (Web Applications) Scroll to top of page Scroll down to next section (Microservices)

Website Designs

Adoptly

Adoptly

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Armando Perez

Armando

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Bass

Bass

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

BestBite

BestBite

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Bolt Network

Bolt Network

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Broadway

Broadway

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Excursion

Excursion

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Headlines

Headlines

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Innovation Cloud

Innovation Cloud

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Junction

Junction

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

MOVE

MOVE

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

NewsRoom

Newsroom

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Pocketbook

Pocketbook

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Red Eye Photography

Red Eye Photography

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Shutterbugg

Shutterbugg

Website design concept.

Built with: HTML, CSS, Bootstrap

View in GitHub

Technical Documentation Page

Technical Documentation Page

Example technical documentation for React Native.

Built with: HTML, CSS, Bootstrap

View in GitHub

Product Landing Page

Product Landing Page

Example product landing page.

Built with: HTML, CSS, Bootstrap

View in GitHub

Survey Form

Survey Form

Example survey form to demonstrate styling with Bootstrap.

Built with: HTML, CSS, Bootstrap

View in GitHub

Scroll up to previous section (Website Designs) Scroll to top of page Scroll down to next section (Data Visualizations)

Microservices

Exercise Tracker

Exercise Tracker

Create a user, log workouts, and view past workouts with this microservice and GUI.

Built with: MongoDB, Express, Node.js

View in GitHub

Timestamp Microservice

Timestamp Microservice

Provide a date in any format and get a UNIX timestamp and normalized date back.

Built with: Express, Node.js

View in GitHub

Request Header Parser Microservice

Request Header Parser Microservice

Shows some basic request header data like your IP address, language, and user agent.

Built with: Express, Node.js

View in GitHub

URL Shortener Microservice

URL Shortener Microservice

Similar to bit.ly or tinyURL. Enter a URL and get back a shortened URL which points to your original URL.

Built with: MongoDB, Express, Node.js

View in GitHub

Imgur Search Engine

Imgur Search Engine

Search API built off of Imgur's search API.

Built with: MongoDB, Express, Node.js, Imgur API

View in GitHub

File Upload Metadata Microservice

File Upload Metadata Microservice

Upload a file and see its metadata.

Built with: MongoDB, Express, Node.js

View in GitHub

Scroll up to previous section (Microservices) Scroll to top of page Scroll down to next section (Games)

Data Visualizations

Bar Chart of GDP

Bar Chart of GDP

Bar chart of GDP from the USA.

Built with: D3.js

View in GitHub

Scatterplot of Doping

Scatterplot of Doping

Scatterplot of doping in professional bicycling.

Built with: D3.js

View in GitHub

Heat Map of Global Temperature

Heat Map of Global Temperature

Heat map of global temperature from 1753 to 2015.

Built with: D3.js

View in GitHub

Force Directed Graph of Countries

Force Directed Graph of Countries

Force directed graph of state contiguity. See which countries are neighbors. Drag a node on the map to see the data move.

Built with: D3.js

View in GitHub

World Map of Meteorites

World Map of Meteorites

World map of meteorite landings. Zoom in, click and drag.

Built with: D3.js

View in GitHub

Scroll up to previous section (Data Visualizations) Scroll to top of page Scroll down to next section (About)

Games

Duck Hunt

Duck Hunt

Classic NES Duck Hunt for your browser.

Built with: jQuery

View in GitHub

Tic-Tac-Toe

Tic-Tac-Toe

Three in a row. Good luck ever beating the computer.

Built with: jQuery

View in GitHub

Super Mario

Super Mario

A simple Mario demo game built into a Qualtrics survey.

Built with: jQuery, Qualtrics

Piano

Piano

Turns your boring computer keyboard into an exciting piano keyboard.

Built with: jQuery, HTML5 audio

View in GitHub

Canvas Animation

Canvas Animation

Showcases a simple animation using an HTML5 canvas. Keep watching until all the whitepace is covered.

Built with: Vanilla JavaScript, Canvas element

View in GitHub

Connect Four

Connect Four

Grab a friend to play and then get four in a row to win.

Built with: jQuery

View in GitHub

Dot Chaser

Dot Chaser

Make all the dots blue to win. It's harder than it looks.

Built with: Vanilla JavaScript, Canvas element

View in GitHub

Dinosaur Park Survey

Dinosaur Park Survey

Qualtrics survey feeding off the hype around the latest Jurassic Park movie.

Built with: HTML, CSS

Squarexploder

Squarexploder

Psychology experiment to compare task speed in matching objects with various colors and letters.

Built with: jQuery, jQueryUI drag and drop

View in GitHub

Simon Says

Simon Says

Test your memory and click the colors in the right order.

Built with: jQuery, HTML5 audio

View in GitHub

Growing Bubbles

Growing Bubbles

Clear the bubbles of the correct color from the screen. How many rounds can you last?

Built with: jQuery, jQuery animations, Soundcloud

View in GitHub

Click the Dot

Click the Dot

Just try and catch the dot. It will frustrate humans and cats alike to no end.

Built with: Vanilla JavaScript

View in GitHub

Scroll up to previous section (Games) Scroll to top of page Scroll down to next section (Skills)

About

I'm an experienced software engineer, writer, speaker, leader, and accessibility advocate. I love to write/blog and have written 110+ articles with over 1.5 million page views. I've spoken at several tech conferences and have been interviewed on many podcasts as well.

I'm self-taught! I have a bachelor's degree in Statistics with a minor in Psychology from Brigham Young University. Mid-way through my undergraduate studies, I took an interest in web development and began teaching myself through online courses such as Udemy, Pluralsight, Codecademy, Khan Academy, HackerRank, and freeCodeCamp. I took a few computer science classes at BYU as well to learn the MEAN stack and excelled at those. I began building web applications in my free time to gain experience and then landed a development job at Qualtrics on their Engineering Services team.

After a few years at Qualtrics, I took a UI Developer role at Younique where I worked with React.js to expand our component library, refactor/improve our website, and establish best practices in UI development for the rest of the company. I spent a lot of time mentoring junior developers and often taught workshops on React, test-driven development, and unit testing. After a year I was promoted to be a Senior UI Developer.

In early 2019 I joined Instructure, where I worked on an application called Bridge, which focuses on something near and dear to my heart: employee development and career management. It was here that I discovered my passion for web accessibility.

In 2020 I joined Workfront as a Senior Software Engineer. My focuses were on improving our design system, web accessibility, testing practies, and our engineering culture.

In December 2020, Workfront was acquired by Adobe, and I officially became an Adobe employee in February 2021. For about a year and a half in 2021-2022, I led a team of accessibility engineers as we made the Workfront app more usable for everyone. Now I'm back to a somewhat normal senior software engineering role.

My hobbies include reading, writing, snowboarding, biking, skydiving, juggling (fire!), playing drums and keyboard, and spending time with my beautiful wife and kids.

Scroll up to previous section (About) Scroll to top of page Scroll down to next section (Work Experience)

Skills

My main areas of expertise are JavaScript (ES6+), React, HTML5, and CSS3. Unit testing is extremely important to me. In the React ecosystem, I typically use Jest with React Testing Library to write my tests. I'm passionate about web accessibility, am well-versed in the WCAG docs, and always write code that meets the WCAG 2.1 AA success criteria. I also have experience building design systems and working with the developer tooling involved in maintaining a repo.

I love to write/blog and have written over 110 articles with over 1.5 million page views on Medium, Dev.to, Hacker Noon, DZone, and freeCodeCamp. I've spoken at 8 tech conferences, served on the program committee for 2 tech conferences, and been interviewed on 4 podcasts. I frequently present in company-wide engineering trainings and conferences. Teaching, presenting, and mentoring are things that energize me.

I enjoy contributing to open-source software and have made commits in several repos: storybook, preact-www, single-spa, front-end-interview-handbook, focus-trap-react, focus-trap, and tabbable.

Other technologies I've used are: Babel, Webpack, Rollup, TypeScript, Redux, Node.js, Express, MongoDB, GraphQL, Storybook, jQuery, AngularJS (1.x), PHP, Java, SQL, Git, and JIRA. I'm also an AWS Certified Developer Associate.

Scroll up to previous section (Skills) Scroll to top of page

Work Experience

Senior Software Engineer, Tech Lead

Adobe

February 2021 - present

Senior Software Engineer, Tech Lead

Workfront

March 2020 - February 2021

Senior Software Engineer

Instructure

February 2020 - March 2020

Software Engineer, Tech Lead

Instructure

February 2019 - February 2020

UI Developer IV (Senior Developer)

Younique

October 2018 - February 2019

UI Developer

Younique

September 2017 - October 2018

Front End Developer - Engineering Services

Qualtrics

October 2015 - September 2017

Web Designer - Design Team

Qualtrics

June 2015 - October 2015

Product Specialist - Technical Support

Qualtrics

April 2014 - June 2015