A modern web application that transforms group decision-making through a contest of suggestions mechanism, where the best ideas rise through democratic evaluation and AI-assisted analysis. The platform enables structured deliberation where every voice matters and ideas compete on their merits.

1. Progressive Disclosure: Complexity is revealed gradually as users engage deeper
2. Non-Adversarial Competition: The contest nature is evident but feels collaborative
3. Real-time Feedback: Live updates without being distracting
4. Semantic Color System:
   • Support = Green tones (positive, growth)
   • Oppose = Amber tones (caution, not aggression)
   • Primary = Blue tones (trust, clarity)
5. Mobile-First Responsive: Works seamlessly across all devices

• Typography: Clean, readable Inter font family with clear hierarchy
• Spacing: 8px grid system for consistent rhythm
• Cards: Subtle shadows and borders create depth without clutter
• Animations: Smooth, purposeful transitions that provide feedback
• Glass Morphism: Modern translucent effects for depth and elegance

• Framework: React 18 with TypeScript
• Build Tool: Vite (for optimal performance)
• Styling: SCSS modules with global design system
• Icons: Lucide React (clean, consistent iconography)
• Animations: Framer Motion (smooth, performant animations)
• Date Handling: date-fns (lightweight date utilities)
• State Management: React hooks (useState, useEffect)

src/
├── view/
│   ├── styles/           # Global design system
│   │   ├── _variables.scss    # Design tokens
│   │   ├── _mixins.scss       # Reusable mixins
│   │   ├── _buttons.scss      # Button components
│   │   ├── _forms.scss        # Form elements
│   │   ├── _utilities.scss    # Utility classes
│   │   └── style.scss         # Main stylesheet
│   │
│   └── components/       # UI components
│       ├── Layout/       # App layout components
│       │   └── Header.tsx
│       ├── Question/     # Question-related components
│       │   └── QuestionCard.tsx
│       ├── Suggestion/   # Suggestion components
│       │   └── SuggestionCard.tsx
│       └── Comment/      # Comment components
│           ├── CommentThread.tsx
│           └── CommentItem.tsx
│
├── types/               # TypeScript type definitions
│   └── index.ts
│
├── App.tsx             # Main application component
└── main.tsx            # Application entry point

• Clean card-based layout showing question title, description, and metadata
• Live indicator for active deliberations
• Expandable preview of top suggestions
• Tag system for categorization
• Participant count and deadline display

• Real-time ranking with visual position indicators
• Support percentage bar with animated fills
• Momentum indicators for trending suggestions
• Vote buttons with immediate visual feedback
• Collapsible comment threads

• Automatic classification into support/oppose categories
• Confidence score display for transparency
• Ability to dispute classifications
• Visual grouping by classification type
• Nested reply support

• Live ranking changes with smooth animations
• Position change indicators (up/down arrows)
• Pulsing live indicator
• Shimmer effects on updating data
• WebSocket-ready architecture

1. Global Styles: Located in src/view/styles/, globally imported via main.tsx
2. Component Styles: SCSS modules in the same folder as components
3. No Inline Styles: All styles through classes for maintainability
4. Consistent Spacing: Use spacing variables ($space-*) for all margins/padding
5. Responsive Design: Mobile-first with breakpoint mixins

1. Intuitive Interactions:

   • Hover states provide clear affordances
   • Focus states for accessibility
   • Loading states for all async operations

2. Visual Hierarchy:

   • Clear primary, secondary, and tertiary actions
   • Consistent use of size and weight for importance
   • Strategic use of color for emphasis

3. Feedback Mechanisms:

   • Immediate visual response to user actions
   • Success/error states clearly communicated
   • Progress indicators for long operations

npm install

npm run dev

The application will be available at http://localhost:5173/

npm run build

npm run preview

• Primary: Blue (#3b82f6) - Main actions and links
• Support: Green (#22c55e) - Positive feedback
• Oppose: Amber (#f59e0b) - Negative feedback (non-aggressive)
• Neutral: Gray scale - UI elements and text

• xs: 0.75rem (12px)
• sm: 0.875rem (14px)
• base: 1rem (16px)
• lg: 1.125rem (18px)
• xl: 1.25rem (20px)
• 2xl: 1.5rem (24px)
• 3xl: 1.875rem (30px)

Based on 8px grid:

• space-1: 4px
• space-2: 8px
• space-3: 12px
• space-4: 16px
• space-6: 24px
• space-8: 32px

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

1. WebSocket Integration: Real-time updates without polling
2. AI Classification Service: Integrate actual NLP service
3. User Authentication: Add login/signup flows
4. Notification System: Push notifications for updates
5. Dark Mode: Theme switching capability
6. Accessibility: Enhanced ARIA labels and keyboard navigation
7. Analytics Dashboard: Visualize deliberation patterns
8. Export Functionality: Generate reports from deliberations

MIT

Contributions are welcome! Please follow the established design patterns and coding standards.