A visually appealing and feature-rich image gallery built with React JS. This gallery allows you to reorder images, delete multiple images, and set a feature image with a seamless user experience.
-
Gallery Layout: The gallery features a grid layout that displays images with one designated as the feature image, which is visually distinct from the others.
-
Sorting: Users can easily reorder the images within the gallery by implementing drag-and-drop functionality for an intuitive experience.
-
Deleting Multiple Images: Multiple images can be selected and deleted, with clear visual indications for the selected images.
-
Setting Feature Image: The featured image can be set by sorting, with the first image from the left-to-right direction initially set as the featured image.
-
User Experience: The gallery is designed for a smooth and responsive user experience, featuring transitions and animations for a polished look and feel.
Explore the live demo of the image gallery to experience the features in action.
Follow these steps to set up the project locally:
- Clone the repository:
git clone https://github.com/Khalidur-sujon/ImageGallery.git
- Navigate to the project directory:
cd ImageGallery
- Install the necessary dependencies:
npm install
- Start the development server:
npm start
After setting up the project locally, you can start using the image gallery by following these steps:
Access the gallery by opening your web browser and visiting http://localhost:3000 (or the relevant port displayed in your terminal).
Browse through the images, reorder them, select multiple images for deletion, and set the feature image per your requirements.
Enjoy a seamless and visually appealing image gallery experience!
- React
- React DnD
- TypeScript
- Tailwind CSS
If you'd like to contribute to this project, please follow these steps:
-
Fork the repository on GitHub.
-
Clone your forked repository to your local machine.
-
Create a new branch to work on your feature/bug fix.
-
Make your changes and commit them with descriptive messages.
-
Push your changes to your fork on GitHub.
-
Create a Pull Request on the original repository, detailing the changes and why they should be merged.
-
Wait for the maintainers to review your Pull Request.