https://github.com/oghene-ella/img_gallery

implement a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way.
https://github.com/oghene-ella/img_gallery

firebase-auth reactjs responsive-design tailwindcss

Last synced: 2 days ago
JSON representation

implement a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way.

• Host: GitHub
• URL: https://github.com/oghene-ella/img_gallery
• Owner: oghene-ella
• Created: 2023-09-18T15:26:30.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-27T14:42:28.000Z (about 1 year ago)
• Last Synced: 2023-11-29T12:42:36.255Z (12 months ago)
• Topics: firebase-auth, reactjs, responsive-design, tailwindcss
• Language: JavaScript
• Homepage: https://ellahhh-img-gallery.netlify.app/
• Size: 703 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Develop a Drag-and-Drop Image gallery

## Main Objective: 

You will implement a fully functional and responsive image gallery that showcases a collection of images in a visually appealing way.

A user should be able to Login to the gallery page. Authenticated users should be able to use the Drag-and-Drop feature, they should be able to select and drag images, effortlessly rearranging them within the gallery.

## Requirements

- Simple Authentication: 

This means login with this email and password:

UserName: [email protected]

Password: 1Password

The authentication form fields should have proper validation setup, with proper error messages. You do not need to implement this on the backend yourself, you could use solutions like NextAuth, Auth0 or Clerk, firebase for Auth or add etc.

- 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.

## Acceptance Criteria

- Functional Authentication: A fully functional authentication process.

- Drag-and-Drop Feature: A fully functional drag and drop feature must be implemented.

- Responsiveness: Design must be responsive across various desktop  screens, including mobile and tablet screens.

- User Experience: Design must be intuitive, appealing, and encourage easy navigation and operation (i.e., NO LAGGING).

- Image Display: All Images should have consistent spacing and sizing.

## Installation

1. Clone the repository: `git clone https://github.com/oghene-ella/Img_Gallery`

2. Navigate to the project directory: `cd Img_Gallery`

3. Install the required dependencies: `npm install`

## Usage

1. Start the server: `npm run dev`

2. Access the app in your web browser at `http://localhost:5173/`

3. Fill in the necessary login details (email and password)

## Contact

For any inquiries or feedback, please reach out to [email protected]