Setup Add to Cart Functionality

[Scholasticpal]

Tech Stack: Next.js, Typescript, PostgreSQL, Prisma

📦 Description

As a feature for our B2C-App, we need the ability for a user to add a product listing to their shopping cart. This task involves creating the core backend logic (the API endpoint) and the client-side function that will call it.

This issue is a great starting point as it touches on our API, database, and client-side action patterns.

✅ Acceptance Criteria

This task will be considered complete when the following are implemented:

1. Create the POST /api/cart Endpoint

This API route will be responsible for securely adding an item to the user's cart in the database.

File Location: app/api/cart/route.ts

Logic:

This must be a POST function.

It should expect a JSON body containing listingId: string and quantity: number.

Get the authenticated userId (you can find examples of this in other server-side components).

Use Prisma to find or create (upsert) the user's active Cart based on their userId.

Check if the specified listingId is already in a CartItem for this cartId.

If yes, update the quantity of the existing CartItem (e.g., quantity: old_quantity + new_quantity).

If no, create a new CartItem record linking the cartId, listingId, and quantity.

Return a NextResponse.json() with the updated cart item (or a success message) on success, and a proper error response on failure.

2. Create a Client-Side "Action" Function

We need a reusable client-side function that our UI components (like ProductCard) can call to trigger the API endpoint.

File Location: Create a new file at lib/actions/cart.ts (or a similar appropriate location).

Logic:

Create an async function: export async function addListingToCart(listingId: string, quantity: number).

This function should use fetch to make a POST request to the /api/cart endpoint.

It must pass the listingId and quantity in the JSON body.

It should include error handling (e.g., check if (!response.ok) and throw an error).

💡 Relevant Files & Context

Here are some files to guide you:

schema.prisma: Required reading. You must check this file to understand the Cart, CartItem, and Listing models and their relations.

src/app/api/search/route.ts: Use this as an example of a well-structured API route with Prisma queries.

src/components/products/ProductCard.tsx: This is an example of a component that will eventually use the addListingToCart function you create (though you are not required to add the button in this task).

**

🚀 Expected Standards

Reusable Components: The client-side logic must be in a reusable function, not written directly in a component.

Error Handling: The API route must be wrapped in a try...catch block to handle potential database or request errors gracefully.

TypeScript: All new functions, arguments, and return types should be fully typed.

Code Style: Please follow the existing code style and linting rules.

💬 Note for All Contributors

Thank you for your interest in contributing to our B2C-App! We're excited to have your help.

Getting Started: Please see our main README.md file for instructions on installation, project setup, and running the development environment.

Questions?: If you have any doubts, get stuck, or want to discuss your approach, please don't hesitate to tag or reach out to @Scholasticpal in this issue.

Submitting: When you're ready, please open a Pull Request and link it back to this issue.

We look forward to collaborating with you!