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
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.
- 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.
- 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.
- 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.
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
I'm Suryansh Singh, the developer behind this project.
Feel free to reach out to me at [email protected] for any queries or collaboration.