khalidur-sujon / imagegallery

A ImageGallery based on React and TypeScript

Responsive Image Gallery with React JS

A visually appealing and feature-rich image gallery built with React JS. This gallery allows you to reorder images, delete multiple images, and set a feature image with a seamless user experience.

Features

• Gallery Layout: The gallery features a grid layout that displays images with one designated as the feature image, which is visually distinct from the others.

• Sorting: Users can easily reorder the images within the gallery by implementing drag-and-drop functionality for an intuitive experience.

• Deleting Multiple Images: Multiple images can be selected and deleted, with clear visual indications for the selected images.

• Setting Feature Image: The featured image can be set by sorting, with the first image from the left-to-right direction initially set as the featured image.

• User Experience: The gallery is designed for a smooth and responsive user experience, featuring transitions and animations for a polished look and feel.

Live Link

Live Demo

Explore the live demo of the image gallery to experience the features in action.

Installation

Follow these steps to set up the project locally:

1. Clone the repository:

git clone https://github.com/Khalidur-sujon/ImageGallery.git

2. Navigate to the project directory:

cd ImageGallery

3. Install the necessary dependencies:

npm install

4. Start the development server:

 npm start

Usage

After setting up the project locally, you can start using the image gallery by following these steps:

Access the gallery by opening your web browser and visiting http://localhost:3000 (or the relevant port displayed in your terminal).

Browse through the images, reorder them, select multiple images for deletion, and set the feature image per your requirements.

Enjoy a seamless and visually appealing image gallery experience!

Technologies Used

• React
• React DnD
• TypeScript
• Tailwind CSS

Contributing

If you'd like to contribute to this project, please follow these steps:

1. Fork the repository on GitHub.

2. Clone your forked repository to your local machine.

3. Create a new branch to work on your feature/bug fix.

4. Make your changes and commit them with descriptive messages.

5. Push your changes to your fork on GitHub.

6. Create a Pull Request on the original repository, detailing the changes and why they should be merged.

7. Wait for the maintainers to review your Pull Request.