📸 React Gallery App

🚀 A Modern & Responsive Image Gallery built with React.js, Axios & Tailwind CSS

Browse stunning high-quality images using the Lorem Picsum API with a clean, responsive, and interactive user interface.

---

---

✨ Features

• 📷 Fetches images dynamically from the Lorem Picsum API
• ⚡ Fast API requests using Axios
• 📱 Fully Responsive Design
• 🎨 Modern UI with Tailwind CSS
• 🖼️ Beautiful Image Cards
• ✨ Smooth Hover Animations
• 📄 Pagination Support
• ⏳ Loading State
• 🔗 Open Original Image in New Tab
• 🚀 Built with React Hooks

---

🛠 Tech Stack

Technology	Purpose
React.js	Frontend Library
Vite	Build Tool
Tailwind CSS	Styling
Axios	API Requests
Lorem Picsum API	Image Source

---

📂 Folder Structure

React-Gallery-App
│
├── public
│   └── images
│
├── src
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── package.json
├── vite.config.js
└── README.md

---

🚀 Installation

Clone the repository

git clone https://github.com/Priyanshu-Gurjar20/react-gallery-app.git

Go to project directory

cd react-gallery-app

Install dependencies

npm install

Start Development Server

npm run dev

---

📸 Screenshots

Add screenshots of your project here.

Example:

screenshots/
│
├── home.png
├── gallery.png

After uploading screenshots, display them like this:

![Home](screenshots/home.png)

---

🌐 API Used

Lorem Picsum API

https://picsum.photos/v2/list?page=1&limit=24

---

📚 React Concepts Covered

• Functional Components
• JSX
• useState
• useEffect
• API Fetching
• Axios
• Async / Await
• Conditional Rendering
• Event Handling
• List Rendering using map()
• Pagination
• Responsive Design
• Tailwind CSS

---

💡 What I Learned

During this project I learned how to:

• Consume REST APIs in React
• Manage state with useState
• Handle side effects with useEffect
• Render dynamic data
• Create reusable UI
• Build responsive layouts using Tailwind CSS
• Improve UI using hover animations and transitions

---

🔮 Future Improvements

• 🔍 Search Images
• ❤️ Favorite Images
• 🌙 Dark / Light Mode
• 📥 Download Button
• 🔍 Full Screen Image Preview
• ♾ Infinite Scrolling
• 📂 Image Categories

---

🤝 Contributing

Contributions are welcome.

If you'd like to improve this project, feel free to fork the repository and submit a Pull Request.

---

👨‍💻 Author

Priyanshu Gurjar

• GitHub: https://github.com/Priyanshu-Gurjar20

---

⭐ If you like this project, don't forget to Star the repository.

Made with ❤️ using React.js