Collaboration
Teaching with Imagination, Building for Inclusion
Collaborative teaching tools for impact
Disclaimer:
Ideas in this presentation are solely of Nhat (if proven wrong over time) and Tom (if proven right over time).
What's happening this week
We will move from vibe coding to durable teaching collaboration tools: observe what works, build with the core web stack, and share what we learn.
Learning Outcomes
- Recognize what makes tools such as Figma, Miro, Kahoot, and Menti engaging: collaboration, history, access, and visible progress.
- Explain the building blocks behind a teaching tool: HTML, CSS, JavaScript, frontend and backend, WebSockets, web AI, and Codex.
- Turn a classroom need into a teaching collaboration tool with vibe coding.
- Build and test a small prototype, then observe how people use it.
- Reflect on what makes a tool durable, reusable, and worth sharing.
What is vibe coding?
Human language > Get your App
We all know vibe coding.
But its not enough
Act - The Problem
We make so many tools. But making them widely available is so complicated..
The “folders of apps” become graveyards for so many projects
Act - The Observation
What makes Figma, Miro, Kahoot, Menti engaging?
They have in common:
Storage and History
Accessible anywhere
Can Observe Progression
Act - The Solution
Turn our vibe coded tools into teaching collaboration tools
Act - The How
Step 1: Design & customizing tools exactly to your and your classroom’s specific needs
Step 2: Deploy your tools online for free
Step 3: Understanding basic concepts of frontend and backend
Act - Building blocks
Block 1: HTML is code for web pages structure. CSS is how pretty you want the page to be. Javascript (JS) is the code that does things.
Block 2: Frontend is webpages you see. Backend is what you don’t see that store and remember things: servers, cloud, storage.
Block 3: Web Socket is a 2-way communication protocol.
Block 4: Web AI (ChatGPT): Quick discussion and figuring things out (free).
Block 5: Harness (Codex): An app on your computer that can do anything you can do (sort of).
Act - The Tools
Tools 1: Do the most things with the least amount of money: Codex, Cloudflare.
What is cloudflare? Front End, Back End infrastructure.
Why ChatGPT/Codex?
● Super efficient state-of-the-art models
● Free capable model (Luna) for chat on chatgpt.com and nearly free on Codex
Why Cloudflare?
● The company that powers half of the internet - have all of the services
● Generous free plan to host unlimited websites and databases
● Cheap domain
● Front End, Back End infrastructure
What is Web Socket?
Communication protocol for 2-way communication
HTTP requests data. WebSocket keeps a persistent open channel.
Use cases: Live chat, real-time dashboards, multiplayer games, and collaborative tools such as Miro and Figma.
persistent channel↔
Reflect 1
In 3 years, we went through several Eras:
-Copilot Era - Ai would suggest what line of code comes next
-Vibe Code Era - Keep describing what you want and Ai best guesses. Fake it till Ai Makes it.
-Agentic Era 1: Good enough to do anything you wanted. But you still had to know what you want. Software Engineers were the kings. Product Managers were the nobles.
-Agentic Era 2: Tell you what you want, and Ai will know if what you want is sketchy. Power shifts to the Product Manager. Engineers become bitter.
-Agentic Era 3: Ai improves over time and knows what you want before you can finish the sentence. Power is now in the hands of those who can intuit the will of the People.
Reflect 2
Things of the past/obsolete/waste of time:
1. Coding
2. Data collecting
3. Research
4. Cron Jobs
5. Pipeline Orchestration
Things We Need to do:
1. Observe what the real world wants and needs
2. Tell the Ai what to research
3. We verify the research
4. How to tell the Ai to help us bridge and solve those needs
5. Think bigger and solve bigger problems
Share - Game Platform
https://rmit-game-collection.vercel.app/ | https://rmit-game-archive.vercel.app/
Share - HotDesk Prototype
Share - Attend.onl
Share - Html Report
https://reports.bynhat.com/ | https://reports.bynhat.com/r/66cd9e36e39c481a4f33
Share - Live 3D Classroom
Freebies
Download the workshop guides for Cahoot, Classroom Chat, and Miro Clone.
Collaborative App Starter Prompt.
Create me an app where multiple user can paint on an empty canvas in real time deployed to Cloudflare using Websocket. Allow the user to select brush size, colors, and erase... Deploy to Cloudflare when you're done.
CONCLUSION
CODEX (AI TOOL)
CLOUDFLARE (Webpage and Data Storage)
Web Socket (Live Communication Protocol)
Allows us to make Durable and Collaborative Tools