Hi, my name is
Doug Beckwith
I'm a Full Stack Developer.
I love exploring and learning new technologies. User experience, and writing clean accessible code, matters to me. Currently, I'm working on building responsive full stack web applications.
Portfolio
About
Web Developer based in BC, Canada.
Software Development started out as a hobby for me. I enjoyed it so much I decided to make a career change. I’m currently building web apps using React and Node.js. Each new project I create, I learn something new that improves my developer skills.
My favorite project so far is The Halo Infinite project below that I built with another software developer. When I'm not working, you'll typically find me either golfing, working out, or enjoying gaming with my friends.
These are the technologies I've worked with.
HTML
CSS
JavaScript
React
TypeScript
Tailwind CSS
Node.js
Express
PostgreSQL
MongoDB
Git
Projects
These are my personal projects I've completed, or I'm currently working on. Please allow for slow load time on projects deployed on Heroku.
Golf Stats
Description
I am building a full-stack web app that allows users to track their golf stats. This app uses a RESTful API so users can view create delete update stats on each golf club they own and more. It uses MongoDB for storing users golf data.
Problems and Solutions
While building a more complex app I was having problems writing too much code in once place. I did some research and found out about the MVC design pattern. This allowed me to create a project that was a lot easier to understand and build.
Lessons Learned
I learned that having a strong project design and feature plan before starting can save development time. I understand now the need to break the project up into multiple sections using The MVC design pattern. I learned how to build my API end points using the RESTful API design. I also had to learn about Authentication and Authorization.
Technologies
React, Node.js, Express, MongoDB, Mongoose, Tailwind, Git.
Crypto Tracker
Description
This web app fetches the top 100 cryptocurrency data from an API. It uses the returned data to display information about each cryptocurrency. You can filter cryptocurrencies, view charts, and make a watchlist.
Problems and Solutions
While working on the watchlist feature of the app my watchlist was getting erased anytime I refreshed the webpage. I was able to learn about local storage and store an array of cryptos to repopulate the DOM on refresh. I also felt my code was getting harder to read with chaining .then() methods. So, I learned the async await syntax to make my code more readable.
Lessons Learned
I was able to better understand local storage and its use cases. I also learned how to implement different libraries to help with displaying data using charts and spinner icons for when data is loading. I learned about the React Router v6 library for client-side routing.
Technologies
React, JavaScript, Tailwind, Git
Halo MMR
Description
This app was built to help anyone visualize their match making rating and competitive skill rating data in Halo Infinite. It helps solve the problem of understanding your ratings as the ranking system does not give players good feedback. When the website was live it got around 1000 unique users per day and over 10,000 page loads a day. Although the game has become inactive and we no longer play it, we have taken it down. However, the GitHub repository is still accessible.
Problems and Solutions
I had issues with promises and async JavaScript. Specifically, with making a second API using the data returned from the first API call. I was able to fix this by using promises and chaining the .then() method after the first API call. My other problem was the match data returned was always in a random order. I had to learn how to sort the data by using the new Date object and the .sort() method in JavaScript.
Lessons Learned
This project gave me a great understanding of built-in methods in JavaScript for iterating through Objects and Arrays and working with async JavaScript. I learned how React useState works and how to pass data through props and create reusable components. I was able to use GitHub to work with other developers.
Technologies
React, JavaScript, Tailwind, Git
Phrase Hunter
Description
This web app is a phrase guessing game. A player continues to select letters until they guess the phrase (and win), or make five incorrect guesses (and lose).
Problems and Solutions
My biggest problem in this project was having a good understanding of classes. I was using arrow functions in my game class, which was giving me unexpected results. After some reading on MDN, I learned that the keyword (this) in the arrow function was not referring to the game object. I was able to change the arrow functions into a regular function to access the class object.
Lessons Learned
In this project I learned a good understanding of classes in JavaScript. I now understand how to create classes with methods and variables. I learned the keyword (this) and how to access methods and variables from classes. I learned to use modules to separate my game logic, along with the need to have descriptive variables, function names and how to leave good comments for other developers and myself.
Technologies
JavaScript, HTML, CSS, Git