ImageVoyager

ImageVoyager is a web application for exploring and discovering a wide range of images. It provides a user-friendly interface for searching and viewing images.

Technologies Used:

• Javascript
• React
• TailwindCSS
• Context
• axios
• createContext

UI:

Application Link (Deployed on Netlify):

https://jocular-sprite-109b1d.netlify.app/

Note: Unsplash API has a rate limit of 50 requests per hour. So, if it exceeds the count, results might not be fetched

Features

• Image Search: Users can search for images based on keywords or descriptions.

• Responsive Design: The application is designed to work seamlessly on various screen sizes.

• Dynamic Grid Layout: Images are displayed in a responsive grid layout, adapting to different screen sizes.

• Custom Styling: Tailwind CSS is used to style the application, making it easy to customize the look and feel.

Steps to run:

These instructions will help you set up and run the project on your local machine. Follow the steps below to get started:

1. Clone the repository:

 git clone https://github.com/mansithanki/ImageVoyager.git

2. Change to the project directory:

    cd ImageVoyager

3. Install the dependencies:

    npm install

4. Start the development server:

    npm start

Open your web browser and visit http://localhost:3000 to see the application running.

Research Questions

1. What is the question being researched?

The primary aim of the project was to create an effective and user-friendly image search application. This project aims to explore the process of building a web application that allows users to search for images based on keywords or descriptions and retrieve relevant results.

2. Why is it interesting?

This project is intriguing for several reasons:

• User Engagement: Image search applications are highly engaging for users in various contexts.
• Technological Exploration: The project provides an opportunity to learn and apply modern web development technologies such as React, TailwindCSS, Javascript.
• AI Integration: There's potential to integrate AI models for advanced image search, adding complexity and interest.

3. How do you plan on doing it?

The project plan includes the following steps:

• Setting up the project using Create React App.
• Building the user interface with React components.
• Integrating an image search API or service (Unsplash API in this scenario).
• Implementing features for user input and search functionality.
• Styling the application with Tailwind CSS.
• Potentially in future, integrating AI models for advanced image search.

4. How will you know it is doing a good job?

To evaluate the project's success, following metrics could be considered:

• Performance: Monitoring speed and responsiveness for a smooth user experience.
• Relevance: Evaluating the accuracy and relevance of search results.
• Usage Statistics: Tracking user engagement and search query metrics.
• Error Handling: Ensuring graceful error handling and meaningful error messages.
• User Feedback: Collecting user feedback to ensure the application meets their needs.