Implementing cart: significant changes to the schema, backend, and frontend components, ensuring better performance, user experience, and maintainability.

[ShivanshPlays]

PR Justification for Level 3

Overview

This PR introduces significant changes to the schema, backend, and frontend components, ensuring better performance, user experience, and maintainability. The changes are divided into two key parts, each of which holds substantial value, qualifying this PR for Level 3 (45 points).

---

Part 1: Backend Changes for Cart (20-25 points)

Schema Changes:

• Added a many-to-many relationship between User and Product entities to accommodate the Cart feature.
• Updated the Prisma schema to reflect these changes by introducing the necessary relations, constraints, and indexes.

Backend Action for Cart:

• Created backend actions with type-safe Prisma queries for adding products to the cart.
• Implemented robust error handling for Prisma operations to ensure that appropriate messages are returned in the case of conflicts or missing data.
• Ensured the code follows best practices by keeping server actions modular and efficient, supporting future scalability.
• modified the existing server action of product fetching in order to fetch the wishlist items also, for identifying wishlisted items.

These backend improvements ensure that the Cart feature is correctly integrated with database relationships and provide a smooth developer experience with type safety and error handling.

---

Part 2: Frontend Restructuring and UI Enhancements (20-25 points)

Modifications to Product Cards and Component Structure:

• Refactored the product card component into:
  1. Server Component: Handles static product information.
  2. Client Component (Form): Manages Wishlist and Add to Cart buttons. which are linked to server action calls onclick.

This restructuring ensures that the form elements handling client-side interactivity are isolated in a client component, which was crucial to handle client-side error handling and dynamic updates efficiently.

UI and State Management for Cart:

• Enhanced the Add to Cart button by:
  • Displaying an empty cart icon when the product is not in the cart.
  • Updating the cart icon to filled with color when a product is added, improving user feedback and engagement.
• Introduced state management to keep a client-side copy of the cart data, preventing redundant DB queries whenever a product is added or removed from the cart. This improves the performance and responsiveness of the application.

These changes to the product card structure and UI ensure that the user experience is intuitive and that the backend load is minimized by managing state efficiently.

---

Conclusion

This PR delivers a holistic solution involving both backend and frontend improvements. By:

1. Creating type-safe, scalable backend actions for managing the cart.
2. Refactoring components and managing client-side state to enhance the user experience and reduce database overhead.

Each part is substantial and worth 20-25 points, adding up to a total of 45 points for this PR. The changes demonstrate a solid understanding of both backend design and frontend optimization, justifying a Level 3 rating.

Related Issues

• Closes [Feat] Update schema of backend to accommodate user cart #973

Screenshots / videos (if applicable)

Screen.Recording.2024-10-26.234823.mp4

[vercel]

@ShivanshPlays is attempting to deploy a commit to the MD AZFAR ALAM's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you, ShivanshPlays, for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making Ezyshop better. 🎉

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ezyshopz	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 26, 2024 7:04pm

[mdazfar2]

Lgtm ✨