Computer Science Club Website

I am one of the contributors to the CSC website, which you may be on right now. We decided to use Next.js, a popular React JavaScript library. We early on made the decision to use TypeScript to catch common issues. I always enjoy the benefits of type-safe languages, not least for the editor support that comes with them.

Apart from bootstrapping the project, some of my major areas of contribution included my own page, https://unwcsclub.dev/students/austin-long and the slideshow.

The slideshow was an interesting test of my React skills (I must admit, some of ChatGPT’s React skills). I needed to create a mini library that would enable a cool system I thought up. A slideshow would contain multiple slides, and each slide would consist of multiple elements. I came up with three React components for this: Slideshow, Frame, and Element. Each Element would be able to individually animate in simultaneously with the other elements of its Frame. Obviously, I wanted only one Frame to be in view at a time. Thus, I needed to have some way for Slideshow to pass the index and Frame information down to the individual Elements. The issue was to get the indexes of the Frames.

So, after trying out a couple different techniques, I landed on using an array of components as a prop like so:

<Slideshow
  advanceTime={20}
  animationDistance={10}
  inBetweenTime={1}
  animationTime={1.5}
  frames={[<AustinFrame key={0} />, <DemoFrame key={1} />]}
/>

I didn’t use React’s children prop because I would have had to use React.Children, which isn’t best practice. Also, the custom prop is more self-documenting.