DebateAI is an open-source, AI-enhanced real-time debating platform developed under AOSSIE (Australian Open Source Software Innovation and Education). It enables users to sharpen their rhetorical and analytical reasoning skills by engaging in structured debates against human opponents or LLM-powered AI adversaries, evaluated and judged by AI.
This repository hosts the DebateAI Landing Page, an ultra-responsive, cloudless web client built with Vite 8, React 19, and Tailwind CSS v4. It acts as the gateway to the DebateAI ecosystem, allowing users to:
- Try it out immediately on the official managed AOSSIE server.
- Connect to community servers hosted by schools, universities, or independent groups via custom server URLs.
- Learn how to self-host an independent DebateAI instance using Docker Compose with sovereign credentials and user management.
-
🌐 Server-Agnostic ("Cloudless") Client Architecture
Built as a sovereign static client running entirely inside the browser. Users can connect to any self-hosted or community backend server dynamically by passing a query parameter (e.g.,?server=https://debate.your-school.edu). -
⚡ Instant "Try It Out" Access
Quick single-click redirection to launch directly into the official AOSSIE DebateAI platform. -
🔗 Connect to Any Community Server
An interactive connection modal with URL validation and error handling for joining private, school, or club debate servers. -
🐳 Comprehensive Self-Hosting Guide
Interactive in-app guidance modal detailing Docker Compose deployment, environment variable configuration, and deployment on self-hosting platforms like Coolify and Dokploy. -
🎭 Dynamic Debate Arena Visualization
Engaging vector artwork illustrating real-time debates (proponent vs. opponent with structured arguments). -
🌓 Seamless Dual Theme System
Smooth transitions between Light, Dark, and System-preferred color palettes via semantic CSS variables and Tailwind CSS v4. -
📱 Fully Responsive Design
Flawless mobile, tablet, and desktop viewing experience built to match official AOSSIE design specifications.
| Technology | Role |
|---|---|
| React 19 | Core user interface library |
| Vite 8 | Next-generation frontend tooling and bundler |
| Tailwind CSS v4 | Utility-first modern CSS framework with native CSS variables |
| React Router DOM v7 | Client-side routing and navigation |
| React Icons | Comprehensive vector iconography (FontAwesome 6, Heroicons, Bootstrap) |
| Embla Carousel | Lightweight, high-performance carousel with autoplay capabilities |
| ESLint 10 | Code quality and linting |
DebateAI-LandingPage/
├── .github/
│ └── workflows/ # GitHub Actions (CI & automated GitHub Pages deployment)
├── public/ # Static public assets
│ ├── brand/
│ │ ├── Brand.md # Branding guidelines
│ │ └── icons/ # Organization & project vector assets
│ │ ├── aossie_logo.svg # Official AOSSIE vector logo
│ │ └── debateai_logo.svg # Official DebateAI vector logo
│ ├── favicon.ico # Browser favicon
│ ├── favicon.svg # Browser vector favicon
│ ├── llms.txt # LLM crawler directives
│ └── robots.txt # Search engine crawler policies
├── src/
│ ├── assets/ # Vector graphics & illustration assets (DebateCover4.svg)
│ ├── components/ # Modular UI components
│ │ ├── ConnectServerModal.jsx # Modal for connecting to custom backend URLs
│ │ ├── DebateCarousel.jsx # Interactive debate carousel
│ │ ├── DebateCoverIllustration.jsx # Responsive debate arena illustration
│ │ ├── Footer.jsx # Footer with AOSSIE branding and links
│ │ ├── Header.jsx # Header navigation and theme toggle
│ │ ├── SelfHostGuideModal.jsx # Step-by-step Docker self-hosting instructions
│ │ └── ThemeToggle.jsx # Light/Dark mode switcher
│ ├── context/
│ │ └── ThemeContext.jsx # React context managing theme state
│ ├── lib/
│ │ └── connect.js # URL parsing & server redirection logic
│ ├── pages/
│ │ └── LandingPage.jsx # Main landing page view
│ ├── App.jsx # Root application routing
│ ├── index.css # Global theme variables & Tailwind v4 styling
│ └── main.jsx # Application entry point
├── CONTRIBUTING.md # Contribution workflow and guidelines
├── COPYRIGHT.md # Copyright statement
├── DCO.md # Developer Certificate of Origin
├── MAINTAINERS.md # Project maintainers and roles
├── index.html # Root HTML document
├── package.json # Scripts and dependencies
└── vite.config.js # Vite build configuration
Ensure you have the following installed on your machine:
- Node.js:
v20.9.0or higher - npm:
v9.0.0or higher - Git
-
Clone the repository:
git clone https://github.com/AOSSIE-Org/DebateAI-LandingPage.git cd DebateAI-LandingPage -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173(or the port indicated in your terminal).
npm run dev: Starts the Vite development server with Hot Module Replacement (HMR).npm run build: Compiles and bundles production-ready assets into thedist/directory.npm run preview: Locally previews the production build.npm run lint: Runs ESLint to check for code style issues and bugs.npm test: Runs automated unit tests with Vitest.
The landing page connects to DebateAI backend instances using query parameters:
| Mode | URL Example | Description |
|---|---|---|
| Official Server | https://debateai.aossie.org/?server=official |
Connects directly to AOSSIE's publicly hosted server. |
| Community Server | https://debateai.aossie.org/?server=https://debate.your-school.edu |
Routes to an institution or club server. |
| Local / Dev Server | http://localhost:5173/?server=http://localhost:1313 |
Useful for local development and testing with a local Go backend. |
- Organization logo (
public/brand/icons/aossie_logo.svg) & Project logo (public/brand/icons/debateai_logo.svg). - Browser favicon and web metadata (
index.html,public/favicon.svg). - Responsive debate cover illustration.
- "Try it out" instant play integration.
- Custom server connection modal with input validation.
- Self-hosting Docker Compose guide modal.
- Dual theme support (Light / Dark mode).
- AOSSIE organization footer with social and community channels.
- Automated CI / CD workflows (
.github/workflows/). - CodeRabbit automated AI code review integration (
.coderabbit.yml). - Open-source compliance documentation (
DCO.md,COPYRIGHT.md,CONTRIBUTING.md,MAINTAINERS.md). - OpenSSF Scorecard & Best Practices compliance (
BestPracticesChecklist.md,SECURITY.md,CHANGELOG.md).
Contributions are always welcome! Whether you are fixing bugs, improving the user experience, enhancing documentation, or adding new features:
- Read our
CONTRIBUTING.mdandDCO.md. - Fork the repository and create your feature branch:
git checkout -b feat/your-feature-name
- Commit your changes following conventional commit syntax:
git commit -m "feat: description of changes" - Push to your branch and open a Pull Request.
Join the conversation with mentors and contributors:
- Discord: Join the AOSSIE Discord and head over to the
#AI for Debatechannel in the AOSSIE Server. - Telegram: AOSSIE Telegram Group
- Main DebateAI Repository: AOSSIE-Org/DebateAI
This project is licensed under the Apache 2.0 / Open Source License. See repository headers and COPYRIGHT.md for details.
© 2026 AOSSIE (Australian Open Source Software Innovation and Education).