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.
Live Demo - The link to the live website.
-
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.
-
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
-
Search Functionality:
- You should have a search field that filters the image list based on the tags added to the images.
-
Drag-and-Drop:
- Implement the ability for users to drag and drop images within the gallery.
-
User-friendly Feedback:
- Incorporate smooth animations and visual cues that provide feedback during drag and drop interactions.
-
Responsive Design:
- Ensure that the gallery is responsive and functions seamlessly on different devices, including mobile phones, tablets, and desktops.
-
Design Flexibility:
- While adhering to the above requirements, you have the creative freedom to come up with a unique and appealing design.
-
Clone the repository:
git clone https://github.com/adarachel/pix-galleria.git
-
Navigate to the project folder:
cd pix-galleria -
Install dependencies:
npm install
Run 'npm start' - The app will be available at http://localhost:3000 by default.
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.
This project is licensed under the MIT License. See the LICENSE file for details.