Sortable Photo Gallery

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.

Table of Contents

• Project Summary
• Demo
• Installation
• Tech Stack
• Folder Structure
• Coding Approach

Project Summary

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.

Demo

Check out the live demo here

Installation

Follow these steps to run the project locally:

1. Clone the repository:

   git clone https://github.com/nafisnihal/react-dnd-gallery.git
   

2. Navigate to the project directory:

   cd react-dnd-gallery
   

3. Install project dependencies:

   yarn
   

4. Start the development server:

   yarn dev
   

5. Open your web browser and access http://localhost:3000 to view the project.

Tech Stack

The project is built using the following technologies:

• React
• DnD-Kit
• TailwindCSS
• Vite

Folder Structure

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.

Coding Approach

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! 🚀