Galleria D'Arte

An interactive image gallery built with React, designed for those who appreciate a visually pleasing way to organize and display their image collections.

Features

• Simple Authentication: Users can only log in with the following credentials:

  • Email: user@example.com
  • Password: 1Password

• Image Display: Displayed in 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 displays a loading state when images are not ready for display, displays a loading spinner when loading is true

• Search Functionality: Comprises 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: Smooth animations and visual cues enhance the user experience during drag-and-drop interactions.

• Responsive Design: The gallery is responsive and functions seamlessly on different devices, including mobile phones, tablets, and desktops.

• Design Flexibility: I embraced creative freedom to deliver a unique and appealing design while meeting the above requirements.

Run Locally

Clone the project

  https://github.com/0laolu/image-gallery.git

Go to the project directory

  cd image-gallery-app 

Install dependencies

  npm install

Start the server

  npm run dev

The application will now be running at http://localhost:5173

Project Status

In progress

Tech Stack

Client: React, React-Router, DND Kit

Auth: Firebase

Developed by

Olaoluwa Ajanaku