Redesign Project Detail Page (`/projects/[slug]`) — Simpler, clearer UI/UX

[0xdevcollins]

Redesign the project detail page (the page people see when they open a single crowdfunding or hackathon project). The goal is a simpler, clearer, more professional layout and experience. Focus on layout, hierarchy, and visuals.

What the page is

• Purpose: Show one project: description, team, milestones, voting/backing, and comments.
• Who uses it: Visitors and backers/voters.
• Context: Same layout is used for both “crowdfunding projects” and “hackathon submissions” (some elements like progress may be hidden for submissions).

Page structure (for design)

• Desktop:
  • Left: A sticky sidebar with project logo, title, short info, progress (votes/funding), main actions (e.g. Vote, Back, Share), creator, and links.
  • Right: Tab bar (Details, Team, Milestones, Voters, Backers, Comments) and a main content area that changes by tab.
• Mobile:
  • Top: Same info as the sidebar (condensed).
  • Below: Same tab bar (can scroll horizontally).
  • Below: Tab content (Details, Team, etc.).

Sections / components to redesign

1. Loading state
   Skeleton that shows while the project is loading. Should suggest: sidebar block + tab row + content blocks. Keep it simple and aligned with the new layout.

2. Sidebar (desktop) / header block (mobile)

   • Project logo and title.
   • Status and short description.
   • Progress (e.g. votes or funding) — can be hidden for submissions.
   • Primary actions: Vote (up/down), Back/Support, Share.
   • Creator avatar and name.
   • Links (e.g. GitHub, website).
     Design for clarity and a clear primary action.

3. Tab bar
   Horizontal tabs: Details, Team, Milestones, (optional) Voters, (optional) Backers, Comments. On mobile, tabs may scroll. Design selected vs unselected state and spacing.

4. Details tab

   • Main project description (rich text / markdown: headings, paragraphs, links).
   • Optional media block (e.g. demo video).
     Consider reading width, heading hierarchy, and where the video sits.

5. About tab (mobile only)
   Dedicated area for creator info and project links. Can be merged with the header/sidebar or kept as a separate tab; ensure it’s consistent with the rest.

6. Team tab
   List/grid of team members (avatar, name, role). Include an empty state (“No team members yet” or similar).

7. Milestones tab
   Timeline or list of milestones (e.g. Registration, Submission, Judging, Winners) with status. There may be filters. Design timeline/list and empty state.

8. Voters tab
   List of voters and vote counts (up/down/total). Design list or cards and empty state.

9. Backers tab
   List of backers (avatar, name, amount/role). Design list/cards and empty state that can encourage backing.

10. Comments tab
    Threaded comments with sort (e.g. by date) and a comment box. Design thread layout, reply depth, and empty state.

Design goals

• Simpler: Less visual noise; obvious what to do (e.g. vote, back, read).
• Clear UI: Strong hierarchy, consistent spacing and typography; use the existing green accent thoughtfully.
• Better UX: Obvious flows for voting, backing, and moving between tabs; consider loading and empty states.
• Professional: Trustworthy, product-quality look.

Deliverables

• Desktop and mobile wireframes or mockups for the full page (all tabs).
• Component-level notes or sketches for: loading, sidebar/header, tab bar, each tab content, and key empty/error states.
• Optional: Short UX recommendations (e.g. “single primary CTA above the fold”) and suggested copy for empty states.

Out of scope

• How the page is built (code, components, APIs).
• Other pages (e.g. milestone detail, contributions list) unless you explicitly add them.

[linear]

BOU-118

[coderabbitai]

⚠️ Possible Duplicate Issue(s)

• Scaffold Project Details Page & Add About Section #269

🔗 Related PRs

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

[Awointa]

Hi maintainer 👋 I’d love to work on this issue.

I’ll redesign the project detail page with a clear visual hierarchy, simplified layout, and professional UI for both desktop and mobile. I’ll improve the sidebar/header structure, tab navigation, loading skeleton, and primary action flow (Vote/Back/Share) to ensure clarity, consistency, and a smooth user experience across crowdfunding and hackathon contexts.

Happy to share design updates as I progress — please assign it to me if available.

[Davidemulo]

Hello Maintainer,

I’d love to redesign the Project Detail page with a simpler, clearer, and more professional layout. I’ll deliver full desktop and mobile mockups covering the sticky sidebar/header, tab system, all tab states, plus loading and empty states.

The focus will be strong hierarchy, a clear primary CTA (Vote/Back), improved readability, and a clean, product-quality experience.

Portfolio: https://www.behance.net/nnaomaemulo