Break free from echo chambers and understand the full picture.

Balanced Debate

Explore every side of every story through AI-powered structured debates. Break free from echo chambers and understand the full picture.

---

Live Demo

• Production: https://balanceddebate.com

---

What Is This Website?

Balanced Debate is a web platform for exploring complex issues through structured, two-sided AI debates and topic deep-dives.

• Who it's for: Students, researchers, educators, policy thinkers, and curious readers who want balanced viewpoints
• Problem it solves: Most online discussions are fragmented or one-sided; this platform organizes both arguments in one place
• Why it's unique: It combines guided multi-round debate flows, topic analysis pages, and SEO-friendly pre-rendered routes for discoverable public content

---

Key Features

For Users

• Browse debate topics by popularity and category
• View structured multi-round debates with moderator framing and analysis
• Explore detailed topic analysis content rendered from Markdown

For Developers

• Typed React + TypeScript frontend with reusable API service layer
• Build-time SEO pre-rendering pipeline for static route generation and sitemap output

---

How It Works

For Users

1. Open the Topics page and select a debate topic.
2. Start a debate session or view an existing debate viewer route.
3. Read both sides, review the moderator analysis, and explore deeper topic context.

For Developers

• Frontend: React 18 SPA with React Router, Tailwind CSS, and react-markdown rendering.
• Backend: External REST API (ASP.NET Core style conventions inferred from request/response shape).
• Data Flow: UI triggers typed Axios service calls -> backend returns debate/topic payloads -> app renders content and uses prebuild data for SEO snapshots.

---

Tech Stack

• Frontend: React 18, TypeScript, React Router DOM, Tailwind CSS, React Helmet Async, React Markdown
• Backend: External REST API service for debate generation and topic maintenance
• Database: SQL-backed persistence managed by the backend service
• Infrastructure: Vite build pipeline, Vercel hosting, static asset delivery via public directory
• APIs / AI: Debate API endpoints, Auth0 authentication, AI-generated debate/session content

---

Architecture Overview

Balanced Debate uses a SPA frontend that consumes an external debate API. During build, the project fetches topic data and generates static SEO-ready pages and route artifacts. At runtime, users navigate client-side routes, while API calls retrieve live topic/debate content and admin maintenance data.

Browser (React SPA)
  |
  |-- React Router pages (/topics, /debate-viewer/:id, /topics/:id/explore, etc.)
  |-- Axios service layer (src/services/api.ts)
  v
External Debate API
  |
  |-- Topic list and details
  |-- Debate session/start/round endpoints
  |-- Admin maintenance endpoints (topics/tags/is-admin)
  v
Backend Data Store (SQL)

Build-time SEO pipeline:
prebuildFetchData.js -> public/prebuild-data.json -> Vite build -> generateStaticPages.js + generateSitemap.js -> dist/

Environment Variables

Create a .env file:

VITE_API_BASE_URL=https://your-backend-api.com
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-production-client-id
VITE_AUTH0_CALLBACK_URL=https://balanceddebate.com

Prerequisites

• Node.js 18+ and npm
• Access to a running backend API and Auth0 application config

---

API / Backend Details (if applicable)

Example Endpoint

GET /api/debate/topics

Example Response

{
  "success": true,
  "data": [
    {
      "topicId": 12,
      "title": "Should governments regulate social media?",
      "description": "A short description of the topic",
      "category": "Policy"
    }
  ]
}

Authentication

Public topic/debate browsing can be consumed by the frontend API client, while user profile/admin capabilities are integrated with Auth0 and backend authorization checks (for example, admin status endpoints and maintenance actions).

---

Screenshots / UI Preview

Feature	Preview
Homepage Hero
About Page Visual

---

Use Cases

• Compare both sides of controversial topics before forming an opinion
• Support classroom debate prep and critical-thinking exercises
• Rapidly understand policy, ethics, and technology arguments in a structured format

---

Roadmap

• Add richer user history and saved debates
• Expand search/filtering and topic discovery features
• Introduce analytics dashboards for debate trends and engagement

---

Contributing

Contributions are welcome!

1. Fork the repo
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes
4. Push to your branch
5. Open a Pull Request

---

License

MIT

---

Links

• GitHub Organization: https://github.com/aisuretech/
• Website: https://balanceddebate.com
• Contact: info@AISureTech.com

---

Final Note

If this project interests you, check out the live site and explore what it can do.

Visit Balanced Debate and test how perspective changes when both sides are presented clearly.