Description

Here is issues I noticed:

1. Spacing issue with name "Snap Grid" and search bar.
2. Spacing issue with the category links and image shown under category
3. Responsiveness issue in the section under categories links

Expected Behavior

1. Spacing should be same between them for 1&2
2. Section should properly responsive in mobile device

Actual Behavior

How it will fixed:

1. Remove spacing using CSS and make sure it also fixed on mobile and tablet.
2. Add some margin under the category so it should not look to much close.
3. Add media queries and also the remove extra padding and margin in mobile view.

Screenshots (if applicable)

Additional Information

Add any other context or information about the issue here.

I want to add Sports as one more option ;

Can you assign this to me _ Hacktobrfest_23 : )

Description

The horizontal scroll bar for the topics doesn't look good in the UI. It looks kind of awkward for the medium to large screens.

Expected Behavior

It should not be present for large devices as it hampers the smooth UI of the project.

Actual Behavior

It is right there in the center of the UI making, distracting the user from the rest of the website.

Screenshots (if applicable)

Additional Information

It should be removed for large devices so as to make the UI smooth and attractive

Description
The text inside of the search box should be changed

"Try Something Search here ..." doesn't sound appealing.

I propose that we change it to just "Search here".
It gives off a much more professional, clean look. And the website design itself should be enough for the user to know what they're supposed to do on the website.

Just look at examples of Google image search, and you will see that they have no text there at all.

The current site is missing a lot of good practices and is really unperformant by design. Using next would help with this and give the project a clear structure while also increasing SEO and performance!

Just a small one, I keep looking for a thing to do that is no one yet started.

For this one found codes to optimize. Remove an avoidable search code.

const selectedLink = links.find((link) => link.title === selection);

this into

const selectedLink = links[selectionIndex]

I'm creating a draft PR for the whole code.

How about adding an github link here :

Description
I want to use framer Motion to make animation while image card are in view

Actual Behavior
In Mobile View the description and banner is not responsive or not properly styled .

Expected Behavior
So we can bring banner down the description or upside of the description instead of keeping them in a row.

Screenshots (if applicable)

Additional Information

Can you please assign this issue to me @Vijaykv5

Join discord channel of SnapGrid for any queries: https://discord.gg/GpmQ5ZxG

I though of changing the name of the Project from "Image-Searcher" to "SnapGrid"

Description

When I search for an image in search bar for eg. Games. Then it shows nothing and even if I enter travel It also shows nothing. That's the bug

Expected Behavior

If I search something which is not available then It should show not found and If I search something which exist it should show that particular Image with it's description.

What happens instead?

If you find it relevant please assign this to me and mark as hacktoberfest-accepted

Description

I want to add dark mode component that will enable dark mode in website, want to add header section in which logo, dark mode button, Login, SignUp and pages can be redirects from header. Footer can contain contributers name, pages, discord, github link and many more.

Please assign this issue to me

The blur effect when hovering over pictures is too intense, and the animation happens too quickly.

This is the blur effect I am referencing.

I propose to increase the time it takes the hover animation to complete, and make it not grow so much.

Description
Considering a usecase if a keyword 'Phones' from selection menu is chosen and then replaced with 'World Map' .

Expected Behavior

The banner image should be disappeared

Actual Behavior

The banner Image with "Phone" still displayed.

Screenshots (if applicable)

Additional Information

Add any other context or information about the issue here.

Description
As we have GitHub links to the landing page... same as I want to add other important links to the landing page

Add the Website logo and favicon as per the Readme.md file

@Vijaykv5 As part of HacktoberFest2023, I wish to fix and add grammatical enhancements to the content of links. This would help achieve better User Experience.
Please assign this issue to me if you're fine accepting this issue for the improvement of this project and HacktoberFest submission.

Description

The logo is decentralized at documentation !

What should happen?

The logo should stay centralized.

Screenshots (if applicable)

Additional Information

I can open Open a new feature to fix/improve it.

Is contribution in this repo will be counted in hacktoberfest 2023?

Description
To add a feature in which user can upload images an search

Expected Behavior

The user can either navigate to search by Keywords/ Drag and drop images

Actual Behavior

Search should be based on the images added by the user

Screenshots (if applicable)

Add screenshots or other media to help explain the issue.

Add any other context or information about the issue here.

You're free to develop accordingly. But when User clicks on drag and drop button, it should have corresponding field to drag and drop images and all other section should remains as same

Description

The Size of Banner image is High

Expected Behavior

Reduce the Height and increase the font-size of description a little bit

Actual Behavior

Screenshots (if applicable)

Add screenshots or other media to help explain the issue.

Additional Information
The image must not be distorted

Description

Implement an infinite scroll feature that enables users to continuously load and browse more image results without the need for manual pagination. This feature enhances the user experience by providing seamless access to a large number of images.

Expected Behavior

When user reaches end of screen automatically more images will load.

Actual Behavior

User have to click on next and previous button to navigate pages.

Please assign this issue to me. I want to work on this issue.

Hi!
Just a quick reminder! If you haven't already, please add the "hacktoberfest" tag to our repository to boost our project's visibility during Hacktoberfest.

Here's how you can do it:

Go to the Settings page for our repository.
Click on the "Topics" tab on the left-hand side.
In the "Add topics" field, type "hacktoberfest."
Click the "Add topic" button.

That's it! By adding the Hacktoberfest topic, we can increase the visibility of our project and attract more contributors eager to participate in the event.

Thank you for your support !

Best regards,

Description

The UI bug discovered at a screen size of 320px involves a critical issue in the layout and functionality of our application. When the screen size is set to this specific dimension, the following problems occur.

Expected Behavior

At a screen size of 320px, we expect the application's user interface to be fully responsive and functional. All elements, including buttons, text fields, and navigation menus, should adapt and display correctly without any distortion or overlapping.

Actual Behavior

Instead, when the screen size is reduced to 320px:

Overlapping Elements: Elements within the interface overlap with each other, making it challenging for users to interact with the application. This includes buttons, which may become inaccessible or obscured.

Text Clipping: Text within buttons or labels may get clipped or truncated, rendering it unreadable or confusing to users.

Navigation Issues: The navigation menu may not collapse properly or may not display all menu items, leading to a compromised user experience.

Responsiveness Failures: Some UI elements may not resize appropriately, causing the overall layout to appear broken and disorganized

Screenshots (if applicable)

Additional Information

This issue is critical as it affects the usability and accessibility of our application on smaller screens, such as mobile devices. It needs immediate attention and resolution to ensure a seamless user experience across all screen sizes. Can i work on this UI bug ?

Description

Add a download button on each card, when a user hovers on it.

Expected Behavior

When the user hovers on the card, then a download button will be shown at the top right and on clicking that button, the Image will be downloaded in the system directly

Actual Behavior

Right Now, there is no way to download the actual image, and if we open the image in new tab, then the resolution of the image is lower

Description

Here are a few suggestions I have:

1. Having a 'search' icon in the input field will enhance the UI.
2. The 'scroll-to-top' button's icon does not look good. It's a '^' typed from the keyboard, instead, I recommend using a Chevron Up Icon.
3. Right now, the landing page has a lot of empty space, adding a footer can resolve this.

I would like to work on this issue if the proposed suggestions align with the project's goals.

Content over flow along x axis

Please describe the Bug in detail.
Images are getting out of the content view and scroll bar is appearing along x axis
Expected Behavior
Over flow should be hidden
What should happen?

Actual Behavior

What happens instead?

Screenshots (if applicable)

Add screenshots or other media to help explain the issue.

Additional Information

Add any other context or information about the issue here.

Description

The download image is of low quality

Expected Behavior

The quality of image should be high when it is downloaded.

Actual Behavior

Image is of low quality

Additional Information

I have fixed this issue on local, let me know if I should raise the PR or not, Also made the code and UI better.

Screenshots
Left: High Quality | Right: Low Quality

The API key is taking from PARCEL_API_KEY variable rather than REACT_APP_UNSPLASH_API_KEY variable.
The app is not working with that configuration

If this change is made, the app is running fine locally.

Why the PARCEL_API_KEY is used, not REACT_APP_UNSPLASH_API_KEY?
Is it for production?
Or the above is required?

Description

In our project, there is an issue related to the placement of text when searching for an image using a word. The problem occurs when users manually enter a search term, and the text appears in an undesirable location. However, when users select options provided, the text and image are correctly placed.

Expected Behavior

The expected behavior is that when users manually search for an image using a word, the text should not appear between the images. It should be displayed in a user-friendly manner, enhancing the overall experience.

Actual Behavior

Currently, when a word is manually entered for image search, the text is placed in a position that disrupts the user experience. This is not the intended behavior.

Screenshots'
Mobile:

Desktop

Additional Information

This issue needs to be resolved as the misplaced text during manual searches creates a less-than-optimal user experience. The goal is to ensure that text placement is consistent and does not interfere with the images, regardless of whether users manually enter a search term or use predefined options.

Description

The README file serves as a crucial source of information for our project. To foster transparency and acknowledge the valuable contributions from our team members and collaborators, we should add a dedicated "Contributors" section to the README. This small but meaningful addition reflects our commitment to open collaboration and transparency.

Expected Behavior

To have a final section in the README with contributors.

Actual Behavior

Nowadays, it shows about contributing and doesn't show about the contributors. It would be good to show the people who helped with the project.

Screenshots (if applicable)

N/A

Additional Information

N/A

I can add a download image feature.
When someone will click the download icon on the image the image will get downloaded on the device.

want to create a dark and light theme option on the top of the webpage Please assign this issue under a hacktoberfest 2023 to me

Description

the buttons on the home screen are not properly arranged for the mobile view

Expected Behavior

buttons should be stacked properly to be visible accordingly

Actual Behavior

buttons are scattered across

Screenshots (if applicable)
On mobile view -

Additional Information

I have created a PR for the same with the issue resolved
Please label this for #hacktoberfest2023 #hacktoberfest

Description

When Image renders on page, there should be an Shimmer UI

Expected Behavior
Show Shimmer UI - enhances user experiance

Screenshots (if applicable)

This shimmer for each cards

Additional Information

Feel free to add your ideas into it

Please add a star to support SnapGrid

Description

The page scrolls initially when user visits it for the first time, and a back-to-top button is also there.
The page should show random images in the beginning.

Description
TypeError: Cannot read properties of undefined (reading 'map').
I want to implement conditional rendering throughout all the mapping components so that the website will break anymore

Please assign me this issue under HACKTOBERFEST 2023.

Description
Footers are added to:

Provide identification and document details.
Aid in navigation.
Offer contact information.
Display legal notices.
Reinforce branding.
Present calls to action.

Description

Could break while mapping through the images.
I want to add conditional rendering for all the mapping element so that it doesn't break.

Please assign me this issue under Hacktoberfest 2023.

Hey Folks :
I'll looking to change the Name of this project.

May you can suggest some unique ans suited title for this project?

Description

The developers who will try the app themselves would need a Unsplash API key, so in the README.md file a link to unsplash website and also a link to " How to get unsplash API key " would be really helpful for anyone who tried the app. Also it helps for easy navigation

Expected Behavior

Small section where we link the Unsplash website and tutorial article to make it feasible for users to access it.

Actual Behavior

It would be nice to save time of people and help them with the API keys

Screenshots (if applicable)

N/A

Additional Information

N/A

A like button will be displayed on each photo and user can like it.
All these liked photos will be displayed on another page separately.

Description

If there are no images for the search then there is nothing on the screen

Expected Behavior

There should be a No Images Found Component, if there are no images found

Actual Behavior

Blank screen with no images

Screenshots (if applicable)

Please assign this issue to me, so that I can fix it

Description

Creating a platform for community to talk, suggest, guide beginners, etc for contributers and maintainers.

Description
If we scroll down and then we want to go back to top, so rather than scrolling all the way up, a floating button to get to the top

Expected Behavior

Clicking on this button will scroll whole page to top

Actual Behavior

No such button exist

@Vijaykv5 As part of HacktoberFest2023, I wish to enhance the functionality of the Next tab for better UX. The Next tab should bring the focus of the user to the start of the image display.
Please assign this issue to me if you're fine accepting this issue for the improvement of this project and HacktoberFest submission.

As directed in the readme file i cloned your project , added my own api key in .env file but then also the site is not showing images . Please guide how to solve this issue