Build DAO Governance Frontend — Proposal List, Detail Page, Voting UI, and Create Proposal Form

[portableDD]

Labels

Frontend

Description

ByteChain Academy's DAO governance page is one of its core Web3 differentiators — the community should be able to propose and vote on course content and platform decisions. The /app/dao route currently does not have a page.tsx file and returns a 404. This issue builds the complete DAO governance frontend — a proposal list page, a proposal detail view with voting UI, and a create proposal form — all wired to the backend DAO API built in Issue 12.

Background & Context

• frontend/app/dao/ directory has no page.tsx — the route returns 404
• The backend DAO API (Issue 12) exposes: GET /api/v1/dao/proposals, GET /api/v1/dao/proposals/:id, POST /api/v1/dao/proposals, POST /api/v1/dao/proposals/:id/vote
• The account dropdown in the header already links to /dao — it just 404s currently
• Design should match the existing dark theme (#0a0a0a background, #00ff88 accent green) consistent with the rest of the app

Requirements

• Create frontend/app/dao/page.tsx — a proposals list page showing:
  • Active proposals with vote counts, deadline countdown, and status badge
  • Passed and rejected proposals in a separate tab or section
  • A "Create Proposal" button (visible only to authenticated users)
  • Each proposal card links to the detail page
• Create frontend/app/dao/[proposalId]/page.tsx — proposal detail page showing:
  • Full title and description
  • Current vote counts (yes/no/abstain) with a visual progress bar
  • Voting buttons (Yes, No, Abstain) — disabled if user has already voted or proposal is closed
  • Time remaining until voting deadline
  • The authenticated user's vote if they have already voted
• Create frontend/app/dao/new/page.tsx — create proposal form with title and description fields, client-side validation, and submission wired to POST /api/v1/dao/proposals
• Use TanStack Query for all data fetching and mutations
• Show loading skeletons while data is fetching, error states when requests fail

Suggested Execution

Branch: git checkout -b feat/dao-governance-frontend

Files to create:

• frontend/app/dao/page.tsx
• frontend/app/dao/[proposalId]/page.tsx
• frontend/app/dao/new/page.tsx
• frontend/components/dao/proposal-card.tsx
• frontend/components/dao/vote-bar.tsx
• frontend/components/dao/vote-buttons.tsx
• frontend/hooks/use-dao.ts

Implement:

• useDAO hook with useQuery for proposals list and individual proposal, useMutation for create and vote
• ProposalCard component — title, description excerpt, vote summary, status badge, deadline countdown
• VoteBar — horizontal bar showing yes/no/abstain percentages with colour coding (green/red/gray)
• VoteButtons — three buttons with loading state, disabled state after voting, success feedback via toast
• Redirect unauthenticated users away from /dao/new

Test & Validate:

• /dao loads and shows proposal list fetched from the backend
• Clicking a proposal navigates to the detail page with full vote data
• Voting on a proposal updates the vote bar immediately (optimistic update or refetch)
• Voting twice shows an error toast
• Submitting a new proposal redirects to the proposals list and shows the new entry

Acceptance Criteria

• /dao page renders proposal list with status badges and vote summaries
• /dao/[proposalId] shows full proposal with vote counts and voting UI
• Voting calls POST /api/v1/dao/proposals/:id/vote and updates the UI
• Already-voted state is detected and voting buttons are disabled
• /dao/new form validates input and creates a proposal via the API
• Loading skeletons shown while fetching
• Unauthenticated users cannot access /dao/new
• Design matches the existing dark theme

Example Commit Message

feat: build DAO governance page with proposal list, detail, voting UI, and create form

Guidelines

• Assignment required before starting
• PR description must include Closes #[issue_id]
• Join our Telegram: https://t.me/ByteChainAcademy
• Complexity: High (200 pts)