Frontend Mentor - Coding Bootcamp Testimonials Slider

A Testimonials Slider react component

This is a React refactor of my initial submission (HTML/CSS/JS to the Coding bootcamp testimonials slider challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

This slider component's design included a mobile and desktop view and needed a graceful way for the desktop view to scale down.

The component defaults to the mobile view and accepts large boolean prop. I also added faint click sounds with the useSound hook.

Links

• Solution: https://www.frontendmentor.io/solutions/coding-bootcamp-testimonials-slider-QC5h4Tday
• Live Site: https://testimonials-slider-astroud.vercel.app/

My process

Built with

• React
• Styled Components
• React Transition Group
• useSound

What I learned

This project gave me the opportunity to work more with Styled Components and was my first experience with React Transition Group.

Useful resources

• What the heck, z-index?? - This Josh Comeau helped me better understand the stacking order of HTML elements with z-index.
• The styled-components Happy Path - This Josh Comeau article convinced me to try out Styled Components. I didn't refer to it for this project but I highly recommend it.
• Additional notes - Additional notes from refactoring HTML/CSS/JS FEM challenges.

Author

• Website - Aaron Stroud
• Frontend Mentor - @astroud
• Twitter - @aaron_stroud