anandsg / hungry-hero Goto Github PK

I would like to point out that a proper favicon would really help in improving the user experience by making this site uniquely identifiable from a group of tabs.

Pls, assign this issue to me so that I can start working on the same. @Anandsg

Issue Description:
When a user removes their favorite item, the application currently does not provide any indication that there are no favorite items available.

Expected Behaviour:

• After clearing an item, you will receive a message indicating that the item is now available.
• You will be redirected to the home page or add a navigation button or link, so that you can continue exploring the application.

Issue Title:

Duplicate Restaurant Entries in Cart

Issue Description:

Problem:

Currently, when a user adds the same restaurant to their cart, it's being duplicated, resulting in two identical entries. This can be confusing and is not an optimal user experience.

Proposed Solution:

We're looking for a talented contributor to develop a feature that will update the cart's quantity for the same restaurant instead of adding it as a separate entry. This enhancement will not only make our cart functionality more user-friendly but also streamline the ordering process.

Task Checklist:

• Develop a feature to check if the restaurant already exists in the cart.
• If the restaurant is already in the cart, update the quantity instead of creating a new entry.
• Ensure that the cart UI reflects the changes in real-time.
• Test the feature thoroughly to avoid any unintended side effects.
• Update the documentation with any changes made.

👥 Contributor Guidelines:

• Please fork the repository and create a new branch for your work.
• Follow the coding style and standards of the project.
• Ensure that your code is well-documented and easy to understand.
• Submit a Pull Request when you're ready for your changes to be reviewed and merged.

This enhancement will greatly improve the user experience of our app, and we're excited to see it implemented. Feel free to ask questions or seek clarification if needed. Happy coding

Summary:

Clicking on the image of a restaurant card does not trigger any action, while clicking on the card redirects correctly.

Description:

I encountered a usability issue while using the site related to the behavior of restaurant cards. Specifically, when clicking on the image of a restaurant card, no action is initiated. However, clicking anywhere else on the card correctly triggers the intended redirection behavior.

Steps to Reproduce:

  1. Open the site.
  2. Navigate to the restaurant listings page.
  3. Locate a restaurant card displaying relevant information.
  4. Attempt to click on the image of the restaurant card.

Expected Behavior:

Clicking on the image of the restaurant card should initiate the same action as clicking anywhere else on the card.

Actual Behavior:

Clicking on the image of the restaurant card does not trigger any action. However, clicking anywhere else on the card functions as expected, redirecting the user to the intended destination.

Attachments:

Restaurant card are overlapping between 1020px - 1400px width. I guess the width shouldn't be hardcoded; I have already start to work on this issue. Pls. assign it to me.

Problem:
As of now, our application does not offer a dark mode option. Dark mode has become a popular feature, providing users with a visually pleasing and energy-efficient alternative to the default light mode.

Request:
We would like to implement dark mode to enhance the user experience and give users the flexibility to choose their preferred mode.

Implementation Steps:
To achieve dark mode, we'll need to:

Design Dark Mode UI: Create a visually appealing dark mode UI that complements our app's aesthetics.

Toggle Switch: Add a user-friendly toggle switch or button that allows users to switch between light and dark modes (in the header)

Adjust Colors: Modify the color schemes, text, and background colors to align with the dark mode design.

Accessibility: Ensure that the dark mode is accessible and maintains readability and usability for all users.

I'm searching for a developer who has practical experience in creating dark mode features.

Currently, our search box and top-rated button are wandering off to the far right when they should be center stage in the body.

Let's give them the spotlight they deserve and move them right to the center!

Looking forward to seeing this issue resolved in style! 💪😎

Issue:
The accordion feature in the app is not working as expected. When a user clicks on "Hide," the content is not collapsing as it should.

Expected Behaviour:
When the "Hide" button is clicked, the corresponding content should collapse or hide, making it hidden from view.

Additional Information:
This issue occurs consistently and can be reproduced on multiple devices and browsers.
Please find attached screenshot.

Request:
Currently, in our app, when users access the menu section, they can only see a list of recommended items. This limits the options available to them and doesn't provide a comprehensive view of our offerings.

Desired Feature:
We aim to enhance the menu section by introducing collapsible accordions. Collapsible accordions are interactive elements that, when clicked, expand to reveal additional content. In our case, these accordions will allow users to browse different categories of items (e.g., appetizers, main courses, desserts) and select the ones they are interested in.

Reference:

• To get a better understanding of how we plan to structure and implement this feature, you can refer to the MENU API in the utils/constants section of our codebase. This API contains the data and structure we intend to use for the collapsible accordions.
• To provide a clearer vision of what we aim to achieve, we've attached a screenshot of the Swiggy menu for reference. We aspire to create a similarly organised and user-friendly menu browsing experience for our users.

Records:

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue

We believe this addition will improve user experience and make our app more user-friendly.
We welcome contributions and suggestions from the community to make this feature a reality.

Description:

new feature:

• When the user reaches the buttom section, they can easily move the button to the top with a single click.

Hi, I have a suggestion to improve the user experience of your web app.

Issue: Currently user has to explicitly press the "Search" button to initiate the search. That is one extra click + press "Tab" does not move the focus to the "Search" button.

My Suggestion: Improve the user experience by making the search work when the "Enter" key is pressed. Also moving the focus to "Search" button when "Tab" key is pressed.

Would love your thoughts on this.

The menu shimmer is not aligned properly; it appears to be positioned to the left of the screen. We would appreciate the assistance of talented developers to enhance the UI of the menu shimmer and make it visually appealing. Developers are encouraged to use their creativity to achieve this.

Due to the fact that we are hitting the Swiggy API, we get a CORS error when loading the page

Current Behaviour:

Currently, we have implemented offline handling using window.addEventListener, which displays an error message stating "it appears that the user is currently offline." However, this implementation is limited to the home page. Users can navigate to the Help page, About page, and others even when they are offline. This inconsistency in handling offline situations results in a bad user experience.

Proposed Approach:

To improve the user experience, we should make the offline handling message consistent across all pages of the app. Regardless of the page the user is on when they lose internet connectivity, they should receive the message notifying them about their offline status.

Additional Information:

Consider the design and styling of the error message to ensure it fits seamlessly with the look and feel of each page.

Currently, when a user searches for a restaurant that doesn't exist in our application, they are presented with a plain message stating, "The restaurant you're searching for doesn't exist," along with a button to navigate back to the home page. This minimalistic approach, while functional, may not provide the best user experience.

Proposed Enhancement:
We should improve the user experience by introducing some form of visual feedback to make the experience more engaging and informative.

Error Icon/Graphic: I instead of a plain text message, we could display an error icon or graphic (e.g., a sad face or a restaurant with a "not found" sign) to convey the message more visually.

The menu shimmer is not aligned properly; it appears to be positioned to the left of the screen. We would appreciate the assistance of talented developers to enhance the UI of the menu shimmer and make it visually appealing. Developers are encouraged to use their creativity to achieve this.

Description:

Our current restaurant cards, search box, and buttons in the body of the application may not display optimally on various screen sizes and devices. We would like to enhance the responsiveness of these elements to provide a seamless user experience across different platforms.

Issue Details:

• The restaurant cards should adapt and look good on both desktop and mobile devices.
• The search box, favorite button, and rating button should also be made responsive to ensure easy usage on various screen sizes.
• Ensure that the layout, images, and content adjust appropriately based on screen size.
• Test and address any issues related to alignment, spacing, and readability on smaller screens..

Additional Information:

If you have any design suggestions or specific changes in mind to improve the responsiveness of these cards, please feel free to share them.

I think this is a major issue cuz starters and newcomers wont be able to see anything.

Issue Description:
When there are minimal or no restaurants found in the app, the footer is mispositioned and appears in the middle of the page. This issue affects the overall user experience and layout of the application. check out Footer.js component for the code

Expected Behaviuor:
The footer should maintain its proper position at the bottom of the page, regardless of the number of restaurants found in the app. It should not move to the middle of the page when there are few or no search results.

Issue Description:
We've got a two-in-one issue here. firstly the footer is missing on home page, secondly, when there are few or no restaurants found in the app, the footer misbehaves and ends up in the middle of the page. This disrupts the user experience and the layout of the app.

Expected Behaviour:
The footer should stay put at the bottom of the page, no matter how many or few restaurants are displayed. It should not wander off to the middle of the page when search results are limited. We need to fix this to ensure a smoother user experience.

Currently, our app doesn't provide any confirmation or feedback when users add items to their favourites. We would like to enhance this experience by implementing a feature that displays a confirmation message when an item is successfully added to the user's favourites.

Reference:
checkout closed pull request - Add to favourite functionality (#23) for the logic.

when the cart is empty, our app displays a message that says, "Your cart is empty." While this message is informative, we believe that adding a visual element in the form of an icon or image can greatly enhance the user experience.

We've got the design structure we're itching to incorporate into our app, it's below!"

Items are not getting displayed for the Bakingo Restaurant .

For Your Reference

Description:

Currently, the restaurant displaying page only allows users to filter by a fixed 4+ rating. This can be limiting, as users may want to see restaurants with lower ratings, or restaurants that have a high rating for a specific aspect, such as food quality or service.

Proposed Solution:

A multiple select rating filter would allow users to filter by any combination of ratings, such as 4+ stars for food quality and 3+ stars for service. This would give users more flexibility and allow them to find restaurants that meet their specific needs.

Additional Information:

The BE endpoint will be filtered based on the options the user select.
Suggested Options for Select :

• 4.0+
• 3.0+
• 2.0+

Benefits:

• More control for users
• More accurate results
• Increased engagement

I think this is a bug in your project that once you search something there's no any means by which you can go back to your home page directly....and this is extremely terrible.
Look at this ss and none of the links can take me home at this moment...

This needs to be fixed, Assign me this issue.

Current Behavior:

Currently, when users add items to their cart, there is no confirmation message or feedback to indicate that the item has been successfully added. This lack of feedback can potentially lead to user confusion and a less-than-ideal shopping experience.

Proposed Enhancement:

I propose that we implement a confirmation message when users add items to their cart. This message should provide clear feedback, such as "Item added to cart" or something similar, to reassure users that their action was successful.

Additional Information:

I have attached a screenshot that showcases the exact design and position of the confirmation popup message. It should appear in the middle of the page, on top of the content.

Issue Description:
When a user clears their cart, the application currently lacks feedback to inform the user that their cart is now empty. Additionally, there is no easy way for the user to navigate back to the home page after clearing the cart.

Expected Behaviour:
After the user clears their cart, they should receive a clear and informative message indicating that their "cart is empty". Additionally, a navigation button or link to the home page should be provided to allow the user to continue exploring the app.

The Spelling Restaurant is mistakenly written 'restuarant' in Search Placeholder, Can I fix this?

1. Not able to view realtime dynamic content on web app. mIght be due to expired api token
2. The application navbar is not responsive for smaller screen sizes.

Hi there @Anandsg if you want me to assign and fix the issue 2, let me know.

Problem:
As of now, our application does not offer a dark mode option. Dark mode has become a popular feature, providing users with a visually pleasing and energy-efficient alternative to the default light mode.

Request:
We would like to implement dark mode to enhance the user experience and give users the flexibility to choose their preferred mode.

Implementation Steps:
To achieve dark mode, we'll need to:

Design Dark Mode UI: Create a visually appealing dark mode UI that complements our app's aesthetics.

Toggle Switch: Add a user-friendly toggle switch or button that allows users to switch between light and dark modes (in the header)

Adjust Colors: Modify the color schemes, text, and background colors to align with the dark mode design.

Accessibility: Ensure that the dark mode is accessible and maintains readability and usability for all users.

Description:
Our app currently doesn't display important information about orders, like the total cost, any discounts, or delivery fees. We want to make it better by adding a section that shows all these details.

Details:
Where to Show: We'd like this order details section to be easy to find, probably near the shopping cart or checkout page.

What to Show: Here's what we want to include:

Cart Items: We'll list all the things in your cart, how many of each, and how much they cost.
Total Before Discounts: This is how much everything costs before we take off any discounts.
Discounts: If you have any special deals or coupons, we'll show those here.
Delivery Cost: If you need something delivered, we'll say how much that costs.
Total Cost: This is the final amount you'll pay, with everything added up.

Example Picture: We've attached a picture to this request that shows exactly what we're thinking. It's a visual example of how the order details could look.

Desc

Add a hover effect to change the heart icon color in the RestaurantCard component.

Request:
Currently, in our app, when users access the menu section, they can only see a list of recommended items. This limits the options available to them and doesn't provide a comprehensive view of our offerings.

Desired Feature:
We aim to enhance the menu section by introducing collapsible accordions. Collapsible accordions are interactive elements that, when clicked, expand to reveal additional content. In our case, these accordions will allow users to browse different categories of items (e.g., appetizers, main courses, desserts) and select the ones they are interested in.

Reference:

• To get a better understanding of how we plan to structure and implement this feature, you can refer to the MENU API in the utils/constants section of our codebase. This API contains the data and structure we intend to use for the collapsible accordions.
• To provide a clearer vision of what we aim to achieve, we've attached a screenshot of the Swiggy menu for reference. We aspire to create a similarly organised and user-friendly menu browsing experience for our users.

Records:

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue

We believe this addition will improve user experience and make our app more user-friendly.
We welcome contributions and suggestions from the community to make this feature a reality.

Just FYI if developer ever need some clarifications or find yourself stuck, feel free to check out my commit using the link below. I've implemented a similar feature there, and it might come in handy."

Anandsg/Menu-Mingle@1fd121f

I want to develop a clean and modern UI for the contact page. The form will have a background as we have it on the about page,and the submit button will be highlighted.

Feature Request:
Currently, our app only has a login and logout button which are not responsive, we would like to introduce a complete login and logout feature.

Details:
The new functionality should include the ability for users to securely log into their accounts and log out when they are done using the app.

Benefits:
Adding this feature will enhance user experience and security, allowing users to have personalised accounts and ensuring that their sessions can be terminated when needed.

Records:

• Develop the login page with appropriate fields for username/email and password.
• Implement user authentication and validation to ensure secure login.
• Create a logout button or option accessible to users when they are logged in.
• Ensure that the logout process effectively ends the user's session.
• Test the login and logout functionality across different devices and browsers to ensure compatibility and security.
• Update the app's documentation and user guides to include information about the new login and logout features.

Additional Information:

• Contributors interested in working on this feature can reach out for more details and guidance.
• We appreciate your help in making our app more user-friendly and secure!

Description

I would like to have the ability to add my favourite restaurants to a "Favourites" list for easy access. This feature will enhance the user experience by providing a way to quickly access and view favourite restaurants.

Proposed Solution

• Introduce a heart icon (or any suitable icon) on each restaurant card.
• When a user clicks on the heart icon, the respective restaurant will be added to their list of favourites.
• Implement a "Favourites" page within the app, preferably located below the header and to the right side of the "Filter 4+" button. This page will display the user's favourite restaurants.

Acceptance Criteria

• Users can click on the heart icon on a restaurant card to add it to their favourites.

• The selected restaurant should appear on the "Favourites" page.

• Users can remove a restaurant from their favourites if they wish.

• I have checked the existing issues

• I have read the Contributing Guidelines

• I want to work on this issue

Additional Information

This feature will enhance user engagement and make it easier for users to keep track of their preferred restaurants. It aligns with our goal of creating a user-friendly and enjoyable restaurant exploration experience.

Tasks

• Implement the heart icon on restaurant cards.
• Develop the functionality to add and remove restaurants from the favorites list.
• Create the "Favourites" page and integrate it into the app's layout.
• Test the feature thoroughly to ensure it works seamlessly.
• Update the app's documentation to include information about this new feature.

Contribution Guidelines

• Please fork this repository and create a feature branch for this task.
• Follow our coding style and conventions (if any) as outlined in our project's guidelines.
• Feel free to reach out for any clarifications or assistance during the development process.

Additional details

Please refer to the similar feature screenshot which we are going to implement for a visual representation of this feature.

Let's make our restaurant exploration app even better by adding this exciting feature! Contributors, please indicate your interest in working on this issue. Let's collaborate to make it happen.

Currently, our app is showing clear cart button and cart count number, even if there is no item in cart. I think I doesn't make any sense of placing clear cart button when cart is empty.

Can I Work on making the FAQ Sections Animated while clicking? It Looks Static and outdated.

If I refresh page after adding items to cart, all data is removed from the state. It makes user experience bad, if I have to add to cart every time I refresh the page.

Solution:
We can persist cart state using a library called redux-persist on local storage.

Current Behaviour:

when a user clicks on the sort button, a dropdown list appears. However, the dropdown remains open unless the user clicks the sort button again. This behaviour can be somewhat unintuitive and less user-friendly.

Proposed Enhancement:

I propose that we implement a click outside collapse feature for the sort dropdowns. This means that when a user clicks anywhere outside of the dropdown, it should automatically collapse. This behaviour would enhance the user experience by making it easier for users to close the dropdown when they're finished sorting.

Contact form validations and error messages are required in case of wrong user inputs.

@Anandsg kindly assign me this under hacktoberfest

Currently, when users remove all items from their favourites, they are instantly redirected to the home page. While this works fine, we want to make it a bit more stylish. How about adding a loading spinner during this transition? I have a design concept in mind, but you're welcome to suggest your own if you prefer.

Navbar fonts did't matched with the overall fonts and its making bad impression.
Assign me this task to fix this @Anandsg

Issue Description

Current Behaviour:

• When a user adds items to their favourites list on the main page, these items appear correctly with a coloured heart icon.
• However, when the user tries to view these favourited items from the favourites page, they can see the items as expected.
• The problem arises when the user returns to the main page and attempts to add more items to their favourites. Instead of adding them to the favourites list, these new items get added to the favourites but disappear from the main page.
• Furthermore, if the user goes back to the favourites page and clicks the favourites button twice, all previously marked favourites and unfavourites are displayed in the favourites section.

Expected Behaviour:

• The expected behaviour is that favourited items should remain in the favourites list consistently.
• Additionally, clicking the favourites button twice should not result in displaying both favourites and unfavourites in the favourites section.

Steps to Reproduce:

1. Go to the main page.
2. Add some items to the favourites.
3. Navigate to the favourites page and check if the favourited items are there.
4. Return to the main page and try to add more items to the favourites.
5. Observe if the newly added items disappear from the main page.
6. Visit the favourites page again and click the favourites button twice to see if it displays both favourites and unfavourites.

Screenshots or Additional Information:

Unfortunately, I couldn't provide screen recordings due to their size, but these steps should help reproduce the issue.

Assignees:

Assigning @Anniebhalla10 for this one because she's the one who spotted this bug and suggested that I create an issue for it.

I can improve the UI of Navbar by providing margin and changing the font style so as to make it more appealing to the users.

@Anandsg could you assign this issue to me

I want to add a footer to this webpage,please assign this to me

Issue Description:
When users search for restaurants using the search box in the Body.js component, they are encountering an issue where the system incorrectly displays the message, "The restaurant you're searching for doesn't exist," even when the restaurant they are looking for is present in the App. This issue needs to be addressed to improve the search functionality.

Expected Behaviour:
Users should receive accurate search results that match the restaurants available in the app when they input a restaurant name into the search box. The system should not display false negatives, such as "The restaurant you're searching for doesn't exist."

Fix an issue with the Accordions where the collapse(Hide) action is not functioning correctly, while the expand action is working as expected.

Attached the snap for reference

Problem:
As of now, our application does not offer a dark mode option. Dark mode has become a popular feature, providing users with a visually pleasing and energy-efficient alternative to the default light mode.

Request:
We would like to implement dark mode to enhance the user experience and give users the flexibility to choose their preferred mode.

Implementation Steps:
To achieve dark mode, we'll need to:

Design Dark Mode UI: Create a visually appealing dark mode UI that complements our app's aesthetics.

Toggle Switch: Add a user-friendly toggle switch or button that allows users to switch between light and dark modes (in the header)

Adjust Colors: Modify the color schemes, text, and background colors to align with the dark mode design.

Accessibility: Ensure that the dark mode is accessible and maintains readability and usability for all users.