React Gallery

Demos:

• http://spiritphyz.io/react-gallery – (original design)
• http://spiritphyz.io/sci-viz-gallery – (alternate design + color scheme)

FEATURES

Responsive and Accessible Design

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

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

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

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

• React 15.5.3 and create-react-app
• Bootstrap 4 / CSS3 Animations
• React-custom-scrollbars
• React-icons
  • for SVG versions of Typicons
• Typicons
  • Implemented as SVG graphics, not icon font glyphs
    • SVG icons display correctly on mobile and have better accessibility
    • Icon font glyphs appear as random Unicode emoticons on iOS and have many display problems. Even the so-called "bulletproof" method doesn't work on iOS.
• ColorZilla CSS Gradients
• Sublime / Vim / Eslint
• Freely-licensed images from Pixabay and Unsplash
• Deployed on Digital Ocean with Ubuntu 16.04 and Nginx