Hey! New shoes?

React Site
March 1st, 2021

The Problem

When I was following tutorials for programming in React, I wanted to challenge myself to build a website from scratch that was unlike any of the cookie-cutter projects that many of the tutorials offered. I decided to make a simple website which would show short video clips from a YouTube content creator I really like, Brian David Gilbert. I wanted the website to match Brian's whimsical style but also not get in the way of his content.

The Solution

Working over a couple of weekends, I built a quite animated website with React and Framer Motion which displayed random video clips from Brian's many videos. The site also linked to Brian's social medias and provided links to the original sources of all the video clips in order to credit him properly. This project gave me the experience of building a "real world" project instead of relying on the safe confines of a tutorial project.

The Skills Honed

  • React
  • CSS
  • Framer Motion animation framework
  • Google Search Console
  • Cross-device/browser testing
  • Vercel Deployments

The Lessons Learned

Ensure website media compatibility: For example, iOS and Safari do not support the .webm video format, something I did not learn until after I launched. I was able to switch all video files to the .mp4 format easily, but this was something that should have been caught early on through testing.

Concretely define minimum viable product: This project fell prey to feature creep in a way that would have been easily preventable had I used a list of deliverables. I was only able to finish the project once I constrained the features the site would have.

Screenshots