Skip to content

Mezan2002/image_gallery

Repository files navigation

React Image Gallery with DND

Live Site Link

Features I have added

  1. This is a simple react image gallery with the draga and drop functionality.
  2. There are some dummy images I added and there a user have the access to delete the images, the user can select signle particular image or he can select all images by clicking on the select all images button.
  3. If a user wants to reorder the images he can reorder them by dragging the images as he wants and the interesting part is there we have a featured image also which is indicated by a indicator label and the featured image is larger then other images.
  4. I have also implemented the add image feature by clicking in the add new image button a user can add a new image but that will be a temporary add.
  5. The design is responsive for all the devices. That's all in that project.

Technologies Used

  1. React JS (Vite)
  2. TailwindCss
  3. SweetAlert2
  4. @dnd-kit/core
  5. @dnd-kit/modifiers
  6. @dnd-kit/sortable

How to run the project in your local machine

  1. Clone or download the repo as a zip
  2. After downloading the repo open that on the command line and run a command npm install
  3. Then it will start to download the node module files and after finishing the download you can give another command of npm run dev and the project will start in a url which you will get in the command line