The Drag-and-Drop Image Gallery is a web application built using React and the react-dnd library. It allows users to create and manage a visually appealing image gallery with drag-and-drop functionality. Authenticated users can log in, rearrange images within the gallery, search for images by tags, and enjoy a responsive design for various devices with Mui Grid Layout.

• Authentication: Users can log in using the provided credentials (email: [email protected], password: 1Password). Authentication is implemented for authorized access.

• Image Display: Showcase a collection of images in a visually appealing grid layout with consistent spacing and sizing. Each image includes tags for categorization.

• Loading State: A loading state is displayed when images are not yet ready for display, providing a smooth user experience.

• Search Functionality: Users can search for images based on tags added to the images, making it easy to find specific content.

• Drag-and-Drop: Users can effortlessly rearrange images within the gallery using the drag-and-drop feature. Images can be moved to preferred positions.

• User-Friendly Feedback: Smooth animations and visual cues are incorporated to provide feedback during drag-and-drop interactions, enhancing the user experience.

• Responsive Design: The gallery is designed to function seamlessly on different devices, including mobile phones, tablets, and desktops, ensuring a consistent user experience.

• Design Flexibility: While adhering to the requirements, you have creative freedom to create a unique and appealing design for your gallery.

• Clone the Repository: Clone this repository to your local machine.

  https://github.com/AdebayoIbrahim/hng-task-3.git
  

• Install Dependencies: Navigate to the project directory and install the required dependencies.

  cd drag-and-drop-gallery
  npm install
  

• Firebase Configuration: Configure Firebase authentication in the project. Create a Firebase project and set up the authentication method (e.g., email and password) as described
  in Firebase documentation. Update the Firebase configuration in the project.

• Run the Application: Start the development server to run the application locally.

  npm start

• Explore and Interact: Enjoy exploring the image gallery, rearranging images, searching by tags, and experiencing the drag-and-drop feature.

• Demo👉 Gallery-Hub.