Simple Image Gallery

Live Website

About

This project is a responsive image gallery built using React JS with features like reordering, deleting multiple images, and setting a feature image. The gallery provides a visually appealing and seamless user experience.

Technologies Used

• React JS
• TypeScript
• Tailwind CSS
• react-beautiful-dnd
• Vite

Features

1. Gallery Layout:

   • Implemented a grid layout for the image gallery.
   • The gallery displays images with one feature image larger than the others.

2. Adding Image:

   • Users can easily add images by clicking the "Add Image" button and selecting an image from their device.
   • Utilize drag-and-drop functionality for seamless image uploads.
   • Ensure that each image can only be added once, preventing duplicates.

3. Sorting:

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

4. Deleting Multiple Images:

   • Allows users to select and delete multiple images.
   • Provides clear visual indication of selected images.

5. Setting Feature Image:

   • Allows users to set a feature image by sorting.
   • The first image (from left to right) is considered the featured image.
   • The feature image is visually distinct from the other images.

6. User Experience:

   • Ensures a smooth and responsive user experience.
   • Utilizes transitions and animations for a polished look and feel.

Usage

To run this project locally, follow these steps:

• Clone the repository:

git clone https://github.com/Mozahidul01/Simple-Image-Gallery.git

• Navigate to the project directory:

cd Simple-Image-Gallery

• Install dependencies:

npm install

• Start the development server:

npm run dev

The project will be available at http://localhost:5173.

Contact

• Author: Mozahidul Islam
• Email: mmozahidul01@gmail.com
• GitHub: GitHub Profile