Image Gallery

A modern, responsive image gallery built with React and Tailwind CSS. Features a beautiful grid layout with lightbox functionality for an enhanced viewing experience.

🚀 Features

• Responsive Design: Adapts to all screen sizes with a flexible grid layout
• Lightbox Integration: Full-screen image viewing with smooth transitions
• Lazy Loading: Optimized performance with lazy-loaded images
• Modern UI: Clean, professional design with Tailwind CSS
• External API: Fetches high-quality images from Picsum Photos

🛠️ Tech Stack

• Frontend: React 19.1.1
• Styling: Tailwind CSS 4.1.14
• Lightbox: Yet Another React Lightbox
• Build Tool: Vite
• Package Manager: npm

📦 Installation

1. Clone the repository:

git clone https://github.com/Nimasaghi-dev/Image_Gallery.git
cd image-gallery

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

🏗️ Project Structure

src/
├── App.jsx              # Main application component
├── main.jsx            # Application entry point
├── index.css           # Global styles
└── components/
    └── Gallery.jsx     # Gallery component with lightbox functionality

🎯 Usage

The gallery automatically fetches images from the Picsum Photos API and displays them in a responsive grid. Users can:

• Browse images in a clean grid layout
• Click any image to open it in full-screen lightbox mode
• Navigate through images using the lightbox controls
• Close the lightbox by clicking outside or using the close button

📱 Responsive Grid

The gallery uses Tailwind CSS to create a responsive grid:

• 2 columns on mobile
• 3 columns on medium screens
• 4 columns on large screens

🔧 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🌐 API

This project uses the Picsum Photos API to fetch random images for demonstration purposes. The gallery currently fetches 100 images from page 2 of the API.

📄 Components

App

The main application component that sets up the layout and renders the Gallery.

Gallery

The core gallery component that:

• Fetches images from the API
• Renders the image grid
• Manages lightbox state and functionality
• Handles image click events

🎨 Styling

The project uses Tailwind CSS for styling with:

• Responsive grid system
• Shadow effects and rounded corners
• Flexible image containers
• Clean typography

🔮 Future Enhancements

Potential improvements for this gallery:

• Add image search functionality
• Implement infinite scrolling
• Add image favoriting system
• Include image metadata display
• Add loading states and error handling

Built with ❤️ using React and Tailwind CSS