GitHub - aligundogdu/RetroRTC: Backend-free WebRTC-based retrospective tool

6 min read Original article โ†—

๐ŸŽฏ RetroRTC

Serverless, Privacy-First Retrospective Tool
Sunucusuz, Gizlilik Odaklฤฑ Retrospektif Aracฤฑ

Nuxt 3 Vue 3 WebRTC Supabase No Backend

RetroRTC Screenshot


๐Ÿ‡บ๐Ÿ‡ธ English | ๐Ÿ‡น๐Ÿ‡ท Tรผrkรงe


๐Ÿ‡บ๐Ÿ‡ธ English

๐Ÿ“œ Manifesto

"Your ideas are yours. Your data should be too."

RetroRTC is designed to let teams run their retrospective meetings freely. A tool that prioritizes privacy, supports multiple synchronization methods, and doesn't require central servers, third-party services, or registration forms.

Why RetroRTC?

  • ๐Ÿ”’ Privacy First: No data is sent to our servers by default. P2P modes allow data to live only in participants' browsers.
  • ๐ŸŽญ Anonymous Participation: Share your ideas freely with fun nicknames like "Cosmic Panda 42" or "Ninja Unicorn 7".
  • โšก Zero Setup: No registration, no downloads, no configuration. Just share a link and start.
  • ๐ŸŒ Flexible Sync: Choose between WebRTC (P2P), Trystero (BitTorrent), or Supabase (Realtime) based on your network needs.
  • ๐Ÿ’พ Full Control: Retrospective data stays in your browser. Delete or export anytime you want.

โœจ Features

Feature Description
๐Ÿ”„ Multi-Provider Sync Support for PeerJS, Trystero (BitTorrent), and Supabase Realtime
๐ŸŒ Multi-Language Native support for English and Turkish
๐ŸŽญ Anonymous/Named Mode Choose participation mode based on team preference
๐Ÿ“ Customizable Columns Default or custom column names
๐ŸŽจ Colorful Post-it Notes 8 different pastel color options
โค๏ธ Like System Vote on notes to highlight important ideas
๐ŸŽฌ Presentation Mode Special view for presenting retro results
๐Ÿ“ฅ Markdown Export Export results in .md format
๐Ÿ‘ฅ Participant Tracking View connected participants and their roles

๐ŸŽฎ How It Works?

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                      RETROSPECTIVE FLOW                         โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

  1๏ธโƒฃ CREATE                2๏ธโƒฃ SHARE                3๏ธโƒฃ JOIN
  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”             โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
  โ”‚  Host   โ”‚    Link      โ”‚  Team   โ”‚   Click    โ”‚  Join   โ”‚
  โ”‚ Creates โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ  โ”‚ Members โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ โ”‚   As    โ”‚
  โ”‚  Retro  โ”‚              โ”‚         โ”‚            โ”‚  Guest  โ”‚
  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜              โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜             โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚                                                โ”‚
       โ”‚                                                โ”‚
       โ–ผ                                                โ–ผ
  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
  โ”‚                  4๏ธโƒฃ START THE RETRO!                     โ”‚
  โ”‚                                                         โ”‚
  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚
  โ”‚  โ”‚ What     โ”‚  โ”‚ What Could   โ”‚  โ”‚ Action           โ”‚  โ”‚
  โ”‚  โ”‚ Went     โ”‚  โ”‚ Be           โ”‚  โ”‚ Items            โ”‚  โ”‚
  โ”‚  โ”‚ Well     โ”‚  โ”‚ Improved     โ”‚  โ”‚                  โ”‚  โ”‚
  โ”‚  โ”‚ ๐Ÿ“ Note 1โ”‚  โ”‚ ๐Ÿ“ Note 3    โ”‚  โ”‚ ๐Ÿ“ Note 5        โ”‚  โ”‚
  โ”‚  โ”‚ ๐Ÿ“ Note 2โ”‚  โ”‚ ๐Ÿ“ Note 4    โ”‚  โ”‚ ๐Ÿ“ Note 6        โ”‚  โ”‚
  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚
  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                              โ”‚
                              โ–ผ
                    5๏ธโƒฃ EXPORT (Markdown)

Step by Step Usage

  1. Create a Retrospective

    • Fill out the "Create New Retrospective" form on the home page.
    • Enter a retrospective name.
    • Choose default language (TR/EN).
    • Select Sync Provider:
      • PeerJS / Trystero: Best for open networks (P2P).
      • Supabase: Best for restrictive networks (VPNs/Firewalls). You can provide your own Supabase credentials!
    • Customize columns.
  2. Share the Link

    • Share the unique generated link with team members.
  3. Add Notes & Discuss

    • Add notes, edit them, and vote on others' ideas.
    • Everything syncs in real-time.
  4. Export Results

    • Download the board as a Markdown file.

๐Ÿ›  Tech Stack

Technology Version Description
Nuxt 3.x Vue meta-framework
Vue 3.x Reactive UI framework
PeerJS 1.5.x WebRTC abstraction layer
Trystero 0.x WebRTC over BitTorrent/IPFS
Supabase 2.x Realtime Sync Provider (Optional)
TailwindCSS 3.x Utility-first CSS

๐Ÿš€ Installation & Running

Requirements

  • Node.js 18+
  • npm, pnpm, yarn, or bun

Development

# Install dependencies
npm install

# Start development server (http://localhost:3000)
npm run dev

Production Build

# Create production build
npm run build

# Preview build
npm run preview

๐Ÿ‡น๐Ÿ‡ท Tรผrkรงe

๐Ÿ“œ Manifesto

"Fikirleriniz sizin. Verileriniz de sizin olmalฤฑ."

RetroRTC, takฤฑmlarฤฑn retrospektif toplantฤฑlarฤฑnฤฑ รถzgรผrce yapabilmesi iรงin tasarlandฤฑ. GizliliฤŸi รถn planda tutan, farklฤฑ senkronizasyon yรถntemlerini destekleyen, merkezi sunuculara veya kayฤฑtlara ihtiyaรง duymayan bir araรง.

Neden RetroRTC?

  • ๐Ÿ”’ Gizlilik ร–ncelikli: Varsayฤฑlan olarak sunucularฤฑmฤฑza veri gรถnderilmez. P2P modlarฤฑ verilerin sadece tarayฤฑcฤฑda kalmasฤฑnฤฑ saฤŸlar.
  • ๐ŸŽญ Anonim Katฤฑlฤฑm: "Kozmik Panda 42" gibi eฤŸlenceli takma isimlerle fikirlerinizi รถzgรผrce paylaลŸฤฑn.
  • โšก Sฤฑfฤฑr Kurulum: Kayฤฑt yok, indirme yok. Sadece link paylaลŸฤฑn ve baลŸlayฤฑn.
  • ๐ŸŒ Esnek Senkronizasyon: AฤŸ durumunuza gรถre WebRTC (P2P), Trystero (BitTorrent) veya Supabase (Realtime) seรงebilirsiniz.
  • ๐Ÿ’พ Tam Kontrol: Veriler tarayฤฑcฤฑnฤฑzda kalฤฑr. ฤฐstediฤŸiniz zaman silin, dฤฑลŸa aktarฤฑn.

โœจ ร–zellikler

ร–zellik Aรงฤฑklama
๐Ÿ”„ ร‡oklu Senkronizasyon PeerJS, Trystero (BitTorrent) ve Supabase Realtime desteฤŸi
๐ŸŒ ร‡oklu Dil Tรผrkรงe ve ฤฐngilizce yerel dil desteฤŸi
๐ŸŽญ Anonim/ฤฐsimli Mod Takฤฑm tercihine gรถre katฤฑlฤฑm modu seรงimi
๐Ÿ“ ร–zelleลŸtirilebilir Kolonlar Varsayฤฑlan veya รถzel kolon isimleri
๐ŸŽจ Renkli Post-it Notlarฤฑ 8 farklฤฑ pastel renk seรงeneฤŸi
โค๏ธ BeฤŸeni Sistemi Notlara oy vererek รถnemli fikirleri รถne รงฤฑkarฤฑn
๐ŸŽฌ Sunum Modu Retrospektif sonuรงlarฤฑnฤฑ sunmak iรงin รถzel gรถrรผnรผm
๐Ÿ“ฅ Markdown Export Sonuรงlarฤฑ .md formatฤฑnda dฤฑลŸa aktarฤฑn
๐Ÿ‘ฅ Katฤฑlฤฑmcฤฑ Takibi BaฤŸlฤฑ katฤฑlฤฑmcฤฑlarฤฑ ve rolleri gรถrรผntรผleyin

๐ŸŽฎ Nasฤฑl ร‡alฤฑลŸฤฑr?

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚                        RETROSPEKTฤฐF AKIลžI                       โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

  1๏ธโƒฃ OLUลžTUR                2๏ธโƒฃ PAYLAลž               3๏ธโƒฃ KATIL
  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”              โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”             โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
  โ”‚  Host   โ”‚    Link      โ”‚ Takฤฑm   โ”‚   Tฤฑkla    โ”‚  Guest  โ”‚
  โ”‚ Retro   โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ  โ”‚ รœyeleri โ”‚ โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ โ”‚  Olarak โ”‚
  โ”‚ OluลŸtur โ”‚              โ”‚   ฤฐle   โ”‚            โ”‚  Katฤฑl  โ”‚
  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜              โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜             โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚                                                โ”‚
       โ”‚                                                โ”‚
       โ–ผ                                                โ–ผ
  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
  โ”‚                   4๏ธโƒฃ RETRO BAลžLASIN!                     โ”‚
  โ”‚                                                         โ”‚
  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚
  โ”‚  โ”‚ ฤฐyi      โ”‚  โ”‚ GeliลŸtirilmesiโ”‚  โ”‚ Aksiyon         โ”‚  โ”‚
  โ”‚  โ”‚ Gidenler โ”‚  โ”‚ Gerekenler    โ”‚  โ”‚ Maddeleri       โ”‚  โ”‚
  โ”‚  โ”‚          โ”‚  โ”‚               โ”‚  โ”‚                 โ”‚  โ”‚
  โ”‚  โ”‚ ๐Ÿ“ Not 1 โ”‚  โ”‚ ๐Ÿ“ Not 3      โ”‚  โ”‚ ๐Ÿ“ Not 5        โ”‚  โ”‚
  โ”‚  โ”‚ ๐Ÿ“ Not 2 โ”‚  โ”‚ ๐Ÿ“ Not 4      โ”‚  โ”‚ ๐Ÿ“ Not 6        โ”‚  โ”‚
  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚
  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
                              โ”‚
                              โ–ผ
                    5๏ธโƒฃ EXPORT AL (Markdown)

Adฤฑm Adฤฑm Kullanฤฑm

  1. Retrospektif OluลŸtur

    • Ana sayfadaki formu doldurun.
    • Dil seรงiminizi yapฤฑn (TR/EN).
    • BaฤŸlantฤฑ Yรถntemi seรงin:
      • PeerJS / Trystero: Aรงฤฑk aฤŸlar iรงin ideal (P2P).
      • Supabase: Kฤฑsฤฑtlฤฑ aฤŸlar (VPN/Gรผvenlik Duvarฤฑ) iรงin ideal. Kendi Supabase bilgilerinizi girebilirsiniz!
    • Kolonlarฤฑ รถzelleลŸtirin.
  2. Linki PaylaลŸ

    • OluลŸturulan linki takฤฑmla paylaลŸฤฑn.
  3. Notlar Ekle & TartฤฑลŸ

    • Not ekleyin, dรผzenleyin, oylayฤฑn.
    • Her ลŸey anlฤฑk senkronize olur.
  4. Sonuรงlarฤฑ DฤฑลŸa Aktar

    • Markdown formatฤฑnda indirin.

๐Ÿ›  Teknoloji Stack

Teknoloji Versiyon Aรงฤฑklama
Nuxt 3.x Vue meta-framework
Vue 3.x Reaktif UI framework
PeerJS 1.5.x WebRTC soyutlama katmanฤฑ
Trystero 0.x BitTorrent/IPFS รผzerinden WebRTC
Supabase 2.x Realtime Senkronizasyon (Opsiyonel)
TailwindCSS 3.x Utility-first CSS

๐Ÿš€ Kurulum ve ร‡alฤฑลŸtฤฑrma

Gereksinimler

  • Node.js 18+
  • npm, pnpm, yarn veya bun

GeliลŸtirme Ortamฤฑ

# BaฤŸฤฑmlฤฑlฤฑklarฤฑ yรผkle
npm install

# GeliลŸtirme sunucusunu baลŸlat (http://localhost:3000)
npm run dev

Production Build

# Production build oluลŸtur
npm run build

# Build'i รถnizle
npm run preview

๐Ÿค Contributing / Katkฤฑda Bulunma

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'feat: add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

๐Ÿ“„ License / Lisans

This project is licensed under the MIT License. Bu proje MIT lisansฤฑ altฤฑnda lisanslanmฤฑลŸtฤฑr.


๐ŸŽฏ RetroRTC
Your data is yours, your ideas are free.
Verileriniz sizin, fikirleriniz รถzgรผr.