Implementation of "Participating" Page

[Benjtalkshow]

Implementation of "Participating" Page (app/me/hackathons)

Objective

Provide users with a centralized, visually rich view of all their active engagements across hackathons and projects. This page draws exclusively from the GetMeResponse dataset already available in the session — no additional API calls should be made. The goal is a fast, seamless experience that feels instant because it operates entirely on cached session data. There is an existing UI on the page. Kindly reuse them.

---

UI Description

Aesthetics

This page should feel like a personal mission control — at a glance, users should be able to see exactly where they stand across every active commitment. The design should be bold, structured, and immediately informative without feeling cluttered.

Dashboard Layout

• Implement a tabbed interface with the following tabs: All | Hackathons | Projects
• Tabs must use vibrant active-state indicators — clearly distinguishing the selected tab from inactive ones (e.g., animated underline, accent color fill, or glow effect consistent with the Boundless design language)
• The All tab should serve as the default view, aggregating content from both sub-categories into a unified, chronologically or relevance-sorted feed

Cards

• Reuse the existing HackathonCard component as the base
• Extend each card with a Progress Indicator overlay that reflects the user's current submission stage status (e.g., Not Started, In Progress, Submitted, Under Review, Results Pending)
• The overlay should be visually distinct but non-intrusive — a badge, status bar, or subtle tag that enhances the card without obscuring its core content
• Cards should be responsive and maintain visual consistency across breakpoints

Spacing & Polish

• Apply generous whitespace between cards and sections to avoid a cramped or overwhelming layout
• Use consistent rounded-4xl corner radius on all cards to maintain a modern, premium feel
• Ensure the page feels cohesive with the rest of the app/me/* dashboard family

---

Technical Details

Hooks & Data Path

Hook

• Use useAuthStatus() to access the current session and authenticated user data

Session Mapping

• Pull engagement data from two fields on the session user object:
  • user.profile.hackathonsAsParticipant — hackathons the user has explicitly joined as a participant
  • user.profile.userHackathons — hackathons associated with the user's submitted projects

Merging Logic

• Use useMemo to combine both data sources into a single, deduplicated "Active Engagements" list
• The merge should handle overlapping entries gracefully (e.g., a hackathon appearing in both fields should only render once)
• Sorting should prioritize active or in-progress engagements above completed or upcoming ones
• The unified list should be the single source of truth driving all three tab views, with each tab simply filtering from it

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• No dummy data — all data must be sourced strictly from the GetMeResponse session dataset; no additional API calls should be introduced
• 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 that no additional API calls are made on page load — all data must come from the existing session via useAuthStatus()
• Verify that hackathonsAsParticipant and userHackathons are correctly merged and deduplicated via useMemo
• Test all three tabs (All, Hackathons, Projects) — confirm each filters the unified list correctly
• Verify the Progress Indicator overlay on each card accurately reflects the user's current submission stage
• Check active tab indicators are visually distinct and animate correctly on tab switch
• Confirm rounded-4xl corner radius and generous spacing are consistently applied across all cards
• Test the page at multiple breakpoints to confirm responsive layout integrity
• provide video evidence

[linear]

BOU-105

[coderabbitai]

🔗 Related PRs

#372 - Fix hackathon [merged]
#376 - Fix hackathon [merged]
#380 - Feat/minor ux fixes [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!

[Agbeleshe]

Hello, can I handle this? Yes, I’d like to work on this issue. I am a proficient Next.js/React frontend developer with strong experience building session-driven dashboard pages and tabbed interfaces using Tailwind, shadcn/ui, and Framer Motion within repositories managed on GitHub. I have solid experience working with cached session datasets, memoized data transformations, and component reuse patterns to ensure fast, API-free rendering. I’ve implemented similar engagement dashboards where clean state derivation, deduplication logic, and responsive card-based layouts were critical for performance and UI consistency.

To tackle this, I will reuse the existing UI structure for the app/me/hackathons page and integrate session data via useAuthStatus() as the single data source. I will use useMemo to merge user.profile.hackathonsAsParticipant and user.profile.userHackathons into a deduplicated unified engagement list, then drive the All, Hackathons, and Projects tabs through filtered views of that dataset without introducing any additional API calls. I will extend the existing HackathonCard component by adding a non-intrusive progress indicator overlay reflecting submission stages, implement animated active-tab indicators using Framer Motion, and maintain consistent spacing and rounded-4xl styling across breakpoints. Finally, I will validate performance, accessibility, responsive behavior, and ensure lint/build checks pass while providing video evidence as requested.

[Anuoluwapo25]

Hi maintainer, I'd like to take on this issue as i'll fully implement what is requested as i'm a fullstack developer with experiences.

[Michaelkingsdev]

I am Michael Kings, a seasoned full-stack developer with extensive experience in blockchain technology. I have a passion for building responsive and interactive user interfaces, and my backend logic is top-notch. With 4 years of experience, I am confident that I can tackle this issue.
Please assign it to me.

[Opeyemi0001]

Hi, I’d like to work on this issue.

I plan to implement the Participating page (app/me/hackathons) with the following approach:

Use useAuthStatus() to fetch session data (hackathonsAsParticipant and userHackathons) and merge them via useMemo to create a deduplicated, unified "Active Engagements" list.

Implement a tabbed interface (All | Hackathons | Projects) with vibrant active-state indicators and smooth animations.

Reuse HackathonCard and extend it with a Progress Indicator overlay reflecting the user’s current submission stage.

Ensure responsive design, generous spacing, and consistent rounded-4xl corners.

Strictly no additional API calls; all data comes from the session.

Follow existing shadcn/ui + Tailwind + Framer Motion design system.

Add manual and automated verification including linting, build, tab filtering, and visual checks.

I will document the implementation and provide a screen recording showing the page fully functional.