Galleria slideshow site solution

Overview

The challenge

Users should be able to:

View the optimal layout for the app depending on their device's screen size
See hover states for all interactive elements on the page
Navigate the slideshow and view each painting in a lightbox

Screenshots

Setup

To run this project locally:

yarn && yarn start

npm install && npm start

My process

Built with

React
React-Router-Dom
Styled Components
Framer-Motion
Macy.js
Redux Toolkit
TypeScript
Mobile-first workflow

What I learned

In this project I had more practice with state management using Redux Toolkit used to control not only state of slides, but also image lightbox. I played quite a bit with Framer-Motion to create animations, I learned how to stagger children elements, how to animate page transitions etc. I learned one new tool I haven't used before - Macy.js - a lightweight library to create masonry grid.

If there is one code fragment I'd like to highlight, that would be slides autoplay/stop logic. Here I made use of 2 react hooks: useRef to store interval ID and preserve it before re-renders and useEffect, which if returns a function, that function will be called 1) right before next time useEffect is run 2) when component is unmounted. This was ideal use case for clearing the interval.

  const id = useRef<number | undefined>()

  const clearInterval = () => window.clearInterval(id.current)

  const startInterval = useCallback(() => {
    id.current = window.setInterval(() => {
      dispatch(paginate(1))
    }, INTERVAL)
  }, [dispatch])

  useEffect(() => {
    if (isSlideshowPlaying) {
      startInterval()
    } else {
      clearInterval()
    }

    return clearInterval

  }, [currentIndex, isSlideshowPlaying, startInterval, dispatch])

DomenicoGranito / Galleria