https://github.com/triple-ade/hng-drag-drop
This drag and drop app is built with react and firebase auth.
https://github.com/triple-ade/hng-drag-drop
Last synced: 11 months ago
JSON representation
This drag and drop app is built with react and firebase auth.
- Host: GitHub
- URL: https://github.com/triple-ade/hng-drag-drop
- Owner: TRIPLE-ADE
- Created: 2023-09-18T20:47:55.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-22T07:37:57.000Z (almost 3 years ago)
- Last Synced: 2025-03-01T07:28:03.703Z (over 1 year ago)
- Language: JavaScript
- Size: 6.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drag and Drop Image Gallery
## Table of Contents
- [About the Project](#about-the-project)
- [Built With](#built-with)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Authentication](#authentication)
- [Image Gallery](#image-gallery)
- [Search Images](#search-images)
- [Responsive Design](#responsive-design)
## About the Project
This is a drag and drop image gallery built with React and Firebase authentication. It allows users to log in, and after a successful login, they can rearrange the images in the gallery.
### Built With
#### Task
- Authentication with Firebase
- Login with email and password
- Image gallery with grid layout
- Drag and drop reordering of images
- Search images by tag
- Loading state with skeleton loaders
- Responsive design
#### Tech Stack
- React
- Tailwind
- Firebase
### Features
#### Authentication
The project uses Firebase for authentication. Users can log in with the following credentials:
- Email: user@example.com
- Password: 1Password
#### Image Gallery
Images are displayed in a responsive grid layout, and users can drag and drop images to reorder them.
#### Search Images
Users can use the search input to filter images by tags. The available search tags are "movie" and "tv series."
#### Responsive Design
The app adapts to mobile, tablet, and desktop layouts, providing a seamless user experience.
## Getting Started
### Prerequisites
Before you begin, make sure you have Node.js installed. You can download it from the [official Node.js website](https://nodejs.org/).
### Installation
To get started with the project, follow these steps:
1. Clone this repository to your desired folder:
```sh
cd my-folder
git clone https://github.com/TRIPLE-ADE/Hng-drag-drop
```
2. Navigate to the project folder:
```sh
cd Hng-drag-drop
```
3. Install project dependencies:
```sh
npm install
```
4. Start the development server:
```sh
npm run dev
```
This will launch the project locally, and you can access it in your web browser.
Feel free to explore and contribute to this drag and drop image gallery project!