TASK.md

Next.js Product Listing Site with Notion CMS - Task Tracking

Active Work

Sprint 1: Project Setup and Foundation (Current)

• Create project repository
• Initialize Next.js project with TypeScript
• Set up Tailwind CSS
• Configure ESLint and Prettier
• Create basic folder structure
• Set up environment variables
• Create Notion database schema
• Implement Notion API integration
• Create ProductCard component
• Create ProductGrid component

Sprint 2: Testing and Component Fixes (Added 2025-04-22)

• Fix component export issues
  • Review and update ProductCard export statement
  • Review and update ProductGrid export statement
  • Ensure all component imports use correct paths
• Fix test environment setup
  • Verify Next.js mocks are properly configured
  • Check Jest configuration for module resolution
  • Update test utilities if needed
• Address test failures
  • Fix ProductCard render tests (using Spanish "Agotado" text for Argentinian audience)
  • Fix ProductGrid render tests
  • Verify all component props are correctly typed
• Create documentation
  • Implement documentation pages in /pages/docs
  • Create architecture documentation
  • Create data flow documentation
  • Create component documentation
  • Organize diagrams in /docs folder

Sprint 3: Core Application Development (Added 2025-04-22)

• Implement Navbar and Footer components
  • Add theme toggle functionality
  • Ensure proper responsive design
  • Create component tests
• Solve Next.js hydration issues
  • Create ClientOnly component wrapper
  • Fix client-side animations in SSR context
  • Ensure all tests pass with hydration fixes
• Connect Notion database to the application (Added 2025-04-23)
  • Update homepage to fetch real products from Notion
  • Add error handling for API requests

Sprint 4: UI Improvements and Refinement (Added 2025-04-23)

• Enhanced Product Card UI
  • Increase product card size for better visibility
  • Replace "Agotado" text with sad face icon on sold-out products
  • Make locked icon bigger and dark red
  • Hide prices for locked items, replace with "$ ¯\(ツ)/¯"
  • Fix card border colors (black in light mode, white in dark mode)
  • Fix positioning and spacing issues
• Improved Drop Selector Experience
  • Make drop selection buttons larger and more prominent
  • Add translucent background to the drop selector
  • Add "Ocultar agotados" checkbox to filter out-of-stock products
  • Fix empty level headings when all products are filtered out
• Header Component Improvements
  • Change header background from translucent to solid color
  • Make help button match theme toggle button style
  • Replace HelpCircle icon with simple "?" character
• Fix React Hydration Issues
  • Add suppressHydrationWarning where needed
  • Refactor conditional rendering in theme-dependent UI elements
  • Fix hydration mismatch in the help button component
  • Create unit tests for Notion integration
  • Create tests for homepage with Notion data

Sprint 5: Navigation and Product Detail Improvements (Added 2025-04-24)

• Fix Product Drop Navigation System
  • Create ProductNavigationContext to centralize state management
  • Ensure drop selection works after returning from product detail page
  • Make level automatically reset to 1 when changing drops
  • Fix level heading visibility when scrolling to sections
  • Fix browser extension hydration errors with suppressHydrationWarning
• Improve Test Coverage
  • Create unit tests for ProductNavigationContext
  • Add tests for drop selection and level reset functionality
  • Create helper tests for scroll position calculation
• Enhance Product Detail Page
  • Match styling with recent UI improvements (black/white inverted colors)
  • Add thumbnail strip for better image navigation
  • Improve visual feedback for product availability with face icons
  • Fix hydration issues with proper mounting state pattern
• Create loading performance plan
  • Create logo-based loading animation strategy
  • Design enhanced image loading component
  • Plan performance optimizations for all product views

Sprint 6: Loading Animation & Performance (Added 2025-04-24)

• Implement logo-based loading animations
  • Create LogoLoading component with theme-aware design
  • Implement ImageWithLogoLoading component that extends Next.js Image
  • Add loading spinner with oBoRo logo to product detail page
  • Replace standard loading with logo animation on main page
  • Update product cards to use logo loading for consistent experience
• Add favicon and metadata
  • Add oBoRo logo as favicon for all browsers
  • Create web manifest for progressive web app support
  • Update metadata in app layout
• Create page-level loading states
  • Add main page loading.tsx with product skeleton and logo animation
  • Update product detail loading.tsx with logo animation
• Create Homepage with featured products
• Implement Products listing page

Milestones

Milestone 1: Project Setup and Notion Integration

• Due Date: [Insert Date]
• Status: Complete
• Description: Set up the project structure, configure the development environment, and implement the Notion API integration.

Milestone 2: Core UI Components and Pages

• Due Date: [Insert Date]
• Status: In Progress
• Description: Develop the core UI components and pages, including the product listing, product detail, and homepage.

Milestone 3: Search, Filtering, and Responsive Design

• Due Date: [Insert Date]
• Status: Not Started
• Description: Implement search and filtering functionality, and ensure the design is responsive across all devices.

Milestone 4: Deployment and Optimization

• Due Date: [Insert Date]
• Status: Not Started
• Description: Deploy the application to Vercel, optimize performance, and implement SEO best practices.

Task Backlog

Project Setup

• Create .env.local file with required environment variables
• Set up Husky for pre-commit hooks

Notion CMS Integration

• Create Notion integration and get API key
• Design and create Notion database for products
• Implement Notion API client in lib/notion.js
• Create utility functions for data transformation
• Implement error handling for API requests
• Add caching strategy for Notion data

UI Components

• Design and implement Navbar component
• Design and implement Footer component
• Create ProductCard component
• Create ProductGrid component
• Design and implement ProductDetail component
• Create Loading and Error state components
• Implement theme toggle (dark/light mode)

Pages

• Create Homepage with featured products
• Implement Products listing page
• Create dynamic Product detail page
• Add 404 and error pages
• Implement API routes for data fetching

Styling and Responsive Design

• Set up global styles and Tailwind configuration
• Implement responsive design for mobile devices
• Create tablet and desktop layouts
• Add animations and transitions
• Ensure consistent styling across all pages
• Test on various devices and screen sizes

Search and Filtering

• Implement search functionality
• Add category filtering
• Create price range filter
• Implement sorting options
• Add pagination for product listings

WhatsApp Integration

• Design and implement "Buy via WhatsApp" button
• Create message template for product inquiries
• Add WhatsApp number configuration

Performance Optimization

• Optimize images with Next.js Image component
• Implement lazy loading for off-screen content
• Add code splitting and dynamic imports
• Optimize JavaScript bundle size
• Implement caching strategies

SEO

• Add proper meta tags to all pages
• Implement structured data for products
• Create sitemap.xml
• Add canonical URLs
• Ensure semantic HTML structure

Accessibility

• Ensure proper contrast ratios
• Add ARIA attributes where needed
• Implement keyboard navigation
• Test with screen readers
• Fix any accessibility issues

Deployment

• Configure Vercel project
• Set up environment variables in Vercel
• Deploy to production
• Set up custom domain (if applicable)
• Configure Vercel Analytics

Testing

• Write unit tests for utility functions
• Add integration tests for API routes
• Implement end-to-end tests for critical user flows
• Create component tests for Navbar and Footer
• Create tests for Notion API integration
• Create tests for homepage with real data
• Test performance with Lighthouse
• Cross-browser testing

Documentation

• Create README.md with setup instructions
• Document Notion database structure
• Add inline code comments
• Create user guide for content management
• Document deployment process
• Create comprehensive documentation pages
• Add data flow diagrams
• Document component architecture
• Create component usage guides

Completed Tasks

• Create project repository
• Initialize Next.js project with TypeScript
• Set up Tailwind CSS
• Configure ESLint and Prettier
• Create basic folder structure
• Design and implement Navbar component with theme toggle
• Design and implement Footer component
• Create ClientOnly component to fix hydration issues
• Create component tests for Navbar and Footer