Gallery App Made With React

This is a small app I made with React. In total it probably took about 24 hours, including the styling - as you can see I spent a bit more time getting this looking nice than the other app.

Be sure to check out the Angular Version as well.

Check It Out!

You can click through the images with the arrow buttons on either side, see more info about the image by rolling over the title and also access a thumbnail view by clicking the button at the bottom right.

Obviously there are improvements that could be made. A nice transition between images and views wouldn't go amiss and I did originally have the idea to add in an image uploader, allowing anybody to upload images, but decided against it.

It's running in an iframe because I actually broke the local copy of my site and I've not had time to fix it, so I had to come up with another way to get it on here quickly, while that's not working.

So, how does it work?

It uses a CodeIgniter back-end and I can upload images using my CMS system which also automatically generates the thumbnails.

The front end was built using React. It's pretty straight forward really so I wont go in to too much detail. There is a main gallery component that has a state that holds the current view mode (image or thumbs) and some other stuff, a current image component and a HUD component (the buttons). The thumbnail view is it's own component and each thumbnail is another component and that's it. You can see the communication with the back-end if you have debug tools available, a larger project may well have made use of React's Routing module.

All the transition effects (fading buttons) are done with CSS and the drop-down extra info and tooltip use React modules I installed using npm.