/React-Photo-Gallery

A modular photo gallery in React and Bootstrap

Primary LanguageJavaScript

React Gallery

Demos:

FEATURES

Responsive and Accessible Design

giant-gallery-responsive

The layout can accomodate wide desktop browser windows and skinny mobile phone screens. The navigation bar will collapse into a "hamburber menu" for image list access when the window is too narrow (and additionally shows image titles in a columnar format). The menu system incorporates extra tags to provide additional information to users browsing with screen readers.

Modular Components

giant-gallery-reusable-components

There is one main container component that sends state information to many stateless functional components. The functional components can pass along further event bindings and also feature CSS overrides. The "previous" and "next" buttons are actually the same component, re-used by having different properties sent to them to produce separate visual outcomes.

Polished UI and UX Design

giant-gallery-auto-scrollbars

Scroll bars will appear for long descriptions and disappear for short ones. The main poster images slide and fade into view depending on the direction of movement, and the text descriptions also have a small fade-in. The prev/next buttons have subtle "hover" animations.

The animations are optimized for GPU acceleration on mobile platforms, so they animate very smoothly.

Smart Stateless Functional Components

giant-gallery-next-button-becomes-disabled

The prev/next buttons display a "disabled" state when the current position is at the endpoints of the image list.

FUTURE IMPROVEMENTS

Navigation Bar

There is no functionality to handle many numbered items that expand beyond the width of the browser window. What should happen if there are 20 items in the gallery? A meeting with the UI/UX team is needed to talk about the behavior of the navbar when there is an excessive amount of images.

More Optimizations

The list of images are in a component that acts as a local datastore. Connecting the images to a network endpoint (like the Flickr API) would show off the modularity of the design.

TECH STACK