Image Gallery App

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 log in with the following credentials:

  • Email: user@example.com
  • Password: 1Password Proper validation is in place, and error messages will guide you.

• Image Display: Enjoy a grid layout showcasing your images with consistent spacing and sizing, along with tags for each image.

• Loading State: When images are not ready for display, a sleek loading spinner or skeleton loader will keep you engaged.

• Search Functionality: Easily filter images by tags using the search field.

• Drag-and-Drop: Effortlessly rearrange images within the gallery with the intuitive drag-and-drop feature.

• User-friendly Feedback: Smooth animations and visual cues enhance the user experience during drag-and-drop interactions.

• Responsive Design: The gallery is designed to work seamlessly on various devices, including mobile phones, tablets, and desktops.

• Design Flexibility: While meeting the above requirements, we've embraced creative freedom to deliver a unique and appealing design.

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

VITE_CLERK_PUBLISHABLE_KEY

Run Locally

Clone the project

  git clone hhttps://github.com/dapoadedire/hngx-stage-iii.git

Go to the project directory

  cd hngx-stage-iii 

Install dependencies

  npm install

Start the server

  npm run dev

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

Tech Stack

Client: React, React-Router, TailwindCSS, ReactDND

Server: Node, Express

Auth: Clerk

Screenshots