Enhanced Testimonials Section with Avatars, Verification Badges, Skill Tags & Learning Outcomes#1013
Conversation
|
@ArshiBansal is attempting to deploy a commit to the durdana3105's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe ChangesTestimonials Carousel and Feedback Form
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/landing/Testimonials.tsx (3)
215-215: ⚡ Quick winImprove key generation for React reconciliation.
The current key
${t.name}-${i}relies on the combination of name and index. Since testimonials are duplicated for infinite scroll (e.g., "Aisha Khan" appears at index 0 and 6), this approach is fragile. If the data order changes or names collide, React's reconciliation could behave unexpectedly.Consider adding a unique
idfield to each testimonial object or using a more stable key generation strategy.♻️ Suggested approach: Add unique ID to each testimonial
Update the interface:
interface Testimonial { + id: string; text: string; name: string;Then use the ID as the key:
-key={`${t.name}-${i}`} +key={t.id}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/landing/Testimonials.tsx` at line 215, The current key generation at line 215 using `${t.name}-${i}` is fragile because testimonials are duplicated for infinite scroll, causing duplicate names to appear at different indices which breaks React's reconciliation. Add a unique `id` field to each testimonial object in the testimonials data structure, then update the key expression to use this stable identifier (e.g., `key={t.id}` or `key={`testimonial-${t.id}`}`) instead of relying on the name and index combination. This ensures each testimonial item has a truly unique, stable key regardless of duplication or ordering changes.
41-41: ⚡ Quick winReconsider having all testimonials verified.
Currently, all testimonials have
verified: true. When every testimonial is verified, the verification badge loses its trust-building value as a differentiator.Consider mixing verified and unverified testimonials to make the verification indicator more meaningful and credible to users.
Also applies to: 51-51, 61-61, 71-71, 81-81, 91-91, 103-103, 113-113, 123-123
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/landing/Testimonials.tsx` at line 41, All testimonials in src/components/landing/Testimonials.tsx currently have verified set to true at lines 41, 51, 61, 71, 81, 91, 103, 113, and 123, which diminishes the credibility value of the verification badge. To make the verification indicator meaningful as a trust differentiator, change some (but not all) of these verified properties from true to false across the testimonial objects. Select a subset of testimonials to remain verified while marking others as unverified, creating a realistic mix that gives the verification badge actual significance.
232-249: 💤 Low valueConsider consolidating duplicate verification indicators.
The verified status is displayed twice:
- A CheckCircle icon badge on the avatar (lines 232-236)
- A "VERIFIED" text label with icon next to the name (lines 244-249)
While both indicators reinforce trust, the duplication might be visually redundant. Consider whether one indicator sufficiently conveys the verification status, or if both are intentionally used for emphasis.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/landing/Testimonials.tsx` around lines 232 - 249, The verified status in the Testimonials component is displayed twice through duplicate indicators: once as a CheckCircle icon badge absolutely positioned on the avatar (checking t.verified), and again as a "VERIFIED" text badge with icon next to the name (also checking t.verified). Review whether both verification indicators are necessary for your design goals. If duplication is unintended, remove one of the two conditional blocks—either the avatar badge or the text badge next to the name. If both serve a deliberate purpose, document the rationale; otherwise, consolidate to a single verification indicator.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/landing/Testimonials.tsx`:
- Line 336: The setTimeout call that resets the submitted state is not cleaned
up when the component unmounts, which can cause state updates on unmounted
components. Store the timeout ID returned by setTimeout in a variable, and
create a useEffect hook with a cleanup function that clears this timeout using
clearTimeout when the component unmounts or when the relevant dependency
changes. This ensures the setSubmitted call is cancelled if the component
unmounts before the 3-second delay completes.
---
Nitpick comments:
In `@src/components/landing/Testimonials.tsx`:
- Line 215: The current key generation at line 215 using `${t.name}-${i}` is
fragile because testimonials are duplicated for infinite scroll, causing
duplicate names to appear at different indices which breaks React's
reconciliation. Add a unique `id` field to each testimonial object in the
testimonials data structure, then update the key expression to use this stable
identifier (e.g., `key={t.id}` or `key={`testimonial-${t.id}`}`) instead of
relying on the name and index combination. This ensures each testimonial item
has a truly unique, stable key regardless of duplication or ordering changes.
- Line 41: All testimonials in src/components/landing/Testimonials.tsx currently
have verified set to true at lines 41, 51, 61, 71, 81, 91, 103, 113, and 123,
which diminishes the credibility value of the verification badge. To make the
verification indicator meaningful as a trust differentiator, change some (but
not all) of these verified properties from true to false across the testimonial
objects. Select a subset of testimonials to remain verified while marking others
as unverified, creating a realistic mix that gives the verification badge actual
significance.
- Around line 232-249: The verified status in the Testimonials component is
displayed twice through duplicate indicators: once as a CheckCircle icon badge
absolutely positioned on the avatar (checking t.verified), and again as a
"VERIFIED" text badge with icon next to the name (also checking t.verified).
Review whether both verification indicators are necessary for your design goals.
If duplication is unintended, remove one of the two conditional blocks—either
the avatar badge or the text badge next to the name. If both serve a deliberate
purpose, document the rationale; otherwise, consolidate to a single verification
indicator.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d8fcbddb-ea82-49cc-873a-b1630d90ad27
📒 Files selected for processing (1)
src/components/landing/Testimonials.tsx
| setSubmitted(false); | ||
| }, 3000); | ||
|
|
||
| setTimeout(() => setSubmitted(false), 3000); |
There was a problem hiding this comment.
Potential memory leak: setTimeout not cleaned up on unmount.
The setTimeout at line 336 sets state after 3 seconds, but if the component unmounts before the timeout fires, setSubmitted(false) will attempt to update state on an unmounted component, causing a warning and potential memory leak.
Store the timeout ID and clear it in a useEffect cleanup function.
🛡️ Proposed fix to prevent memory leak
+ const submitTimeoutRef = useRef<number | null>(null);
+
+ useEffect(() => {
+ return () => {
+ if (submitTimeoutRef.current) {
+ clearTimeout(submitTimeoutRef.current);
+ }
+ };
+ }, []);
onSubmit={(e) => {
e.preventDefault();
if (!review.trim()) {
toast.error("Please enter your feedback.");
return;
}
setSubmitted(true);
- setTimeout(() => setSubmitted(false), 3000);
+ submitTimeoutRef.current = window.setTimeout(() => {
+ setSubmitted(false);
+ submitTimeoutRef.current = null;
+ }, 3000);
setName("");
setRating(0);
setReview("");
}}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/landing/Testimonials.tsx` at line 336, The setTimeout call
that resets the submitted state is not cleaned up when the component unmounts,
which can cause state updates on unmounted components. Store the timeout ID
returned by setTimeout in a variable, and create a useEffect hook with a cleanup
function that clears this timeout using clearTimeout when the component unmounts
or when the relevant dependency changes. This ensures the setSubmitted call is
cancelled if the component unmounts before the 3-second delay completes.
2 participants
Description
📋 What does this PR do?
This PR enhances the Testimonials section by adding trust-building and outcome-focused elements as per the given requirements. The changes make testimonials more credible, visually appealing, and informative for prospective users.
🔄 Changes Made
pravatar.🛠️ Tech Stack
📸 Screenshots / Demo
(Attach screenshots or GIF here before submitting)
🔗 Related Issue
Closes #945
Checklist
Additional Notes
pravatar.cc(public service).Made with ❤️ for GSSoC 2026
Contributor: [Your Name]
GitHub Profile: [Your GitHub Username]
Summary by CodeRabbit
New Features
Bug Fixes
Style