Unsplash Image Gallery

This project is an image gallery built with Vue 3 and Tailwind CSS, using the Unsplash API to fetch images. Users can search for images, and their recent searches are stored in local storage.

---

📸 Demo

---

📌 How to Run

1. Install Dependencies

Ensure Node.js is installed, then run:

npm install

2. Configure API Key

To fetch images from Unsplash, you need an API key. Follow these steps to obtain one:

1. Go to Unsplash Developers.
2. Click on "Register As a Developer" and sign in or create an account.
3. Register a new application and follow the setup instructions.
4. After registration, you will receive an Access Key.
5. Copy the key and create a .env file in the root directory of your project.
6. Add the following line to the .env file:

VITE_UNSPLASH_ACCESS_KEY=your_unsplash_api_key_here

Replace your_unsplash_api_key_here with your actual Unsplash API key. Vue 3 (Vite) uses VITE_ prefixed environment variables, ensuring they are available in the client-side application. Never share or expose private API keys in public repositories.

3. Start the Project

Run the development server:

npm run dev

---

🛠 Technical Decisions

• Vue 3 & Composition API: Used for better state management and modularity.
• Tailwind CSS: Handles all styling, including animations.
• Pinia: Manages search history and stores it in localStorage.
• Infinite Scroll: Automatically loads more images as the user scrolls.
• Unsplash API: Fetches high-quality images dynamically.

---

📂 Project Structure

src/
│── api/
│   ├── gallery.js
│── assets/
│   ├── media/
│   │   ├── demo/
│   │   │   ├── screenshot.png
│   │   ├── logo/
│   │   │   ├── unsplash-logo.webp
│   ├── styles/
│   │   ├── tailwind-config.css
│── composables/
│   ├── useScrollHandler.js
│── foundation/
│   ├── http/
│   │   ├── http.js
│   ├── index.js
│── router/
│   ├── index.js
│   ├── routes.js
│── stores/
│   ├── index.js
│   ├── searchStore.js
│── views/
│   ├── components/
│   │   ├── CardImage.vue
│   │   ├── Gallery.vue
│   │   ├── ImageGrid.vue
│   │   ├── Navbar.vue
│   │   ├── SearchBar.vue
│   │   ├── SearchHistory.vue
│   │   ├── Spinner.vue
│   ├── pages/
│   │   ├── Page404.vue
│   │   ├── PageHome.vue
│── App.vue
│── main.js
│── .env
│── .gitignore
│── index.html
│── package.json
│── package-lock.json

---

💡 Contribution

Contributions are welcome. If you have suggestions or improvements, feel free to submit a Pull Request.