🖼️ Image-Gallery: A Dynamic React Showcase

A visually stunning, dynamic image gallery built with React and brought to life with smooth GSAP animations. Discover, search, and interact with beautiful images in a seamless, responsive interface.

✨ Key Features

This project isn't just another image gallery. It's a demonstration of modern frontend technologies working together to create a fluid and engaging user experience.

• Dynamic Masonry Layout: Images are beautifully arranged in a responsive masonry grid that looks great on any screen size.
• Engaging GSAP Animations: Smooth, performant animations are used throughout the app to enhance user interaction and provide a professional feel.
• Powerful Search: Quickly find the exact images you're looking for with the integrated search functionality.
• Centralized State Management: Utilizes React's Context API (ImageContext) for clean and efficient state management across components.
• Image Interaction:
  • Click any image to open a detailed view.
  • Download your favorite images with a single click.
  • Like and Share functionality.
• User-Friendly Notifications: react-hot-toast provides sleek, non-intrusive notifications for a better user experience.
• Component-Based Architecture: A well-organized and refactored component structure, separating pages, UI elements, and logic.

---

🛠️ Built With

This project leverages a modern and powerful tech stack:

• React: A JavaScript library for building user interfaces.
• React Router: For declarative routing and navigation.
• GSAP (GreenSock Animation Platform): The standard for professional-grade web animation.
• React Hot Toast: For awesome user notifications.

---

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Make sure you have Node.js and npm (or yarn) installed on your machine.

Installation

1. Clone the repo

   git clone https://github.com/MAhmad25/Image-Gallery.git

2. Navigate to the project directory

   cd Image-Gallery

3. Install NPM packages

   npm install

4. Run the app

   npm start

The application will be available at http://localhost:3000.

---

🔮 What's Next? Future Enhancements

The gallery is awesome, but there's always room to grow! Here are some features I'm planning to implement next:

• [ ] User Authentication: Allow users to sign up and log in to save their liked images to a personal collection.
• [ ] Image Uploads: Implement functionality for users to contribute their own images to the gallery.
• [ ] Backend Integration: Connect the application to a backend service (like Firebase or a custom Node.js API) for persistent data storage.
• [ ] Advanced Search Filters: Enhance the search with filters for color, orientation (portrait/landscape), and more.

---