BitVote UI

React frontend for the BitVote pairwise comparison ranking system. Provides a tab-based interface for poll owners and voters, built on top of the bitvote-react component library.

Tech Stack

• Framework: React 18
• Language: TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS

Setup

Prerequisites

• Node.js 18+
• The bitVoteReactComponent library (linked as a local dependency)

Install

# Build the component library first
cd ../bitVoteReactComponent
npm install && npm run build

# Then install the UI
cd ../bitVoteUI
npm install

Run

npm run dev       # Dev server (http://localhost:5173)
npm run build     # Production build
npm run preview   # Preview production build

Features

The app has three tabs:

Owner

Create and manage bitvotes. Add items to compare, define ranking dimensions, and open voting sessions. Uses the BitVoteOwner composed component from bitvote-react.

Voter

Enter a bitvote ID to join and participate in pairwise comparisons. Uses the BitVoteVoter composed component from bitvote-react.

Settings

Configure the backend API URL. Defaults to http://localhost:3000.

Project Structure

src/
├── App.tsx        # Main app with tab navigation and BitVoteProvider
├── main.tsx       # Entry point
├── index.css      # Tailwind directives
└── vite-env.d.ts  # Vite type declarations

The UI is intentionally thin — all voting logic, auth flows, and data management live in the bitvote-react component library.