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.
- React JS
- TypeScript
- Tailwind CSS
- react-beautiful-dnd
- Vite
-
Gallery Layout:
- Implemented a grid layout for the image gallery.
- The gallery displays images with one feature image larger than the others.
-
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.
-
Sorting:
- Enabled reordering functionality to allow users to rearrange the order of images in the gallery.
- Implemented drag-and-drop functionality for intuitive reordering.
-
Deleting Multiple Images:
- Allows users to select and delete multiple images.
- Provides clear visual indication of selected images.
-
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.
-
User Experience:
- Ensures a smooth and responsive user experience.
- Utilizes transitions and animations for a polished look and feel.
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.
- Author: Mozahidul Islam
- Email: mmozahidul01@gmail.com
- GitHub: GitHub Profile