presentation-helper

• 

  lighthouse results

• 

• 

• 

• 

  snippet screenshot

Inspiration

After watching react 2025 course from Lee Robinson I wanted to build something with next.js and firebase. I had a presentation to the students of the first year in my cyber security masters' and I felt the need of sharing code and links live with the attendees. That's why presentation-helper was born.

What it does

presentation-helper is a web application (installable as a PWA) and it enables anyone to create or join a room in seconds and share the URL with anyone. After that you can add URLs or snippets (and can be easily added more content types) that anyone in the room will immediately see and can further copy or use them. Having simplicity, scalability and performance as the main priorities, presentation-helper was built to improve the connection between the presenter and attendees in workshops, presentations or other events.

How I built it

With a react framework called next.js for the frontend and cloud firestore from firebase for the persistence layer (database). Tailwindcss was used for styling. Also, I'm detecting if an user has no internect connection and if not I serve a static offline html page with service workers. Since it is deployed on Vercel, it is globally served with their CDN what allows for incredible performance values all around in any part of the world with any device.

Challenges I ran into

The experience was smooth, both frameworks/services have great documentations.

Accomplishments that I'm proud of

How fast it is and how scalable it is. The fact that in just seconds anyone can create rooms, share them and share snippets and urls for everyone that are in the room and see the content immediately. The only constraints are the free plan limitations from both firebase and next.js. It can be used by unlimited users from all over the globe thanks to both technologies. This tool is installable as a progressive web application in all platforms (which is a great plus - from a single platform we get similar to native outputs for all platforms incluind iOS, macOS, windows, android, linux, etc). Also, I'm achieving the perfect score in all lighthouse scores (image in gallery).

What I learned

Learned a lot. I learned how Incremental Static Generation (data fetching feature from next.js) works and it allowed me to associate the rooms with an unique ID that will live forever and anyone can join. How cloud firestore database allows us to multiple clients subscribe to the changes database changes in a certain collection (in my case it was perfect where we want for anyone that joins a certain room to receive its content immediately). Also, learned the magic around service workers and caching. This allowed me to cache certain assets that can be served when the user has no internet connection but also limit unnecessary trips to the server (since some things were already on the cache)

What's next for presentation-helper

One big feature I want to add is to the possibility to setup a master password when creating the room that will encrypt all the content inside that room and limit its access (only users with the master password can access the room). Adding push notifications when new content is added or new users join the room is on the todo list (of course room's creator will be able to customize everything). Also, customizable themes (and dark mode) are already being prepared. The main goal is to keep adding useful features while maintaining its simplicity and ease of use.

Built With

• cloud-firestore
• firebase
• next.js
• pwa
• react
• tailwindcss