An open API service indexing awesome lists of open source software.

https://github.com/raihan2bd/image-gallery

This project is an Image Gallery built with React, JavaScript, HTML, and CSS. It allows users to view an image gallery on different devices, select and delete multiple images, and update the image order via drag and drop.
https://github.com/raihan2bd/image-gallery

css cssgrid drag-and-drop html react responsive-design

Last synced: about 1 year ago
JSON representation

This project is an Image Gallery built with React, JavaScript, HTML, and CSS. It allows users to view an image gallery on different devices, select and delete multiple images, and update the image order via drag and drop.

Awesome Lists containing this project

README

          


Image Gallery

# πŸ“— Table of Contents

- [πŸ“— Table of Contents](#-table-of-contents)
- [ Image Gallery ](#-My-Blog-App-)
- [πŸ›  Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [πŸš€ Live Demo](#live-demo)
- [πŸ’» Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Testing](#testing)
- [Deployment](#deployment)
- [πŸ‘₯ Authors ](#-authors-)
- [πŸ”­ Future Features ](#-future-features-)
- [🀝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [πŸ™ Acknowledgments ](#-acknowledgments-)
- [πŸ“ License ](#-license-)

# Image Gallery
This project is an Image Gallery built with React, JavaScript, HTML, and CSS. It allows users to view an image gallery on different devices, select and delete multiple images, and update the image order via drag and drop.

## πŸ›  Built With
### Tech Stack

Front End


  • React

  • JAVASCRIPT

  • Html

  • CSS

### Key Features

- Users can see the image gallery with their different devices
- Users can select and delete multiple images
- Users can update image order by drag and drop

(back to top)

## πŸš€ Live Demo

- [Live Demo Link](https://image-gallery-one-ebon.vercel.app/)

![Capture](https://github-production-user-asset-6210df.s3.amazonaws.com/35267447/280624832-80eec994-d6e6-489a-b057-b081c5f81f3d.PNG)
![Capture2](https://github-production-user-asset-6210df.s3.amazonaws.com/35267447/280624846-07d414a2-1021-42a3-b079-ba88e5151cf7.PNG)

(back to top)

## πŸ’» Getting Started

To get a local copy up and running, follow these steps.

### Prerequisites

To run this project you need:
- First of all, To run the front-end you need to run the [back-end](https://github.com/Thinus01/Resort_Booking_Back-end) on your local machine.
- First of all, To run the project on your local machine make sure you have installed [NodeJs](https://nodejs.org).
- Then make sure you have installed [React](https://reactjs.org/) on your local machine if you want to use this project locally.

### Setup

- Then you need to clone the project on your local machine⬇️
``` bash
git clone https://github.com/raihan2bd/image-gallery
```

### Install

- To install all the npm packages navigate to the folder address on your terminal and enter the below command ⬇️
``` bash
npm install
```

### Usage

To run the development server, execute the following command:

```sh
npm run dev
```

### Deployment

To build the project for deployment, execute the following command:

```sh
npm run build
```

(back to top)

## πŸ‘₯ Author

πŸ‘€ **Abu Raihan**

- GitHub: [@raihan2bd](https://github.com/raihan2bd)
- Twitter: [@raihan2bd](https://twitter.com/raihan2bd)
- LinkedIn: [raihan2bd](https://linkedin.com/in/raihan2bd)

(back to top)

## πŸ”­ Future Features

- [ ] **I will update drag and drop functionality**
- [ ] **I will add more feature and integrate back-end instead of static data**

(back to top)

## 🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/raihan2bd/image-gallery/issues).

(back to top)

## ⭐️ Show your support

If you like this project, please leave a ⭐️

(back to top)

## πŸ™ Acknowledgments

I want to give a big thanks to Microverse for giving us the chance to learn new technologies.

(back to top)

## πŸ“ License

This project is [MIT](./LICENSE) licensed.

(back to top)