Assignment/deepesh pal

README.md

@@ -1,87 +1,56 @@
-# Frontend Developer Intern Assignment  
+# SolveEase Frontend 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. 
+**Branch:** `assignment/deepesh-pal`  
+**Position:** Frontend Intern  
+**Tech Stack:** Next.js, React, TypeScript, Tailwind CSS
 
 ---
 
-## 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.  
+## Project Description
 
----
+This project showcases the **frontend skills** by improving the starter platform provided by SolveEase.  
+Features implemented:  
+- Modern, **responsive UI** with Tailwind CSS.  
+- **Workers listing page** with grid layout.  
+- Sorting by name and filtering by price.  
+- **Card hover effects**: scale, shadow, image zoom, overlay.  
+- **Skeleton loader** for smooth loading experience.  
+- **Fade-in animation** for cards.  
+- Accessibility improvements (`alt` tags, semantic HTML).  
+- Performance optimizations (lazy loading images via `next/image`).
 
-## 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").  
+Optional/Extra:  
+- Smooth hover animations for modern frontend interactions.
 
 ---
 
-## Deliverables  
-1. Fork the repo and work from a branch named: assignment/<your-full-name> (for example: assignment/adarsh-maurya).
-2. Implement improvements and features that demonstrate your mastery of the job requirements (UI polish, responsiveness, Tailwind usage, tests, accessibility, performance).
-3. Push your branch to GitHub, add a clear README, and (strongly recommended) deploy the app (Vercel/Netlify/GH Pages)
-3. Fill in the Google Form with your details for submission.
+## How to Run Locally
 
----
+1. Clone the repository:  
+```bash
+git clone https://github.com/Deepu23e1/frontend_dev_assignment.git
+Checkout to assignment branch:
 
-## Evaluation Criteria  
-- 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.  
+bash
+Copy code
+git checkout assignment/deepesh-pal
+Install dependencies:
 
----
+bash
+Copy code
+npm install
+Run the development server:
+
+bash
+Copy code
+npm run dev
+
+
+# Screenshots / GIFs
+
+Desktop View:  
+![Desktop Layout](public/screenshots/desktop.png)
 
-## 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.
+Mobile View:  
+![Mobile Layout](public/screenshots/mobile.png)
 
-Good luck 🚀  

next.config.ts

@@ -1,10 +1,10 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
-  images:{
-    domains: ['images.unsplash.com','randomuser.me'],
-  }
+  output: 'export',  // ✅ important
+  images: {
+    unoptimized: true,  // required for static export
+  },
 };
 
-export default nextConfig;
+export default nextConfig;