‭Dynamic Search with API Fetching‬

📝 Problem Statement:‬
‭

‭ reate a‬‭React application‬‭that allows users to‬‭search‬‭for GitHub users‬‭by their username‬
C
‭and display their profile details. Use the‬‭GitHub‬‭API‬‭to fetch user details dynamically.‬

📌 Requirements:‬
‭

‭ .‬ C
1 ‭ reate a‬‭search input‬‭where users can enter a GitHub‬‭username.‬
‭2.‬ ‭Fetch data from the GitHub API:‬
‭○‬ ‭Endpoint:‬‭ https://api.github.com/users/{username}‬
‭3.‬ ‭Display the‬‭GitHub profile information‬‭:‬
‭○‬ ‭Avatar Image‬
‭○‬ ‭Username‬
‭○‬ ‭Bio‬
‭○‬ ‭Followers Count‬
‭○‬ ‭Following Count‬
‭4.‬ ‭Show a‬‭loading indicator‬‭while fetching data.‬
‭5.‬ ‭Handle‬‭error states‬‭if the user is not found.‬

‭BELOW THIS IS NOT TO BE TOLD TO CANDIDATE‬

⏳ Expected Completion Time: 20 Minutes‬

‭‬
● ‭ min‬‭– Set up the basic component & input field.‬
5
‭●‬ ‭5 min‬‭– Implement API fetching using‬‭ fetch()‬‭or‬‭
axios‬
‭.‬
‭●‬ ‭5 min‬‭– Display user details dynamically.‬
‭●‬ ‭5 min‬‭– Handle errors & loading state.‬

💻 Sample Starter Code (Skeleton)‬

‭Unset‬
import‬‭
‭ React,‬‭
{‬‭
useState‬‭
}‬‭
from‬‭
"react";‬

const‬‭
‭ GitHubSearch‬‭
=‬‭
()‬‭
=>‬‭
{‬
const‬‭
‭ [username,‬‭
setUsername]‬‭
=‬‭
useState("");‬
const‬‭
‭ [userData,‬‭
setUserData]‬‭
=‬‭
useState(null);‬
 const‬‭
‭ [loading,‬‭
setLoading]‬‭
=‬‭
useState(false);‬
const‬‭
‭ [error,‬‭
setError]‬‭
=‬‭
useState(null);‬

const‬‭
‭ fetchUserData‬‭
=‬‭
async‬‭
()‬‭
=>‬‭
{‬
setLoading(true);‬
‭
setError(null);‬
‭

try‬‭
‭ {‬
const‬‭
‭ response‬‭
=‬‭
await‬
fetch(`https://api.github.com/users/${username}`);‬
‭
if‬‭
‭ (!response.ok)‬‭
throw‬‭
new‬‭
Error("User‬‭
not‬‭
found");‬

const‬‭
‭ data‬‭
=‬‭
await‬‭
response.json();‬
setUserData(data);‬
‭
}‬‭
‭ catch‬‭
(err)‬‭
{‬
setUserData(null);‬
‭
setError(err.message);‬
‭
}‬‭
‭ finally‬‭
{‬
setLoading(false);‬
‭
}‬
‭
};‬
‭

return‬‭
‭ (‬
<div‬‭
‭ style={{‬‭
textAlign:‬‭
"center",‬‭
padding:‬‭
"20px"‬‭
}}>‬
<h2>GitHub‬‭
‭ User‬‭
Search</h2>‬
<input‬
‭
type="text"‬
‭
placeholder="Enter‬‭
‭ GitHub‬‭
username"‬
value={username}‬
‭
onChange={(e)‬‭
‭ =>‬‭
setUsername(e.target.value)}‬
/>‬
‭
<button‬‭
‭ onClick={fetchUserData}>Search</button>‬

{loading‬‭
‭ &&‬‭
<p>Loading...</p>}‬
{error‬‭
‭ &&‬‭
<p‬‭
style={{‬‭
color:‬‭
"red"‬‭
}}>{error}</p>}‬
 {userData‬‭
‭ &&‬‭
(‬
<div>‬
‭
<img‬‭
‭ src={userData.avatar_url}‬‭
alt="Avatar"‬
width="100"‬‭
‭ />‬
<h3>{userData.login}</h3>‬
‭
<p>{userData.bio}</p>‬
‭
<p>Followers:‬‭
‭ {userData.followers}‬‭
|‬
Following:‬‭
‭ {userData.following}</p>‬
</div>‬
‭
)}‬
‭
</div>‬
‭
);‬
‭
};‬
‭

export‬‭
‭ default‬‭
GitHubSearch;‬

🔍 What This Problem Tests‬

✅ ‬‭State Management‬‭using‬‭useState‬
‭
✅ ‬‭API Fetching & Handling Async Requests‬
‭
✅ ‬‭Conditional Rendering for Loading/Error States‬
‭
✅ ‬‭Handling User Input & Events‬
‭
✅ ‬‭Basic Component Composition & UI Management‬
‭

‭SECOND PROBLEM STATEMENT‬

‭Live Notifications Panel‬

📝 Problem Statement:‬
‭

‭Create a‬‭live notifications panel‬‭in React that:‬

‭ .‬ D
1 ‭ isplays a list of notifications‬‭that update in real‬‭time.‬
‭2.‬ ‭Fetches new notifications every 5 seconds‬‭(simulate‬‭an API).‬
‭3.‬ ‭Allows users to mark notifications as read‬‭.‬
 ‭4.‬ ‭Shows an unread count badge‬‭on top of the panel.‬

⏳ Expected Completion Time: 20 Minutes‬

‭‬
● ‭ min‬‭– Set up‬‭state management & UI structure‬‭.‬
5
‭●‬ ‭5 min‬‭– Implement‬‭fetching & updating notifications‬‭every 5 sec‬‭.‬
‭●‬ ‭5 min‬‭– Handle‬‭marking notifications as read‬‭.‬
‭●‬ ‭5 min‬‭– Implement‬‭unread count badge & UI improvements‬‭.‬

💻 Sample Starter Code (Skeleton)‬

‭Unset‬
import‬‭
‭ React,‬‭
{‬‭
useState,‬‭
useEffect‬‭
}‬‭
from‬‭
"react";‬

const‬‭
‭ fakeNotifications‬‭
=‬‭
[‬
{‬‭
‭ id:‬‭
1,‬‭
message:‬‭
"New‬‭
comment‬‭
on‬‭
your‬‭
post",‬‭
read:‬‭
false‬‭
},‬
{‬‭
‭ id:‬‭
2,‬‭
message:‬‭
"Your‬‭
order‬‭
has‬‭
been‬‭
shipped",‬‭
read:‬‭
false‬
},‬
‭
{‬‭
‭ id:‬‭
3,‬‭
message:‬‭
"John‬‭
Doe‬‭
liked‬‭
your‬‭
profile",‬‭
read:‬‭
false‬
},‬
‭
];‬
‭

const‬‭
‭ Notifications‬‭
=‬‭
()‬‭
=>‬‭
{‬
const‬‭
‭ [notifications,‬‭
setNotifications]‬‭
=‬‭
useState([]);‬
const‬‭
‭ [unreadCount,‬‭
setUnreadCount]‬‭
=‬‭
useState(0);‬

useEffect(()‬‭
‭ =>‬‭
{‬
const‬‭
‭ fetchNotifications‬‭
=‬‭
()‬‭
=>‬‭
{‬
setNotifications(prev‬‭
‭ =>‬‭
{‬
const‬‭
‭ newNotifications‬‭
=‬‭
[...prev,‬
...fakeNotifications.map(n‬‭
‭ =>‬‭
({‬‭
...n,‬‭
id:‬‭
Date.now()‬‭
+‬
Math.random()‬‭
‭ }))];‬
return‬‭
‭ newNotifications.slice(-5);‬‭
//‬‭
Keep‬‭
last‬‭
5‬
notifications‬
‭
});‬
‭
};‬
‭
 const‬‭
‭ interval‬‭
=‬‭
setInterval(fetchNotifications,‬‭
5000);‬
return‬‭
‭ ()‬‭
=>‬‭
clearInterval(interval);‬
},‬‭
‭ []);‬

useEffect(()‬‭
‭ =>‬‭
{‬
setUnreadCount(notifications.filter(n‬‭
‭ =>‬
!n.read).length);‬
‭
},‬‭
‭ [notifications]);‬

const‬‭
‭ markAsRead‬‭
=‬‭
(id)‬‭
=>‬‭
{‬
setNotifications(notifications.map(n‬‭
‭ =>‬‭
(n.id‬‭
===‬‭
id‬‭
?‬‭
{‬
...n,‬‭
‭ read:‬‭
true‬‭
}‬‭
:‬‭
n)));‬
};‬
‭

return‬‭
‭ (‬
<div‬‭
‭ style={{‬‭
padding:‬‭
"20px",‬‭
width:‬‭
"300px",‬‭
border:‬
"1px‬‭
‭ solid‬‭
gray"‬‭
}}>‬
<h3>Notifications‬‭
‭ {unreadCount‬‭
>‬‭
0‬‭
&&‬
<span>({unreadCount})</span>}</h3>‬
‭
<ul>‬
‭
{notifications.map(n‬‭
‭ =>‬‭
(‬
<li‬‭
‭ key={n.id}‬‭
style={{‬‭
background:‬‭
n.read‬‭
?‬
"#ddd"‬‭
‭ :‬‭
"#fff",‬‭
padding:‬‭
"5px",‬‭
margin:‬‭
"5px‬‭
0"‬‭
}}>‬
{n.message}‬
‭
{!n.read‬‭
‭ &&‬‭
<button‬‭
onClick={()‬‭
=>‬
markAsRead(n.id)}>Mark‬‭
‭ Read</button>}‬
</li>‬
‭
))}‬
‭
</ul>‬
‭
</div>‬
‭
);‬
‭
};‬
‭

export‬‭
‭ default‬‭
Notifications;‬
🔍 What This Problem Tests‬
‭

✅
‭ ‬‭State Management‬‭– Handling dynamic lists of notifications.‬
✅ setInterval‬‭to fetch live updates.‬
‭ ‬‭useEffect & API Simulation‬‭– Using‬‭
✅ ‭ ‬‭Event Handling‬‭– Marking items as read & updating‬‭unread count.‬
✅ ‭ ‬‭Performance Optimization‬‭– Keeping only the last‬‭5 notifications‬‭to prevent memory‬
‭leaks.‬

💡 Follow-Up Interview Questions‬

‭‬
● ‭ ow would you‬‭optimize performance‬‭for large notification‬‭lists?‬
H
‭●‬ ‭How would you‬‭fetch notifications from a real API‬‭?‬
‭●‬ ‭Can you‬‭add real-time updates with WebSockets‬‭instead‬‭of polling?‬
‭●‬ ‭How would you‬‭store unread state persistently (e.g.,‬‭localStorage)?‬