feat: Implement product catalog with infinite scroll and product card integration

[evgongora]

Description

Closes issue #7

This PR implements the product catalog UI, fetching product data from NFTs and displaying them in the product list. Key features include:

• Product Catalog UI: The catalog interface fetches and displays products dynamically, integrating images, descriptions, pricing, and strength. Each product is rendered via the productCard component, ensuring a consistent design with product details like farm name, region, and variety. Infinite scrolling is implemented for seamless loading of more products as users reach the bottom, enhancing user experience. This is achieved using useInfiniteQuery for efficient data pagination.
• Integration with tRPC API: Implemented a productRouter that allows fetching products from the database using a paginated API. This ensures efficient data loading and allows infinite scrolling on the frontend. Products are ordered by ID and fetched in batches based on a limit, with a cursor for pagination.
• Product Data Handling: Safely processes and displays product information including NFT metadata, such as images, pricing, and regional details. The code checks if the metadata is a valid JSON string or a direct object and handles potential errors during parsing, ensuring the correct data is shown for each product.
• Updated Prisma Schema: Added fields region, farmName, and strength to the Product model, ensuring proper representation of these attributes in the database. This provides more detailed product information for display and usage in the application.
• Seed Data for Product Examples: Added several example products (coffee cards) to the seed.js file with key fields like title, region, farmName, and strength. The products are inserted into the database with different prices, and their metadata is stored as JSON.

Checklist

• [ ] The title of the PR is clear and descriptive.
• [ ] All tests have been run and passed.
• [ ] Code follows project conventions (Biome formatting, linting).
• [ ] Documentation has been updated as needed.
• [ ] Commit messages follow the Conventional Commits style.

Type of Change

• [ ] Bugfix
• [x] Feature
• [x] Refactor
• [ ] Chore
• [ ] Documentation
• [ ] Test

Testing

Manual Testing

• After seeding the database, verify that the coffee cards are inserted correctly with the appropriate fields (e.g., title, description, price, region).
• Navigate to the marketplace page and verify that products are loaded from the backend.
• Ensure that the product images, descriptions, prices, and other details are displayed correctly for each product.
• Scroll down the page and ensure that more products are fetched automatically without refreshing the page.
• Verify that the products are added to the existing list smoothly.
• Ensure the "Add to Cart" button is displayed and confirm that clicking it does not break the UI. (This is a placeholder for future functionality.)

Automated Tests

• [ ] Unit tests added or updated
• [ ] Integration tests added or updated
• [ ] E2E tests added or updated

Additional Notes

Here is a preview with multiple products. ☕