Create a responsive image gallery using React JS with the following features: reordering, deleting multiple images, and setting a feature image. The gallery should be visually appealing and provide a seamless user experience.
https://image-gallery-sayem5522.vercel.app/
- Gallery Layout:
- Implement a grid layout for the image gallery.
- The gallery should display images with one feature image larger than the others.
- Sorting:
- Enable reordering functionality to allow users to rearrange the order of images in the gallery.
- Implement drag-and-drop functionality or any other intuitive method for reordering.
- Deleting Multiple Images:
- Allow users to select multiple images and delete them.
- Provide a clear visual indication of selected images.
- Setting Feature Image:
- Allow users to set a feature image by sorting.
- Pretend the first image (from the LTR direction) as the featured image
- The feature image should be visually distinct from the other images.
- User Experience:
- Ensure a smooth and responsive user experience.
- Implement transitions or animations for a polished look and feel.
- Live Demo:
- Host your React JS image gallery on any platform of your choice.
- Share the live URL of your task with us for assessment.
- Our verdict would be considered as rejected if your live URL link does not work.
- Use React JS for building the image gallery.
- You are free to use any additional libraries or frameworks as needed.
- Please do not use any image gallery library
- Pay attention to code organization, readability, and best practices.
- Include comments or documentation as necessary for clarity.
- Ensure responsiveness for various screen sizes.
Provide us with the following:
- The source code of your React JS project through any version control software (Github, Gitlab, etc)
- A live URL where we can interact with your image gallery.
Feel free to showcase your creativity and React JS skills in the implementation of the image gallery. We look forward to seeing your work!