Live Lnk: https://grid-image-gallery.vercel.app

Objective:

This repository aims to showcase a well-designed and responsive image gallery application built with React JS. The primary objectives are to implement features for reordering images, deleting multiple images, and setting a featured image. The project's focus is on delivering a visually appealing user interface and ensuring a seamless user experience, making it a valuable resource for those looking to create similar functionality in their React applications.

Features:

1. Gallery Layout:

   • I have implemented a grid layout for our image gallery.
   • where the images are displayed, with one of them featured and displayed larger than the others.

2. Sorting:

   • Enabled reordering functionality to allow users to rearrange the order of images in the gallery.
   • Implemented drag-and-drop functionality, creating an intuitive method for reordering the images.

3. Deleting Multiple Images:

   • Allowed users to select multiple images and delete them.
   • Provided a clear visual indication of the selected images, ensuring a straightforward and user-friendly process for deletion.

4. Setting Feature Image:

   • Allowed users to set a feature image by sorting. The first image from the left-to-right direction is treated as the featured image.

   • The feature image has been made visually distinct from the other images, enhancing its prominence in the gallery.

5. User Experience:

   • Ensured a smooth and responsive user experience by implementing transitions and animations, creating a polished look and feel for the gallery.
   • This enhances the overall user interaction with the application.

6. Installation: To install image-gallery, follow these simple steps:

7. Clone the repository using git clone: https://github.com/Shm-Rsuf/image-gallery

8. Install the required dependencies by running: npm install or npm i

9. Start the application by running: npm run dev