Skip to content

README.md

Latest commit

 

History

History
47 lines (36 loc) · 2.2 KB

README.md

File metadata and controls

47 lines (36 loc) · 2.2 KB

Frontend Developer Intern Assignment

Objective

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.

Tasks

1. Fix Cards Layout & Responsiveness

  • 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).

2. Add Navbar (Sticky)

  • Implement a navigation bar that remains fixed at the top while scrolling.
  • Design should be clean and responsive.

3. Optimize Page Load & Performance

  • 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.

4. Implement Pagination

  • Add pagination for the workers listing page.
  • Each page should load a suitable number of items (e.g., 9–12 cards per page).

5. Service Filters

  • Implement filters for workers based on price/day and type of service.
  • Filters should work seamlessly with pagination.

6. Bug Fixes

  • Identify and fix any existing issues in page.tsx or configuration files.
  • Resolve console warnings or errors.
  • Ensure clean and maintainable code following best practices.

7. API Integration

  • 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 as useEffect, 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.