Dynamic Search with API Fetching
📝 Problem Statement:
reate aReact applicationthat allows users tosearchfor GitHub usersby their username
C
and display their profile details. Use theGitHubAPIto fetch user details dynamically.
📌 Requirements:
. C
1 reate asearch inputwhere users can enter a GitHubusername.
2. Fetch data from the GitHub API:
○ Endpoint: https://api.github.com/users/{username}
3. Display theGitHub profile information:
○ Avatar Image
○ Username
○ Bio
○ Followers Count
○ Following Count
4. Show aloading indicatorwhile fetching data.
5. Handleerror statesif 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 ManagementusinguseState
✅ 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 alive notifications panelin React that:
. D
1 isplays a list of notificationsthat update in realtime.
2. Fetches new notifications every 5 seconds(simulatean API).
3. Allows users to mark notifications as read.
4. Shows an unread count badgeon top of the panel.
⏳ Expected Completion Time: 20 Minutes
● min– Set upstate management & UI structure.
5
● 5 min– Implementfetching & updating notificationsevery 5 sec.
● 5 min– Handlemarking notifications as read.
● 5 min– Implementunread 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.
✅ setIntervalto fetch live updates.
useEffect & API Simulation– Using
✅ Event Handling– Marking items as read & updatingunread count.
✅ Performance Optimization– Keeping only the last5 notificationsto prevent memory
leaks.
💡 Follow-Up Interview Questions
● ow would youoptimize performancefor large notificationlists?
H
● How would youfetch notifications from a real API?
● Can youadd real-time updates with WebSocketsinsteadof polling?
● How would youstore unread state persistently (e.g.,localStorage)?
