Image Gallery Project

About the Project

This project is a dynamic image gallery application that fetches and displays high-quality images from the Unsplash API. It allows users to browse, search, and view photos seamlessly, with a responsive and modern user interface.

The application was built to showcase the power of integrating third-party APIs with a clean front-end design, providing an intuitive experience for users to explore visual content.

What It Does

• Browse Images: Displays a curated grid of high-resolution images fetched from Unsplash.
• Search Functionality: Allows users to search for images by keywords, powered by the Unsplash API.
• Responsive Design: Ensures a seamless experience across devices, from desktops to mobiles.
• Infinite Scroll: Loads more images as the user scrolls, enhancing performance and user engagement.
• Image Details: Users can click on an image to view additional details, such as the photographer's name and description.

How We Built It

The project was developed using modern web technologies to ensure performance and scalability. We integrated the Unsplash API to fetch images dynamically, requiring an API key for authentication.

The front-end was crafted to prioritize user experience, with a focus on clean design and smooth interactions.

Unsplash API Key

To use the Unsplash API, we registered on the Unsplash Developer Portal to obtain an API key. This key is securely stored in an environment variable (.env) and used to authenticate API requests.

The API enables the application to retrieve images, search for specific content, and access metadata about each photo.

Example environment variable setup:

VITE_UNSPLASH_API_KEY=your_unsplash_api_key_here

Follow these steps:

```sh
# Step 1: Clone the repository using the project's Git URL.
git clone <[YOUR_GIT_URL](https://github.com/Ashar086/visual-vault-explore.git)>

# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>

# Step 3: Install the necessary dependencies.
npm i

# Step 4: Start the development server with auto-reloading and an instant preview.
npm run dev

Edit a file directly in GitHub

• Navigate to the desired file(s).
• Click the "Edit" button (pencil icon) at the top right of the file view.
• Make your changes and commit the changes.

Use GitHub Codespaces

• Navigate to the main page of your repository.
• Click on the "Code" button (green button) near the top right.
• Select the "Codespaces" tab.
• Click on "New codespace" to launch a new Codespace environment.
• Edit files directly within the Codespace and commit and push your changes once you're done.

What technologies are used for this project?

This project is built with:

• Vite: Fast build tool and development server.

• TypeScript: Ensures type safety and better code maintainability.

• React: Powers the dynamic and interactive UI.

• shadcn-ui: Provides accessible and customizable UI components.

• Tailwind CSS: Enables rapid and responsive styling.

• Unsplash API: Fetches high-quality images and metadata.

• Supabase: For Authentication and database

COntact With me:

🌐 Socials: