This assignment is designed to assess your practical skills in React, Next.js, TypeScript, Tailwind CSS, and frontend optimizations. You will work on an existing Next.js application that contains layout/design issues and some configuration bugs. Your task is to identify and resolve these issues, and implement the listed features to enhance the overall user experience.
- Correct the existing card grid layout.
- Improve the overall card design (UI/UX sensibility expected).
- Ensure the page is fully responsive across devices (desktop, tablet, mobile).
- Implement a navigation bar that remains fixed at the top while scrolling.
- Design should be clean and responsive.
- Implement optimizations such as:
- Lazy loading for images and non-critical components.
- Memoization to avoid unnecessary re-renders.
- Skeleton loading screens for better UX during data fetch.
- Add pagination for the workers listing page.
- Each page should load a suitable number of items (e.g., 9–12 cards per page).
- Implement filters for workers based on price/day and type of service.
- Filters should work seamlessly with pagination.
- Identify and fix any existing issues in
page.tsxor configuration files. - Resolve console warnings or errors.
- Ensure clean and maintainable code following best practices.
- Currently, the workers’ data is being imported directly from
workers.json. - Your task is to serve this data via /api/wprkers API route.
- Update the frontend page to fetch this data using
fetch(or any modern method such asuseEffect,useSWR, or React Query). - Donot delete the existing data loading logic, comment it out.
- Implement:
- Loading state (use skeleton screens).
- Error handling (show a friendly error message if API fails).
- Basic caching or memoization to prevent redundant calls.
- Use TypeScript and Tailwind CSS consistently.
- Follow component-driven development principles.
- Write clean, readable, and reusable code.
- Optimize for performance and accessibility.
- Maintain Git commit history (no single "final commit").
- Fork the repo and work from a branch named: assignment/ (for example: assignment/adarsh-maurya).
- Implement improvements and features that demonstrate your mastery of the job requirements (UI polish, responsiveness, Tailwind usage, tests, accessibility, performance).
- Push your branch to GitHub, add a clear README, and (strongly recommended) deploy the app (Vercel/Netlify/GH Pages)
- Fill in the Google Form with your details for submission.
- Code quality, readability, and structure.
- UI/UX improvements and responsiveness.
- Correctness of functionality (filters, pagination, sticky navbar, optimisations).
- Debugging and problem-solving approach.
- Git usage and commit practices.
- Handling of API calls, loading states, and error cases.
- You are free to use libraries like SWR or React Query, but keep the implementation clean.
- Focus on real-world production quality code, not just quick fixes.
- Add comment for any bug fix or optimization.
- Document any extra improvements you make in your submission.
Good luck 🚀