Marketplace Main Page

[ligiabicalho]

Overview

This issue tracks the implementation status and pending tasks for the Marketplace (Main Page). The page is mobile-first and most core features are implemented, but several improvements and checks are required for a robust and scalable experience.

---

What’s Implemented (or Partially Implemented)

• Navbar
  • Shopping cart with item count badge (needs synchronization across all points displaying the quantity).
  • User menu with "Projects," "Products," and "Experiences" (focus only on "Products" for now).
• Location Input
  • Modal for entering zip code/CEP, working correctly (at least for valid CEPs).
• Category Menu
  • Category filtering appears to function, but category list and icons still need finalization.
• Sorting Selector
  • Sorting functionality present.
• Product Listing (ProductCard)
  • Image or placeholder if missing image.
  • Title.
  • Tags (may need resizing for mobile).
  • Price and unit.
  • CTA button for adding/changing quantities; success message and updated cart/total shown (requires sync check).
  • Disabled state and alternate message when out of stock.
  • Favorite product (state maintained, but move existing favorites page from Home Page to User Menu).
  • Share (opens menu with link and copy button; missing: social network share icons).
  • Low stock warning (needs improved display, as it overlaps tags on mobile).
  • Clicking card (outside CTA) opens product page, but there is a loading bug that causes a redirect back to the previous page.

---

What Still Needs Implementation

• Cart Synchronization: Ensure product quantity is accurately reflected in all UI elements (navbar, floating panel, etc.). #10
• User Menu Enhancements: In "Products", add subdivisions for "Create New" (seller) and "Orders" (buyer), and create respective pages for new product creation and order status view.
• Category Finalization: Define the final list of categories and their icons.
• Mobile Tag Sizing: Adjust tag sizes for mobile screens.
• Share Component: Add social network icons for sharing (e.g., WhatsApp, Facebook, Twitter).
• Low Stock Warning: Improve display to avoid overlapping with tags on mobile devices.
• Update the CTA button icon: Use the basket (instead of the cart) for consistency across the marketplace.
• Favorites Page: already exists and is separated into 'Products', 'Projects', and 'Experiences', consider moving the access to the Favorites page into the UserMenu for easier navigation.
  • Review the ProductCard component used on the Favorites page:
    • The current icon is a heart; consider updating it for consistency if needed.
    • The CTA button is not navigating to the product details page—fix this behavior so users can access product details directly from their favorites.
• Product Page Bug: Fix bug where clicking a product card opens the product page but then immediately redirects back.
• Componentization: Refactor code to separate components into independent modules, especially after export from Base44, to align with Next.js/TypeScript best practices.
• Backend Integration: The current product listing is based on mocked data. Implementing a real backend and API connection is essential for production use. This includes designing the database, building API endpoints, and ensuring the frontend fetches and displays live product data securely and efficiently.

---

Observations

• Review Responsiveness: The design is mobile-first, but review and adjustments may be necessary for desktop layouts consistency and usability.