Quiz Night OS

Turn your pub quiz into a TV game show.

Write the questions in a Google Sheet, drop in your pictures and teams, and run the whole night from your laptop:
the TV shows the show, a second window gives the host the answers and the controls.

▶ Open the app

Free, nothing to install, no account. Your quizzes stay in your own browser.

How a quiz night looks

Every team gets an introduction. Teams with photos and history get big cards; teams known only by name get a living team wall.	The rounds at a glance. Finished rounds reveal their names, the bar shows how far the night is.
Questions, then answers. Play a round with answers, or questions only with a timer and reveal them later.	Eleven question types, from ABCD and Top 5 to pictures, audio, video and putting things in order.
A real reveal. The standings hold until the host reveals the round's points group by group, from the lowest score up.	Half-time with a countdown, the teams in the spotlight and the live standings ticker.

More screens: rules, prizes, picture and Top 5 questions

What the host sees

Press Shift + P and a second window opens on the laptop. It runs the show: the TV follows every click, with no server in between.

The answer before anyone else. The current question, the correct answer and what the next click will do.	Which way to look. During the reveal the seating map shows where the announced teams sit.
Attendance. Tick off who came, fix the number of players, and place each team on the map of the room.	Check before the show. Every question as the TV will show it, plus a list of what is missing or wrong.

Make your own quiz

1. Open the app and click New quiz, or start from the built-in demo.
2. Questions: copy the Google Sheet template (Help → Templates), fill it in, share it as anyone with the link can view and paste the link. Help → Question types shows the exact rows for every type and what they look like on screen.
3. Media: drag in your pictures, audio and video. A whole folder works.
4. Scores: paste the link of your scores Sheet, or type the points into the app during the show.
5. Teams: type them in, import a CSV, or load the names from the scores Sheet.
6. Check, fix what it finds, and Start show.

Export a quiz as one .zip to back it up or move it to the laptop you will use on the night.

On the night

1. Connect the laptop to the TV, open the quiz with Start show, drag the window to the TV and press F11.
2. Press Shift + P and keep the host window on the laptop.
3. If the TV cuts off the edges, press Shift + C on the TV window to shrink the picture.

Key	Does
Shift + P	Open the host window
→ / ←	Next / previous step
Z	Enlarge the question's picture
Esc	Close the picture, or leave the current screen
Shift + D	Jump back to the rounds dashboard
Shift + C	Adjust the picture size for the TV

The app is in English, Czech and Hungarian. It works best in Chrome or Edge.

Themes

Every quiz picks a look in its setup: Classic, Halloween, Christmas, or its own theme made in the theme editor (colours, fonts, a background picture, glows, scenery and decorations, with a live preview of every screen and a readability check). Themes can be exported, imported and kept in My themes for other quizzes.

The theme workshop (#/themes, linked from the library) shows themes other hosts shared. Anyone can submit one from the theme editor (Share to the workshop opens a GitHub form); it appears after review.

For developers

React 19 + Vite, Tailwind CSS v4, Framer Motion, Lucide icons, PapaParse and fflate. There is no backend: quizzes and media live in IndexedDB, the two windows talk over BroadcastChannel, and Google Sheets are read as CSV.

git clone git@github.com:Jakub-Kos/QuizNightWebApp.git
cd QuizNightWebApp
npm install
npm run dev     # development server
npm run lint    # ESLint
npm run build   # production build in dist/ (checks the workshop themes first)
npm test        # Vitest

Every push to main deploys to GitHub Pages.

Reviewing a workshop submission

Submissions arrive as issues labelled theme, with the theme's .zip attached. A workflow (.github/workflows/theme-check.yml) checks the attached file and comments the result on the issue: whether it passes, what it contains, readability, and the exact command to add it. It updates that comment when the issue is edited.

1. Look at it: download the zip and import it in any quiz's setup (Look → Import theme), then click through the show.
2. Add it: npm run workshop:add <URL of the attached .zip> (or a downloaded file). It runs the same check as the app and refuses a theme that would lose anything; --replace updates a theme with the same id.
3. Commit public/workshop/ and push. Close the issue.

Themes are plain data (colours, fonts, pictures and built-in effects, never CSS or code); the format is described at the top of src/quiz/themeFormat.js.

License

MIT