Projects
Website rebuild for the Patriot Par 3 golf tournament
A local golf tournament charity needed a rebuild for their website. They suffered from slow page loading speeds, poor SEO, and a messy layout. I decided to use NextJS for this task to get the frontend benefits of a JavaScript framework, but still have great SEO due to Server Side Rendering. One of the problems I ran into while building the new website was that they wanted an image carousel, but I hadn't built one before. I realized that there are a few problems that you need to solve to make one of these. The first problem is that you have to design the layout and behavior. Fortunately, I found a great package on NPM called react-image-gallery that handled the layout. This was a huge help, but I still had to link all of the photos with the image gallery component. I wrote some TypeScript code and used some NodeJS to iterate through the photos, sort the photos by filename, and then write the filenames to a JSON file for later use. There were just two more problems. This image gallery also has thumbnails at the bottom of the container, but it can't dynamically resize the images. Also, some of the images were of different dimensions, and they were overflowing the image gallery container. To solve this, I used Sharp, which is a NodeJS library that can resize, rotate, and convert photos, among other capabilities. I was now able to pick a standard size for all photos. Ones that were too large could be shrunken down, and ones that were too small would have a black inner border applied. I also needed to build a contact form for the website. There are a lot of form libraries, but I had already created a form with React Hook Form and Tailwind previously. I decided I would try out the React Server Actions pattern, which allows you to forego creating a REST API manually. You just write functions that only execute on your server, and then return the result to your client component. I also implemented Google ReCaptcha Enterprise to prevent bot submissions without adding user friction, as this version of ReCaptcha operates seamlessly without requiring any input from visitors. No more annoying checkboxes! The final result not only has significantly more information on each page, but it also has a much easier-to-read layout. The new website loads significantly faster than the WordPress site they had before. Google PageSpeed index reports that the new site loads twice as fast.
Vid Vortex
Vid Vortex is a website that I created while learning Python and Flask. I frequently used YouTube video downloading websites and would walk away from them feeling frustrated by the lack of high resolution video, multiple codecs, or even sound! I knew that I could do better, so I created Vid Vortex. You simply paste the URL of the YouTube video that you want to download, hit submit, select your resolution, and press confirm. Within seconds, you're able to download the video to your device. It's perfect for when traveling on road trips, or in airplanes where network connectivity is limited.
Van Life Mockup
Van Life is a static website that I created as part of a tutorial while learning React Router by Remix. It allowed me to build true single page applications (SPAs) with navigation between pages. I also got acquainted with Google Firestore, which is a NoSQL database that allows for building Jamstack (serverless) frontends for the web.
