https://github.com/adarachel/pix-galleria

a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way; equipped with user log in authentication and an image drag-and-drop feature.
https://github.com/adarachel/pix-galleria

Last synced: about 1 month ago
JSON representation

a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way; equipped with user log in authentication and an image drag-and-drop feature.

• Host: GitHub
• URL: https://github.com/adarachel/pix-galleria
• Owner: adarachel
• License: mit
• Created: 2023-09-18T16:55:12.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-20T19:05:51.000Z (over 1 year ago)
• Last Synced: 2023-09-21T08:44:08.940Z (over 1 year ago)
• Language: JavaScript
• Size: 5.12 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PIX GALLERIA: An Image Gallery Website

This is a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way; equipped with user log in authentication and an image drag-and-drop feature.

## Table of Contents

- [Demo](#demo)

- [Features](#features)

- [Installation](#installation)

- [Usage](#usage)

- [Contributing](#contributing)

- [License](#license)

## Demo

[Live Demo](https://pixgalleria.netlify.app/) - The link to the live website.

## Features

1. **Image Display:**

   - Display a grid layout that showcases a collection of images presented in a visually appealing manner with consistent spacing and sizing, add a tag to each image.

2. **Loading state:**

   - The page should have a loading state for when images are not ready for display, display a skeleton loader or a loading spinner when loading is true

3. **Search Functionality:**

   - You should have a search field that filters the image list based on the tags added to the images.

4. **Drag-and-Drop:**

   - Implement the ability for users to drag and drop images within the gallery.

5. **User-friendly Feedback:**

   - Incorporate smooth animations and visual cues that provide feedback during drag and drop interactions.

6. **Responsive Design:**

   - Ensure that the gallery is responsive and functions seamlessly on different devices, including mobile phones, tablets, and desktops.

7. **Design Flexibility:**

   - While adhering to the above requirements, you have the creative freedom to come up with a unique and appealing design.

## Installation

1. Clone the repository:

   ```bash

   git clone https://github.com/adarachel/pix-galleria.git

2. Navigate to the project folder:

   ```bash

   cd pix-galleria

3. Install dependencies:

   ```bash

   npm install

## Usage

   Run 'npm start' - The app will be available at http://localhost:3000 by default.  

## Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

   - Fork the repository.

   - Create a new branch for your feature or bug fix.

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

   - Push your changes to your fork.

   - Submit a pull request to the main repository.

## License

This project is licensed under the MIT License. See the LICENSE file for details.