Skip to content

Latest commit

 

History

History
97 lines (60 loc) · 2.36 KB

README.md

File metadata and controls

97 lines (60 loc) · 2.36 KB

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

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