TODO_implementation.md

Implementation Steps for Frontend Dev Assignment

1. Fix Bugs in page.tsx

• Remove duplicate loadData call in useEffect
• Comment out direct import logic from workers.json
• Replace with fetch to /api/workers
• Fix grid classes: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
• Change bg from black to white for better contrast

2. Create Components Directory and Basic Components

• Create src/components/ directory
• Create Navbar.tsx component
• Create WorkerCard.tsx component with React.memo
• Create SkeletonCard.tsx component for loading
• Create Pagination.tsx component
• Create Filters.tsx component

3. Update Layout and Navbar

• Add Navbar to layout.tsx as sticky top
• Update metadata in layout.tsx (title: "Workers Directory", description: "Find and hire skilled workers")

4. Implement API Integration in page.tsx

• Add loading and error states (useState for loading, error)
• Use fetch in useEffect for /api/workers
• Add basic caching/memoization (useMemo for processed data)

5. Add Optimizations

• Update WorkerCard to use React.memo
• Implement SkeletonCard for loading state
• Add loading="lazy" to images in WorkerCard

6. Implement Pagination

• Add state for currentPage (default 1) and itemsPerPage (9)
• Slice data for pagination after filters
• Add pagination controls in Pagination component (prev/next/page numbers)

7. Implement Filters

• Add state for serviceFilter (string, default "")
• Add state for priceRange (object {min:0, max:Infinity})
• Fetch services from /api/services for dropdown
• Apply filters before pagination
• Integrate Filters component in page.tsx

8. Add Unit Tests

• Install Jest and @testing-library/react
• Write tests for WorkerCard component
• Write tests for Filters component
• Write tests for Pagination component
• Add test script to package.json

9. Testing and Bug Fixes

• Run npm run dev
• Test locally: responsiveness, API, filters, pagination
• Fix any console warnings/errors (build passed without warnings)
• Ensure full responsiveness across devices
• Run tests and ensure they pass

10. Update README

• Add how to run locally (npm install, npm run dev)
• Add Node version, build commands
• Describe implemented features
• Add instructions for running tests
• Note trade-offs or known issues

11. Deploy to Vercel

• Install Vercel CLI if needed
• Run vercel --prod to deploy
• Note the deployment URL

12. Final Touches

• Commit changes with descriptive messages
• Ensure branch is assignment/