add dishes page with responsiveness and implement all 4 filters with beautiful carousal card

[ShivanshPlays]

PR1 : #242

PR Justification for Level 3

---

Summary

This PR introduces a new Dishes Page, modifications to the backend to support dynamic queries, a dish card component with carousel functionality, and ensures that the page is fully responsive. These changes significantly enhance the user experience, making it easier to search, filter, and view dishes based on specific criteria such as category, tags, and price.

---

Key Enhancements and Changes

1. Dishes Page

• Objective: Create a dedicated page to showcase dishes available on the platform.
• Implementation:
  • Developed a new page to display dishes, which integrates dynamic query handling for better user interaction.
  • The page allows users to filter dishes based on categories, tags, and sorting by price.

2. Backend Modifications for Dynamic Queries

• Objective: Modify backend logic to handle four dynamic query parameters for better filtering and searching.
• Implementation:
  • Updated the backend API to accommodate queries for search, category, tags, and price sorting.
  • Integrated logic that allows flexible querying of the dishes database, ensuring that the correct set of dishes is returned based on user input.

3. Dish Card Component with Carousel

• Objective: Create a reusable card component to display individual dishes with an interactive carousel.
• Implementation:
  • Designed a dish card component that displays the dish details, including images, descriptions, and pricing.
  • Added a carousel feature to showcase multiple images for each dish, allowing users to interact with images of the dish from different angles or variations.

4. Responsive Design

• Objective: Ensure the dishes page is fully accessible and visually appealing across all devices, providing a seamless user experience.
• Implementation:
  • Used responsive design techniques to adjust the layout and display of dishes, making sure the page adapts to different screen sizes.
  • Ensured the dish card component remains functional and visually consistent on mobile, tablet, and desktop screens.

---

Points Justification

This PR meets the 40-45 points level due to the following contributions:

• New Feature (Dishes Page): Added a fully functional dishes page with dynamic filtering and sorting capabilities.
• Backend Modifications: Implemented the ability to filter and sort dishes based on multiple query parameters, enhancing user interaction and flexibility.
• Dish Card Component: Introduced a reusable card component with carousel functionality, providing an interactive and engaging display for dishes.
• Responsive Design: Ensured that the page and components are fully responsive, offering a consistent and optimal experience on all device types.
• Documentation Update Required: Updated documentation to reflect new page functionality, query parameters, and usage instructions.

---

Conclusion

This PR introduces a valuable new page for users to explore dishes with enhanced filtering and sorting features. The addition of a reusable dish card component, complete with a carousel, and the implementation of a responsive design ensures that the page is engaging and user-friendly across devices. These changes improve the platform's functionality and user experience, with all necessary backend adjustments to support dynamic queries. Documentation updates will further support the changes made.

RESPONSIVE:

Screen.Recording.2024-11-09.161204.mp4

WORKING FILTERS:

1.mp4

2.mp4

[github-actions]

🚀 Thank you for contributing to this project, your support is much appreciated.

Stay awesome! 😎