PicEyes

PicEyes is an image search application that allows users to search for images using the Flickr API. Users can search for images, view suggestions, and see the search history, providing a user-friendly experience for browsing images.

🔗Deployed Link

PicEyes.-.Google.Chrome.2023-11-08.00-14-52.mp4

Important Note ⚠️

I want to highlight that the Flickr API's flickr.photos.getRecent method currently lacks support for the safe_search parameter. This may lead to the display of potentially sensitive or explicit content. I have tried to mitigate this issue by using the safe_search parameter in the flickr.photos.search method, but this does not guarantee that all images will be safe for work.

Task List

Search Bar: Users can search for images using the search bar.
Suggestions: The application provides search suggestions based on previous search history.
Recent Photos: Users can view recent photos fetched from the Flickr API.
Search History: Users can see their search history and click on previous search terms to perform a new search.
Clear Suggestions: Users can clear the search history and suggestions with a single click.
Infinite Scroll: The application provides an infinite scroll feature to display more search results as the user scrolls down.
Modal Preview: Clicking on an image in the search results opens a modal to view the image in detail.

Bonus Tasks

Debounce: The search input is debounced to prevent unnecessary API calls.'
Responsive Design: The application is responsive and works well on mobile devices.
Loading Indicator: The application displays a loading indicator while fetching data from the Flickr API.
Fixed Search Bar: The search bar is fixed at the top of the page for easy access.
View on Flickr: The button takes the user to the Flickr page for the selected image.
Deployed: The application is deployed on Vercel for easy access.

Technologies Used

React: Used for building the user interface and managing the application state.
Axios: Utilized for making HTTP requests to the Flickr API and fetching image data.
Tailwind CSS: Employed for styling the user interface and creating an attractive design.
react-modal: Implemented to create a modal for displaying a larger view of the selected image.
Vite: Used as the build tool and development server for rapid development.
Flickr API: Integrated to fetch image data and provide search functionality.
lodash: Utilized for debouncing the search input and managing search history efficiently.
Vercel: Deployed the application on Vercel for hosting and managing live deployment.

Components Structure

Getting Started

To get started with the project, follow these steps:

Clone the repository.
Run npm install to install the necessary dependencies.
Create a .env file with the following variable:

VITE_REACT_APP_FLICKR_API_KEY=your_api_key_here

Start the development server using npm run dev.
Open the application in your browser at localhost:5173

About Me

I'm Suryansh Singh, the developer behind this project.

Feel free to reach out to me at tashusingh2001@gmail.com for any queries or collaboration.

suryanshsingh2001 / ORI-Task