Galleria is an art gallery app. It's built based on a professional design, features a lightbox, pagination, and is fully responsive on all screen sizes.
I decided to take on this Frontendmentor project as art is something I appreciate a lot. So, it was definitely fun to build this app.
One of the highlights of this project is the slideshow/pagination component with the progress bar.
I created a custom hook that (in a useEffect hook) first loops over all of the projects and creates an object that has all the paintings as keys and the 'next' and 'previous' as properties. Later I can access these properties with constant time complexity and pass them to the Link component.
The progress bar follows a similar logic, where the percentages are calculated beforehand and later accessed.
Another option would be to calculate the pagination URL slugs and percentages 'on the fly' by looping over the array of objects and doing the calculations every time the user clicks on 'next' or 'previous', but needless to say, this is a much more expensive approach.
Since this app has quite different and complex layouts based on the screen size, I opted for CSS grid as flexbox is close to unimaginable to use in this scenario.
Image viewer - or lightbox - is implemented with react-modal. I decided to use a ready-made package instead of building it myself because building a robust modal that also complies with the WAI-ARIA guidelines is an incredible amount of work and would be a separate project on its own. Generally, modals are not something you want to 'roll' on your own.