ToastMaster Online Assistant

Online reading practice usually happens on a video call, with notes scattered across chat messages. This app gives the session one shared screen.

The host prepares a session (a dialogue script, the participants and some questions) and starts it live. Everyone joins as host, supporter or reader. The host moves the group through eight parts: opening, first reading, role-switch reading, pronunciation feedback, new vocabulary, QA practice, topic discussion and closing. Each part changes what the presentation view shows, and every change reaches all participants in real time.

Supporters select words in the passage to add pronunciation notes with IPA, coloured by the reader who needs them. They also add vocabulary, record answers with evidence picked from the text, and write discussion notes. When the host ends the session, it becomes a review page, and the words go into a vocabulary book that can be searched across sessions.

I built it in about ten days with Google AI Studio, then containerised it for Google Cloud Run.

The screenshots show the app running locally on the Firebase emulators with demo sessions and participants.

• Session setup: title, topic, meeting link, a dialogue script, participants with roles, and multiple-choice or open questions.
• Live session in 8 parts, driven by the host, with a session timer and a notice to everyone when the part changes.
• Roles: host, supporter and reader, each with its own views (presentation, supporter, vocabulary, QA, discussion).
• Pronunciation feedback: select text, add IPA and a note for a reader; the passage highlights each word in that reader's colour, with filters by who added it.
• Vocabulary and QA: highlight to capture a word or the evidence for an answer.
• Review page and Vocabulary Book: everything from a finished session on one page, and all words across sessions with search, filtering by session and inline editing.
• Sign-in with email and password or Google (with a redirect fallback when pop-ups are blocked).

• A React 19 + TypeScript single-page app built with Vite and styled with Tailwind CSS, routed with React Router.
• Firebase Authentication for accounts; Cloud Firestore holds sessions, with participants, questions, answers, pronunciation notes, vocabulary and discussion notes as subcollections.
• Real-time sync comes from Firestore onSnapshot listeners: every client sees the host's part changes and the supporters' notes instantly, with no backend server.
• Packaged as a static build served by Nginx in a Docker image, built by Cloud Build and deployed to Cloud Run. Firebase settings are injected at container start (window._env_), so one image works across environments.

• Keeping many live listeners consistent, and cleaning them up when a participant leaves, so a part change or a new note reaches everyone at once.
• Turning a selection in the passage into a highlight that survives re-rendering, and colouring it by reader when several people share a word.
• Google sign-in inside embedded previews, where pop-ups are blocked by cross-origin policies: falling back to a redirect.
• Vite bakes environment values in at build time, so runtime injection was added for the container.

• Firestore's real-time listeners make collaborative features simple, but each useEffect must return its unsubscribe.
• Deriving filtered lists during render, instead of copying them into state, keeps the UI in sync with the database.
• Building with an AI assistant works best step by step (routing, then auth, then live data), with exact error messages and explicit constraints.