adding more functionality like filter by profession and salary

README.md

@@ -1,85 +1,47 @@
-# Frontend Developer Intern Assignment  
-
-## Mandatory Tasks
-- Follow SolveEase on [Github](https://github.com/solve-ease) and [Linkedin](https://www.linkedin.com/company/solve-ease)
-- Star this repo
-
-## 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.  
-
----
-
-## Expectations  
-- 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").  
-
----
-
-## Deliverables  
-1. Fork the assignment repo, make changes there.
-2. Fill in the Goggle Form with your details for submission.
-
----
-
-## Evaluation Criteria  
-- Code quality, readability, and structure.  
-- UI/UX improvements and responsiveness.  
-- Correctness of functionality (filters, pagination, sticky navbar, optimizations).  
-- Debugging and problem-solving approach.  
-- Git usage and commit practices.  
-- Handling of API calls, loading states, and error cases.  
-
----
-
-## Notes  
-- 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 🚀  
+# 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. 
+

next.config.ts

@@ -1,10 +1,21 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
-  images:{
-    domains: ['images.unsplash.com','randomuser.me'],
-  }
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'randomuser.me',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+        pathname: '/**',
+      }
+    ]
+  },
 };
 
 export default nextConfig;

src/app/api/services/route.ts

@@ -7,10 +7,10 @@ export async function GET(request: NextRequest) {
     // Simulate API delay
     await new Promise(resolve => setTimeout(resolve, 50 + Math.random() * 100))
 
-    // Extract unique services from workers data
+
     const services = Array.from(new Set(workersData.map(worker => worker.service)))
 
-    // Get service statistics
+
     const serviceStats = services.map(service => {
       const workersInService = workersData.filter(worker => worker.service === service)
       const avgPrice = Math.round(

src/app/api/workers/route.ts

@@ -1,18 +1,18 @@
-import { NextResponse } from 'next/server'
-import workersData from '../../../../workers.json'
+import { NextResponse } from 'next/server';
+import workersData from '../../../../workers.json'; 
 
 export async function GET() {
   try {
     return NextResponse.json({
       success: true,
-      data: workersData
-    })
-  } catch (error) {
-    console.error('API Error:', error)
+      data: workersData,
+      timestamp: new Date().toISOString()
+    });
+  } catch (err) {
+    console.error('API Error:', err);
     return NextResponse.json({
       success: false,
-      error: 'Failed to fetch workers data'
-    }, { status: 500 })
+      error: 'Internal Server Error'
+    }, { status: 500 });
   }
 }
-