Domain: Coding / API Integration

Difficulty: Difficult

Description:
As the backend API implements versioning for backward compatibility, the frontend must migrate to use the v2 API endpoints with rate-limiting considerations:

• Migrate all API calls from current endpoints to /api/v2/ versioned endpoints
• Implement rate limiting handling (v2 has rate limiting applied)
• Handle deprecation headers and warnings from the backend
• Implement retry logic for rate-limited requests
• Cache responses where appropriate to minimize requests
• Add user feedback for rate limit status
• Maintain performance during API transition

Implement:

• Update all API hooks to target v2 endpoints: /api/v2/actors/search vs current /api/actors/search.
• Add rate limit header handling and display (HTTP 429, Retry-After headers)
• Implement exponential backoff retry strategy for rate-limited requests
• Add visual indicators when hitting rate limits
• Implement request debouncing/throttling for search inputs
• Add deprecation warning handling from backend headers
• Update environment configuration for v2 API endpoint

Expected Outcome:

• All frontend API calls use v2 endpoints
• Rate limiting handled gracefully without user-facing errors
• Smooth user experience during rate limit conditions
• Clear user feedback on API status
• No breaking changes to user experience
• Production-ready v2 API integration

Setup Steps:

1. Audit current API calls in hooks:
   • useActors.ts
   • useActorSearch.ts
   • useProductSearch.ts
   • useSharedCsting.ts
2. Update src/utils/endpoints.ts to use /api/v2/ base path
3. Create rate limit handling utility in src/utils/rateLimit.ts:
   • Parse rate limit headers (X-RateLimit-*)
   • Implement exponential backoff retry
   • Store retry state in React Context or local state
4. Add a visual feedback component for the rate limit status
5. Implement request debouncing for search inputs
6. Update API hooks with retry and cache logic
7. Add deprecation header parsing and logging
8. Test all endpoints with v2 API
9. Document v2 migration in DEVELOPER_GUIDE.md

Links/References:

• Update: src/utils/endpoints.ts
• Update: api
• Create: src/utils/rateLimit.ts
• Create: src/components/ui/rateLimit-indicator.tsx.
• Test: All search and list functionality with v2 endpoints