Refactor Winners Tab to Match Organizer Design

[Benjtalkshow]

Refactor Winners Tab to Match Organizer Design (app/hackathons/[slug])

Objective

Upgrade the participant-facing "Winners" tab to use the premium design already established in the organizer's PublishWinnersWizard, and ensure all project and participant links are fully functional with correct deep-linking parameters. The current implementation renders a basic card grid that lacks the visual hierarchy, deep linking, and premium "Podium" aesthetics that the organizer-side already delivers. This refactor closes that gap — the participant-facing winners experience should be indistinguishable in quality from what organizers see when publishing results.

---

Context & Current Implementation

Route

• app/(landing)/hackathons/[slug]/page.tsx

Primary Component

• components/hackathons/winners/WinnersTab.tsx

How It Currently Works

• The page uses the useHackathonData() hook to fetch the winners dataset
• WinnersTab is conditionally rendered when winners.length > 0 and the winnersTab feature is enabled in currentHackathon.enabledTabs
• The current implementation renders a basic grid of winner cards that lack:
  • Clickable deep links for projects and participant profiles
  • The premium "Podium" visual hierarchy for top 3 ranks
  • USDC financial branding next to prize amounts
  • The Ribbon rank display and high-quality avatar treatments from the organizer design

---

UI & Design Replication

Design Source

• Mirror the design found in components/organization/hackathons/rewards/WinnerCard.tsx exactly — this is the canonical reference and the participant-facing card must reach the same level of visual quality

Card Aesthetics

• Use the Ribbon component for rank display on each winner tile — the ribbon should be prominently placed and visually distinct per rank position
• Use high-quality Avatar circles for winner profile images, with appropriate fallback initials if no avatar is available
• Include a stylized project preview card at the bottom of each winner tile, showing the project image or thumbnail alongside the project name
• Prize amounts must display the USDC logo inline next to the value to ensure clear, unambiguous financial branding

Card Hierarchy & Podium Layout

• Replicate the WinnersGrid layout from components/organization/hackathons/rewards/WinnersGrid.tsx as the structural foundation
• Where applicable (i.e., when the top 3 ranked winners are present), implement the "Podium" effect — visually elevating 1st place above 2nd and 3rd, with proportional sizing or vertical offset that communicates rank at a glance
• Cards beyond the top 3 should render in a standard grid below the podium section, maintaining the same card design without the podium elevation treatment
• The overall layout must be responsive — the podium and grid should reflow gracefully at tablet and mobile breakpoints without breaking the visual hierarchy

---

Deep Linking & Logic

Project Link

• Refactor the project name and project image/thumbnail on each winner card to be clickable links
• Path: /projects/${projectId}?type=submission
• The ?type=submission query parameter is required — it must always be appended to ensure the project page renders in the correct submission view context. Do not omit this parameter under any circumstance.

Participant Link

• Refactor the participant name and avatar on each winner card to be clickable links
• Path: /profile/${username} — linking to the participant's public profile page

Fallback Rendering

• Both links must degrade gracefully when metadata is missing:
  • If projectId is null or undefined, render the project name and image as non-clickable text/image rather than a broken link
  • If username is null or undefined, render the participant name and avatar as non-clickable elements
  • If avatar image fails to load, fall back to styled initials using the existing Avatar component fallback pattern
• Missing metadata must never cause a rendering error or blank card — the tile should always display whatever information is available

---

Technical Details

Hooks & Data Path

• All winner data is provided by the useHackathonData() hook in the parent HackathonPage — no additional API calls should be introduced
• Map the winners array (typed as Array<HackathonWinner>) from the hook's context output to the new WinnerCard component props
• The mapping should be explicit and type-safe — strictly no any types

Components to Modify

• Overhaul components/hackathons/winners/WinnersTab.tsx — this is the primary deliverable
• Reference the logic and structure from components/organization/hackathons/rewards/PublishWinnersWizard.tsx for implementation guidance
• Reference components/organization/hackathons/rewards/WinnerCard.tsx for the card design spec
• Reference components/organization/hackathons/rewards/WinnersGrid.tsx for the grid and podium layout

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all winner data must come exclusively from the useHackathonData() hook; no hardcoded or mock values
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Confirm WinnersTab is only rendered when winners.length > 0 and winnersTab is present in currentHackathon.enabledTabs
• Verify the Podium layout correctly elevates 1st place above 2nd and 3rd when top 3 winners are present
• Confirm the Ribbon component displays the correct rank on each card
• Verify the USDC logo appears inline next to all prize amounts
• Test project deep links — clicking a project name or image navigates to /projects/${projectId}?type=submission with the query parameter correctly appended
• Test participant profile links — clicking a participant name or avatar navigates to /profile/${username}
• Verify fallback rendering — cards with missing projectId, username, or avatar image render gracefully without broken links, blank tiles, or console errors
• Confirm no additional API calls are made — all data flows exclusively from useHackathonData()
• Confirm no TypeScript any types are present in the winner data mapping layer
• Test the layout at multiple breakpoints — confirm the podium and card grid reflow correctly at tablet and mobile sizes
• Verify the card design visually matches components/organization/hackathons/rewards/WinnerCard.tsx at full fidelity
• Provide video evidence

[linear]

BOU-110

[coderabbitai]

🔗 Related PRs

#378 - Hackathon analytics [merged]
#380 - Feat/minor ux fixes [merged]
#382 - Judging dashboard [merged]
#385 - feat: implement organizer override functionality for judging scores a… [merged]
#389 - Reward settings [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Anuoluwapo25]

Gm, I am a fullsatck web3 developer and I will love to work on this issue

[Sandijigs]

hi My name is Sandra.
I have reviewed the issue and understand what needs to be done
I am a fullstack software/ Blockchain Engineer with over 6years of experience web2 experience(Fullstack) and 2 year web3 experience (JavaScript,TypeScript, Rust ,Python, Soroban,Solidity,(Backend, frontend, Mobile and smart contracts) ). I have contributed to several projects in the stellar ecosystem. . please Assign this Issue to me

[JamesVictor-O]

Hello! I’d love to take on this issue. I’ve reviewed the requirements and have a clear path forward for the implementation. I estimate I can have a PR ready within about 3 hours of being assigned. Could you please assign this to me?

[Sendi0011]

Hello team,
I’m a smart frontend/smartcontract developer interested in contributing to this issue. I’m an experienced contributor on OnlyDust and current contributor on drips, also a contributor of boundless on onlydust, with hands-on experience in Rust, Soroban, Cairo, Solidity, and TypeScript.
I’m passionate about building secure and scalable blockchain solutions, with a strong focus on writing clean, maintainable code. Based on the scope of this issue, I’m confident I can deliver a complete solution within 7 hours of assignment.
I would appreciate the opportunity to contribute and help move this forward.

ETA: 7 hours

[Faith-okereke]

Hi. Let me work on this. I am a frontend developer with expereince. This is a greta fit for my skillset

[Benjtalkshow]

Hi @Faith-okereke , This issue is yours!!

Here are a few things you should note:

• Fork and clone the repository.

• Everything you need to set up the project is already in the .env.example file, so you don’t need to search for any environment variables.

• Google sign-up does not work on localhost, so please use email and password to sign up.

• Read the task description carefully and thoroughly

• Our Discord channel is where we handle all GrantforX-related communication:
  https://discord.gg/H7JyUkC6

You can also message me there if you need help.

[lustsazeus-lab]

Great spec detail. One thing that usually prevents regressions here is a single “winner-link builder” utility used by both name and thumbnail links.

That keeps ?type=submission consistent everywhere and avoids subtle drift between desktop/mobile render branches.