Feat : Add Collection Page #118

[Sabarish2317]

Pull Request

Create the Collection Page, similar to the existing All Products and Garage Sale pages, but using a dynamic URL and API endpoint to display products by collection name. #118

Description

Kept the sorting, filtering logic similar to product page and add other functionalities untouched, reused the same product card. The :name is dynamic in the endpoint and user can navigate from the collection section of the home page.

Issue : Create a common filtering & sorting logic to use across all product listing page

Screenshots

Fallback if image is unavailable

Checklist

• My code builds and runs locally
• I’ve added/updated documentation if needed
• I’ve tested my changes
• I’ve linked related issues (if any)
• (Optional) I’ve credited myself with the All Contributors bot if this is my first contribution or a new contribution type

[Alexandrbig1]

@Sabarish2317, may you tell me what the reference of this task, cause currently we have this tasks, for collection section, and 'Collection' page

[Alexandrbig1]

@Sabarish2317, got it, I saw your comment, now. This page is similar for 'All Products' and 'Garage Sale' pages, where we using as one component with props, may you check the implmentation and update your code, please. Also check the URL and test from which endpoint you fetching.

[Sabarish2317]

@Alexandrbig1 I used api/collections/:collectionId to fetch the data and show the collections, users mostly navigate from the home page collection-section, rest of the implementations are working fine like add to card, click to view product details etc.

[Alexandrbig1]

@Sabarish2317, we don’t have an API route for /collections/:id — instead, we’re using /collections/:name.
Also, since we already have two similar pages, the goal is to have one shared React component that can render all three collection pages.
Please review the existing component implementation and align your approach with it to improve maintainability, performance, and consistency across the project.

[Sabarish2317]

@Alexandrbig1 Sorry for the confusion about /collections/:id .
The id I mentioned is from collections-section in home page which i used for routing.
export const collections = [
{ id: 'pre-workout', title: 'PRE-WORKOUT', image: preWorkoutImg },
{ id: 'build-muscle', title: 'BUILD MUSCLE', image: buildMuscleImg },
...

it already has lowercase & - hyphened id so I used it, Should I create a new function to accept "Pre Workout" -> "pre-workout"
or use the id itself for navigation.

Could you accept this PR after checking for functionality and Raise an issue so after that I will refactor all similar pages such as all products, garage sale etc.. to use same shared component.

I don't have much experience in open-source-repo contribution so you can guide me through :).

[Alexandrbig1]

@Sabarish2317, just make small updates to this PR, and I'll approve it, and then you can update it. But check fetch latest updates, check descriptio, and test api endpoints.

[Sabarish2317]

@Alexandrbig1
I made a new commit.

Changes

Fetched latest updates, resolved the conflicts (A duplicate collections-page page was in upstream)

• Tested data fetching after user clicked a collection from (Collection section or goals section) from home page
• Products can be added to cart, clicking on a product open product page
• Added a new {id} in goals section constants eg : amino-acids

New issue

1. Duplicate logics across 3 pages (Garage Sale, Collections Page, All Products Page)
2. The goals banner images has bad readability as shown below. Added a fallback for now so code won't break.

[Alexandrbig1]

Thank you for your contribution, and congrats on your PR being approved!
We’re excited to have your work as part of Open Code Chicago’s Hacktoberfest 2025 project.

[Sabarish2317]

@Alexandrbig1 Sorry got mail that there is a build error due to lint issue (unused declaration) should I resolve that and commit.

[Alexandrbig1]

@Sabarish2317, thanks for the contribution! A few small, important fixes to improve safety and robustness before merging:

• collectionService.js: encode the route param when calling the API to avoid malformed requests — e.g. axiosInstance.get(/collections/${encodeURIComponent(collectionId)}).
• CollectionSection.jsx / routing: encode collection IDs when building URLs (navigate(/collections/${encodeURIComponent(collection.id)})) to mirror the ProductCard change.
• CollectionsPage.jsx & CollectionSlice.js: there’s a mismatch — CollectionSlice sets currentCollection = action.payload.collections but CollectionsPage expects a string and calls .replace(). Either store a slug/string in the slice or make the page handle an object safely (e.g. use currentCollection?.slug || name).
• CollectionsPage.jsx: remove console.log(imageUrl).
• CollectionsPage.jsx: validate/allowlist imageUrl before using it in inline styles (backgroundImage) to avoid leaking/referrer/tracking issues from arbitrary URLs.
• Error handling: avoid showing raw backend messages to end users (error.response?.data?.message). Return/log a generic user message and surface details only in logs.
• Check lint errors; there is 1 error.

Great work.