Art gallery React app
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Summary

Please build a React app that displays an artist’s digital art portfolio. The page should display thumbnails of an artist’s pieces, and clicking a thumbnail should open a modal view that shows the selected art piece and lets the user navigate to the next/previous piece.

Successful completion of this task (good code + UX) could lead to other opportunities.

Main gallery page

Modal view

  • When clicking a thumbnail, a modal with a black background should appear, showing the clicked image.
  • The image should be in the center, with its title beneath it.
  • There should be a right arrow and left arrow on either side of the image, which the user can click to navigate.
  • Navigation buttons should only be visible if appropriate (ie if there’s another art piece to view to the left/right of the current image). Pressing left or right on the keyboard should also navigate, if appropriate.
  • Should work for portrait and landscape images.
  • In the upper right of the modal, there should be an “x” button to close the modal. There should also be a full-screen icon, which puts the browser in full-screen mode. In full-screen mode, the “full-screen” icon should change, and should bring the user back to non-full-screen mode.
  • To see something similar to what we’re after, see the modal that appears after you click the image on this page: https://makersplace.com/voke/refreshment-1-of-1-35186/. (We just need the modal viewer, not the detailed overview page for that art piece.)

Will tip for the following addition to the modal:

  • When spacebar is pressed, a popup should animate upwards from the bottom-left, like this (please replicate this style): https://ibb.co/J3mmffL
  • Insert random values for the popup image, as well as for the text values for “Layer”, “Triggered by”, and “Blockheight”. Please make these values parameters in your code, though.
  • It should work for images in landscape or portrait mode.
  • Please use “Chivo” font (available on Google Fonts)

Let me know if you have any questions!

Crowdsource coding tasks.

2 Solutions


Solution

Hello Bevan,

I've made art gallery app as you requested which you can view here.

  • Main Gallery page
  • Modal View
  • Popup modal from bottom left

I've used TailwindCSS + some custom CSS for certain effects/elements for UI.

Let me know if you would like to change something. The code for this app can be found here.

Thanks,
Vladimir

Thanks for the fast solution! This is great. Could you please add the following if you get a chance?
  • Popup looks great in gallery view. Could you enable it in the modal + fullscreen mode as well?
  • In the modal view, if the user scrolls rapidly, it will continue showing the last image before the current one is loaded. Could you add a loading placeholder div when the image is switched, if it isn’t loaded yet?
  • A subtle hover animation on the modal icons in the upper right (perhaps they enlarge slightly or change color, up to you)
  • In the modal view, have the image fill up more of the screen (but it should not stretch the image)
  • Pressing esc should close the modal / exit fullscreen mode
Thanks!
bevan 1 month ago
Hello Bevan! I've implemented the required changes. Regarding your fourth point about images filling up more of the screen, they already do! The images are scaled accordingly and placed into the browser's window. Square images are smaller in width than rectangles because of proportional scaling. (we don't stretch images)
VladimirMikulic 1 month ago
I've also added event throttling so if the user scrolls rapidly, the user won't encounter performance issue. Let me know if you need anything more. Thank you!
VladimirMikulic 1 month ago
Hey Vladimir, thanks for these revisions! It’s looking great so far. A couple more small requests:
  • Popup is working great! Could you make it so that pressing ESC a second time hides the popup?
  • In the modal view, if the user advances from art piece A to art piece B before image B is loaded, the modal will continue to show image A. Could you make it so that image A is no longer visible when waiting for B’s image to load? So advancing from A to B would show a blank div if image B is not loaded yet (ideally that blank div has B’s dimensions).
bevan 1 month ago
  • In the modal / fullscreen view, could you have the image be shown larger, when possible? So that the minimum top/bottom margin of the image is reduced by about 1/3, in the case of square/portrait images. This would also mean moving the full-screen and close icons up and to the right. Of course, this might not affect some landscape images, which are restricted by the horizontal dimension.
  • Let me know if any of this is unclear or you have any questions!
bevan 1 month ago
Hello Bevan. No worries :) Pressing Escape now closes the popup. I've made images larger in modal/fullscreen view & the loading spinner is present while the image is loading in the modal. Let me know what you think!
VladimirMikulic 1 month ago
Nice work, thank you!
bevan 30 days ago
If you get a chance: I noticed that in full-screen mode, some of the landscape images cover the left/right buttons. Could you make it so that images cannot extend beyond those buttons? 🙏
bevan 30 days ago
Also, for a further tip, could you make a text input box at the top of the main gallery where one can enter a username? Pressing enter would then load that user's artworks, and change the url to /some_username. Also, going to /some_username would also load that user's arts. Thank you!
bevan 30 days ago
Hello Bevan! As I promised, the features that you requested are implemented. Landscape images won't cover action buttons & you have the ability to look up the user's art with a search bar or you can simply go to /user/:username URL. Let me know what you think! Thanks.
VladimirMikulic 26 days ago
I've set your images/art to load by default on the homepage.
VladimirMikulic 26 days ago
Thank you, this is great!
bevan 24 days ago
I noticed when you navigate to https://dreamy-raman-7d3e67.netlify.app/user/unassuming-van-eyck-5082, it gives a 404, but when searching for that user it loads correctly. Could you make it work with a direct link to an artist? Thanks!
bevan 24 days ago
Hello Bevan. I've forgotten to enable SPA feature on Netlify! That's why you were getting 404. If you try it now, it will work. Thanks!
VladimirMikulic 24 days ago
Great, thank you Vladimir! It's working as expected now.
bevan 23 days ago

Hello Bevan,
Here is my solution.
Live Link: https://art-gallery01.netlify.app/
GitHub Link: https://github.com/swimshahriar/art-gallery

  • Main Gallery
  • Modal view
  • Fullscreen and Modal navigation with arrow keys

You can have my solution for free. As I don't have PayPal 😅

I appreciate it @swimshahriar! Thanks for your help 🙏
bevan 1 month ago
View Timeline