https://github.com/shm-rsuf/image-gallery

This repository aims to showcase a well-designed and responsive image gallery application built with React JS. The primary objectives are to implement features for reordering images, deleting multiple images, and setting a featured image.
https://github.com/shm-rsuf/image-gallery

css-grid css3 html react react-router-dom tailwindcss

Last synced: 1 day ago
JSON representation

This repository aims to showcase a well-designed and responsive image gallery application built with React JS. The primary objectives are to implement features for reordering images, deleting multiple images, and setting a featured image.

• Host: GitHub
• URL: https://github.com/shm-rsuf/image-gallery
• Owner: Shm-Rsuf
• Created: 2023-11-04T03:05:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-02T10:10:09.000Z (about 1 year ago)
• Last Synced: 2023-12-02T11:24:19.517Z (about 1 year ago)
• Topics: css-grid, css3, html, react, react-router-dom, tailwindcss
• Language: JavaScript
• Homepage: https://grid-image-gallery.vercel.app
• Size: 2.98 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Live Lnk: [https://grid-image-gallery.vercel.app](https://grid-image-gallery.vercel.app)

## Objective:

This repository aims to showcase a well-designed and responsive image gallery application built with React JS. The primary objectives are to implement features for reordering images, deleting multiple images, and setting a featured image. The project's focus is on delivering a visually appealing user interface and ensuring a seamless user experience, making it a valuable resource for those looking to create similar functionality in their React applications.

## Features:

1. **Gallery Layout:**

   - I have implemented a grid layout for our image gallery.

   - where the images are displayed, with one of them featured and displayed larger than the others.

2. **Sorting:**

   - Enabled reordering functionality to allow users to rearrange the order of images in the gallery.

   - Implemented drag-and-drop functionality, creating an intuitive method for reordering the images.

3. **Deleting Multiple Images:**

   - Allowed users to select multiple images and delete them.

   - Provided a clear visual indication of the selected images, ensuring a straightforward and user-friendly process for deletion.

4. **Setting Feature Image:**

   - Allowed users to set a feature image by sorting. The first image from the left-to-right direction is treated as the featured image.

   - The feature image has been made visually distinct from the other images, enhancing its prominence in the gallery.

5. **User Experience:**

   - Ensured a smooth and responsive user experience by implementing transitions and animations, creating a polished look and feel for the gallery. 

   - This enhances the overall user interaction with the application.

6. **Installation:**

To install image-gallery, follow these simple steps:

1. Clone the repository using git clone: `https://github.com/Shm-Rsuf/image-gallery`

2. Install the required dependencies by running: `npm install or npm i`

3. Start the application by running: `npm run dev`