Present PDFs live on the web.
This web application allows you to upload PDF documents and present them online to any number of users. The viewers will see the slides advance in real time.
- Admin view: select a slide deck and advance the presentation.
- Real time sync: the users will see the slides changing in real time.
- Access control: only authorized users can control the presentation through the admin panel.
- Multiple decks: you can upload multiple decks and select the one to show at each time.
- Wake Lock: prevent the viewer's screen from dimming or locking during the presentation (only on supported browsers)
- Preserve last shown page when switching decks.
The app is entirely built for Firebase.
- Clone the repository
git clone https://github.com/fuljo/live-slide-deck cd live-slide-deck
-
Register to Firebase and set up a new project. We will reference it as
${FIREBASE_PROJECT_ID}
from now on. -
Install the Firebase CLI as described here and log in to your Google account.
npm install -g firebase-tools firebase login
-
Set the current project
firebase use ${FIREBASE_PROJECT_ID}
-
Create a web application
firebase apps:create web ${FIREBASE_PROJECT_ID}
-
Firestore, hosting and storage are already configured for you 😉.
Authentication is only needed to sign-in the presenters (those who control the presentation). The viewer is publicly accessible.
-
Go to the Authentication > Sign-in-method tab in your Firebase console.
-
Enable the Email/Password provider.
-
Enable the Google provider (optional).
-
-
Go to the Authentication > Settings tab.
- Turn on User account linking.
- Go to User actions and when prompted enable authentication with the identity platform. This will decrease the number of daily active users to 3,000. But since only presenters are counted it is not a problem for us.
- In User actions uncheck Enable create, so that no users can sign up using the public API.
-
Go to the Authentication > Users tab.
- Create a user for each of your intended presenters. If you intend to use Google sign-in, you can use a generated throw-away password.
-
Go to the Firestore > Data tab.
- Create a collection called
users
. - Inside it, create a document for each of your presenters.
- The document key is the user's UID which you can retrieve from the Authentication > Users tab.
- The document must have two fields:
email: string
with the user's email (only for reference).admin: bool = true
which grants the user permissions to modify the presenter's state.
- Create a collection called
-
Go to the Firestore > Data tab.
- Create a collection called
presenter
. - Inside it, create a document called
state
with two fields:currentDeck: string
set to the name of your slide deck, without the.pdf
extension.currentPageNumber: map = {}}
-- this will hold a map that associates each slide deck with the current page number.
- Create a collection called
-
Go to the Storage > Files tab.
-
Create a folder named
decks
. -
Inside it, upload your PDF slide decks.
-
Last, we need to configure CORS on the bucket to allow downloads from any site. Follow the procedure described here. The
cors.json
file is already provided for you.[ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]
-
If you want additional protection you can replace the
"*"
origin with"${FIREBASE_PROJECT_ID}.firebaseapp.com"
, but please mind that requests fromlocalhost
(e.g. in development) won't work in this case.
Now you need to locally store your app's configuration that Webpack can pick them up when building the app.
-
Go to your project's Settings > General tab.
-
Scroll down until you see a code snippet including
const firebaseConfig = { /* ... */ };
which contains your configuration.
-
In the project root run
cp .env.example .env
and fill the fields of the former file using the configuration values above.
-
Install dependencies
npm install
-
Build and deploy to your Firebase site
firebase deploy
-
Visit the site:
https://${FIREBASE_PROJECT_ID}.firebaseapp.com/
The viewer page is served at the root of the site (index
).
It features a full-page view of the current slide. Users can toggle the fullscreen mode by double-tapping the screen.
The admin page is served at /admin
. It allows authenticated admin users to:
- select the current slide deck with the top-left dropdown
- change the current slide number with the center input field
- go to the previous/next slide with the on-screen buttons or the keyboard arrows
I (fuljo) quickly hacked this app for the SWERC 2022-2023 event. It lacks a lot of front-end features and is still far from perfect. Some future improvements I suggest:
- Uploading slide decks through the Admin UI
- Managing the users from the UI
- Multiple presentation sessions
If you wish to contribute please open a Pull Request.
This project relies on: