shyamtawli/devFind

Problem When data fetching fails today, pages/index.js (lines 31–34 and 46–49) only logs to console.error and the user sees an empty page indistinguishable from "no profiles." The app also has no error boundary, so any render-time error crashes the whole tree. Tasks Add components/ErrorBoundary.jsx (class component implementing getDerivedStateFromError). Wrap <Component {...pageProps} /> in pages/_app.js with the new boundary. Reuse the existing components/ErrorPage.jsx as the boundary fallback UI. When the data fetch fails, render a visible error state with a "Retry" button instead of returning []. Acceptance criteria Throwing manually inside a child component shows the fallback, not a white screen. Blocking /data/*.json requests in DevTools shows a clear, user-facing error state.

Problem Search engines have no canonical signal for which URLs to crawl on devFind. Tasks Add public/robots.txt allowing all crawlers and pointing to the sitemap. Add public/sitemap.xml listing the homepage (extendable later for profile detail pages). Acceptance criteria https://<deployed-url>/robots.txt serves correctly. https://<deployed-url>/sitemap.xml serves correctly and validates as XML.

What feature? Problem The site currently has only a <title> (pages/_document.js). Shared links produce no preview, and search engines have nothing to index beyond the title. Tasks Add <meta name="description"> describing devFind. Add Open Graph tags: og:title, og:description, og:image, og:url, og:type. Add Twitter card tags (summary_large_image). Add <link rel="canonical">. Add public/og-image.png at 1200×630. Acceptance criteria Pasting the deployed URL into Twitter / Slack / Discord shows a rich card preview. Lighthouse SEO score ≥ 95. view-source: shows all the new meta tags in <head>. Add screenshots Add screenshots Code of Conduct I agree to follow this project's Code of Conduct

What happened? Problem Several interactive elements have no accessible name: Social icon links in components/Profile.jsx (lines 98–107) Theme toggle button in components/Sidebar.jsx Search criteria <select> and the search input in components/Search.jsx — no <label> Pagination buttons in components/Pagination.jsx use opacity to convey disabled state but no aria-disabled Tasks Add aria-label="GitHub profile of <name>" (and Twitter / LinkedIn equivalents) on each social <a>. Add an aria-label on the theme toggle button reflecting its current state (e.g. "Switch to dark mode"). Add a <label> (visible or sr-only) for the search input and the criteria dropdown. Add aria-disabled matching the visual disabled state on pagination buttons. Acceptance criteria axe DevTools shows zero "elements must have an accessible name" violations on /. Tabbing through the page with a screen reader announces every interactive control. Add screenshots Add screenshots What browsers are you seeing t

What happened? Problem components/Profile.jsx (lines 39–44) uses a plain <img> with no lazy loading, no responsive sizes, and the alt text "User logo" — which conveys nothing useful to screen-reader users. Tasks Swap the <img> for next/image with width={96} and height={96}, preserving the existing onError fallback to /defaultAvatar.webp. Set alt={${data.name}'s avatar}. Add the GitHub avatar hosts to images.remotePatterns in next.config.mjs: avatars.githubusercontent.com github.com Acceptance criteria Lighthouse audit "Image elements have explicit width and height" passes. Screen reader announces "'s avatar" instead of "User logo". Avatars still fall back to /defaultAvatar.webp when the source fails. Add screenshots Add screenshots What browsers are you seeing the problem on? No response Code of Conduct I agree to follow this project's Code of Conduct