A dynamic image gallery built using React, DnD-Kit, and Tailwind CSS, allowing you to seamlessly rearrange images and perform various actions like select multiple images and delete them.
The Sortable Photo Gallery is a feature-rich image gallery application that offers the following functionalities:
- Drag and Drop: Rearrange images effortlessly.
- Image Selection: Select and deselect images using checkboxes to delete.
- Overlay Effect: Enjoy a beautiful overlay effect during image drag.
- Clean UI: An organized and responsive user interface for image management.
Check out the live demo here
Follow these steps to run the project locally:
-
Clone the repository:
git clone https://github.com/nafisnihal/react-dnd-gallery.git
-
Navigate to the project directory:
cd react-dnd-gallery -
Install project dependencies:
yarn
-
Start the development server:
yarn dev
-
Open your web browser and access http://localhost:3000 to view the project.
The project is built using the following technologies:
ReactDnD-KitTailwindCSSVite
The project follows a well-structured folder layout:
-
public/: Houses static assets. -
src/: Contains the project's source code.-
components/: Includes individual React components. -
utils: Contains manual dataset and functions. -
App.js: The primary application component.
-
-
package.json: Specifies project dependencies and scripts.
The project is designed with a clean and organized coding approach:
- Modularity: Individual components keep concerns separated.
- State Management: Utilizes useState and useEffect for effective state management.
- DnD Integration: Seamless drag-and-drop functionality achieved using DnD-Kit.
- Responsive Design: Tailwind CSS ensures a responsive and stylish layout.
Thank you for exploring! If you have any questions or suggestions, feel free to reach out.
Happy coding! 🚀