Bachelorprosjekt 2026

ProSlides

En webbasert WYSIWYG-presentasjonseditor med sanntids publikumsinvolvering – polls, publikumsspørsmål og live-resultater. Bygget som bachelorprosjekt (BOP3000) ved USN Bø, våren 2026.

Se live-appen Se kildekoden

Se appen i aksjon

Dashboard · Editor · Live-presentasjon

Lyst Mørkt
Dashboard – lyst Dashboard – mørkt
Editor – lyst Editor – mørkt
Live-presentasjon – lyst Live-presentasjon – mørkt
Dashboard

Om prosjektet

RubyNor har i dag løsningen spleiselaget.no for interaktive presentasjoner, men den er bygget på rigide, forhåndsdefinerte maler. Oppgaven var å utvikle en mer fleksibel WYSIWYG-editor der brukeren fritt kan utforme slides visuelt, samtidig som publikum involveres i sanntid via nettleser eller mobil – uten behov for apper eller brukerkonto.

Problemstilling

«Hvordan kan vi utvikle et webbasert presentasjonsverktøy som både gir brukeren full frihet til å utforme slides visuelt og samtidig legger til rette for aktiv publikumsinvolvering under presentasjonen?»

Oppdragsgiver

RubyNor – Pål Andrè Sundt, CTO

Veileder

Ingrid Sundbø – USN, campus Bø

Monorepo-struktur

Prosjektet er organisert som en monorepo med to hovedmapper:

Bachelor_Gruppe1/
├── backend/  Rails 8.1 API
├── frontend/ React + Vite SPA
├── scripts/
└── README.md

Krav fra oppdragsgiver

  • Webbasert WYSIWYG-editor for slides
  • Dra-og-slipp for elementer (tekst, bilder, bakgrunn)
  • Interaktive elementer (polls, spørsmål)
  • Sanntidskommunikasjon presentatør ↔ publikum
  • Mobil deltakelse uten app/registrering
  • Responsivt grensesnitt (desktop + mobil)
  • Dynamisk bruk av publikumsdata i slides

Elm ble anbefalt som frontend – vi valgte React/TypeScript for økosystem, erfaring og industrirelevans.

Teknologier

TypeScript-dominert frontend mot et Ruby on Rails API – med PostgreSQL, Redis og container-deploy.

Frontend

SPA, editor og styling

React 18 TypeScript Vite Tailwind Fabric.js

Backend

API, sanntid og auth

Rails 8.1 Ruby 3.4 Action Cable JWT + OAuth2

Data & deploy

Lagring, cache og produksjon

PostgreSQL Redis Playwright Docker + Kamal
Språkfordeling
Arkitekturutforsker

Arkitektur

Tredelt webarkitektur med SPA, REST API og sanntidskanal.

Frontend (SPA)

React + TypeScript med Vite. Komponentbasert arkitektur med shadcn/ui og Fabric.js canvas-editor. Tokenbasert auth og reaktiv state.

Backend (API)

Ruby on Rails 8.1 i API-modus. Versjonert REST-API, JWT-autentisering, OAuth (Google/GitHub), og Action Cable for WebSocket-sanntid.

Database

PostgreSQL via Neon. UUID-primærnøkler, JSONB for fleksible slide-elementer, og relasjonell struktur for brukere, presentasjoner og sessions.

Sanntid & Live Sessions

  • WebSocket via Action Cable for live-oppdateringer
  • Publikum kobler til via QR-kode, kode eller lenke
  • Polls og spørsmål aktiveres i sanntid fra presentatør
  • Resultater visualiseres live (stolpediagram via recharts)

Sikkerhet & Deploy

  • JWT-tokens med 24t utløp, bcrypt-passord
  • OAuth 2.0 via Google og GitHub
  • CORS-kontroll og SSL i produksjon
  • Containerisert med Docker, deployet via Kamal

Arkitekturutforsker

Klikk på elementer for forklaring. Dra med musen for å panorere, scroll eller knappene for å zoome.

Kildekode
100%
Drapanorer·Klypzoom·Scrollzoom
Brukere & innhold Polls (spørsmål · alternativer · stemmer) Live-sesjoner users PK id : uuid email · password_digest name · provider · uid created_at · updated_at IDX unique email · (provider,uid) presentations PK id : uuid FK user_id → users.id title · theme · status created_at · updated_at REL has_many :slides · :polls slides PK id : uuid FK presentation_id slide_index · background (jsonb) notes · created_at IDX presentation_id polls PK id : uuid FK slide_id · owner_id question : string poll_type : string is_active : boolean created_at · updated_at poll_options PK id : uuid FK poll_id → polls.id text : string created_at · updated_at poll_responses PK id : uuid FK poll_id · user_id FK? presentation_session_id answer : string created_at · updated_at IDX unique poll+user+session presentation_sessions PK id : uuid FK presentation_id → presentations.id join_code : string · started : bool started_at · ended_at IDX unique join_code session_participants PK session_id + user_id FK session_id · user_id → users joined_at : timestamp (ingen display_name-kolonne) REL has_many :poll_responses 1 → n 1 → n 1 → n 1 → n 1 → n 1 → n 1 → n 1 → n

Bachelor_Gruppe1 / monorepo

Klikk på en mappe for å folde ut – klikk på filer for detaljer i panelet til høyre.

backend/ – Rails 8.1 API

frontend/ – Vite + React + TypeScript

Monorepo-rot (fra README)

Bachelor_Gruppe1/
├── backend/          Rails 8.1 API · Action Cable · DB
├── frontend/         Vite + React SPA (editor + live)
├── scripts/kamal.ps1 Windows-helper for Kamal deploy
└── README.md
Base URL https://slides.rubynor.com
Offentlig JWT = auth-krav routes.rb
Autentisering 4 ruter
Presentasjoner & Slides 5 ruter
Live-sesjoner 4 ruter
Polls 4 ruter
Realtime & System 2 ruter

Teamet

Utviklerteamet bak ProSlides – bachelorprosjekt USN våren 2026, i samarbeid med RubyNor.

Martin M. Hansen

Martin M. Hansen

Prosjektleder · Utvikler

Live-funksjonalitet og databasearkitektur

Primærfokus

  • Sanntidskommunikasjon (Action Cable)
  • Datamodell (PostgreSQL / Neon)
  • Resultattavle (live)
GitHub LinkedIn
Marcus W. H. Einarsen

Marcus W. H. Einarsen

Scrum Master · Utvikler

Presentasjonseditor, frontend-arkitektur og Scrum

Primærfokus

  • WYSIWYG-editor (Fabric.js)
  • Redigeringsflyt
GitHub LinkedIn
Fredrik Stalsberg

Fredrik Stalsberg

Utvikler · UI/UX · Sikkerhet

Autentisering, UI & UX-design og testing (Playwright E2E)

Primærfokus

  • Brukerautentisering og sikkerhet
  • Designsystem (shadcn/ui)
  • E2E-testrutiner
GitHub LinkedIn
Sondre C. Mogen

Sondre C. Mogen

Utvikler

Backend API og forretningslogikk

Primærfokus

  • API-struktur og endepunkter
  • Polls og avstemninger
GitHub LinkedIn
Rikke H. Larsen

Rikke H. Larsen

Utvikler

Interaktive elementer

Primærfokus

  • Verktøy og interaksjoner i presentasjons-editor
GitHub LinkedIn

Tidslinje

Prosjektet er delt opp i fire sprinter, tilpasset tidsrammen.

Foranalyse

Uke 5–7

Sette i gang med prosjektet. Oppsett av IDE, rammeverk og utviklingsmiljø. Sette seg inn i Ruby og Rails.

  • Oppsett av Rails 8 API + React/Vite monorepo
  • PostgreSQL-database med migrasjoner
  • Git-flyt og prosjektstruktur definert
  • Læringsperiode for Ruby og Rails

UI, UX og datastrukturer

Uke 8–10

Etablere fast UI-struktur. Sikre interaktiv og intuitiv UX med universell utforming. Definere datastrukturer og modeller.

  • Komponentbibliotek med shadcn/ui + Tailwind
  • Databasemodeller: User, Presentation, Slide, Poll
  • Ruting og navigasjonsstruktur
  • Universell utforming (WCAG)

Editor, interaktivitet og sanntid

Uke 11–17

Editoren er kjernen i prosjektet. All funksjonalitet på plass: verktøylinje, polls, publikumsspørsmål, slides og sanntidsvisning.

  • Visuell slide-editor med Fabric.js-canvas
  • Drag-and-drop slide-organisering (dnd-kit)
  • Sanntids polls og publikumsspørsmål via Action Cable
  • OAuth-innlogging (Google, GitHub)
  • JWT-autentisering og sessions
  • Live presentasjonsmodus med deltaker-kobling

Feilretting og stabilisering

Uke 18–20

Brukertesting av nettsiden, brukerhistorier og selvtesting. Feil og mangler fikses fortløpende.

  • E2E-testing med Playwright
  • Brukertesting med reelle testpersoner
  • Testing basert på brukerhistorier
  • Feilretting og ytelsesforbedring
  • Deploy-testing med Docker + Kamal

Rapportskriving

Uke 5–21

Gjøres gjennom hele prosjektets levetid, parallelt med utvikling. Dokumenterer prosess, metode, resultater og refleksjon.

Endelig produkt

19. mai

Siste optimalisering, feilretting og endringer. Levering av ferdig produkt, rapport og prosjektoversikt.

Ressurser

Oversikt over dokumenter, lenker og media knyttet til prosjektet.

Legg til nye poster i js/docs.js — støtter filer, eksterne lenker og bilder.

Merknad · Cursor AI

Denne prosjektoversikten (denne nettsiden, ikke ProSlides-appen): UI, layout, kode og animasjoner er utviklet med Cursor AI.

Innholdet er ikke AI-generert. Tekst, data og prosjektinformasjon er skrevet og verifisert av gruppen. Modeller: Claude Opus 4.6, Claude Opus 4.7, Cursor Composer .