This is a solution to the Coding Bootcamp Testimonials Slider challenge on Frontend Mentor.

• Overview
  • Screenshot + Video
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

• Desktop

• Mobile

• Solution URL: https://github.com/rashidshamloo/fem_029_coding-bootcamp-testimonials-slider/
• Live Site URL: https://rashidshamloo.github.io/fem_029_coding-bootcamp-testimonials-slider/

• Vite / React.js
• TypeScript
• Framer Motion
• Tailwind CSS
• Semantic HTML5 markup

• Using TypeScript with React.js
• Using interfaces for component props in TypeScript
• Implementing components that wrap around other elements and take them as a prop (children)
• Iterating through component children and modifying/adding to their props
• Using React.cloneElement, React.isValidElement, React.ReactNode and React.Children in TypeScript
• Debugging (Googling) TypeScript errors (lots of them!) and learning from them
• Using Event Listeners that change the state in React components inside the useEffect() hook
• Detecting swipe left/right from a touch device using react-swipeable hook
• Using bg-[length:] to set arbitrary value for background size in Tailwind CSS
• Why margin-top moves the parent down (margin collapsing) instead of leaving an empty space and how to fix it (overflow:auto; on parent)
• Using Framer Motion animation library with React.js
• Using variants in Framer Motion
• Using <AnimationPresence> in Framer Motion to keep animating components when they're removed from the DOM
• Using useRef() hook in TypeScript
• Adding custom breakpoints in Tailwind CSS

• Framer Motion - The animation library i used in this challenge
• React Swipeable - The hook i used for touch/swipe functionality
• How to update state inside event listeners
• How to fix margin collapse of parent element when the child has margin-top
• How to use useRef() hook in TypeScript

• Frontend Mentor - @rashidshamloo
• Twitter - @rashidshamloo