loading...
Cover image for React + Jitsi + Serverless + Twilio SendGrid

React + Jitsi + Serverless + Twilio SendGrid

fifo profile image Filipe Herculano ・1 min read

I've been using jitsi meet a lot lately to get in touch with people from a distance, so I thought I could automate my workflow and share it with others as a submission to the Twilio + DEV hackathon

📜 Summary

It's a webapp that allows visitors to create video conference meetings and invite participants through answering a simple form that emails everyone on their behalf (desktop browser only for now)

The meeting room name is picked for you using a unique id to reduce collisions since meeting links on jitsi servers are public

Participants can click on the link in their email and join the video conference right on the website

ℹ Emails are sent using SendGrid through serverless functions and the video conference runs on an embedded jitsi meet client through react-jutsu

A live demo is available and deployed to zeit here: https://rendezvous.now.sh

The code for it is available on GitHub 👇

GitHub logo this-fifo / rendezvous

React + Jitsi + Serverless + Twilio SendGrid

rendezvous

This app was created to have fun, learn some stuff and take part in the twilio + DEV hackathon 🥳

📜 Summary

Visitors of the site can invite participants to video conference meetings answering a simple form that emails everyone on their behalf

The meeting room name is picked for you using a unique id to reduce collisions since meetings links are public

Participants click on the link in their email and join the video conference right on the website

Emails are sent using sendgrid through serverless functions and the video conference runs on an embedded jitsi meet client

🏗 Building it

rendezvous was bootstrapped with create-react-app

Requirements

  • Node.js and yarn (or npm) for development
  • Zeit CLI (for testing the serverless Node.js runtime through zeit now)

Required Environment Variables

Add the following to a .env file at the project root

RENDEZVOUS_HCAPTCHA_SECRET='your_hcaptcha_secret'
RENDEZVOUS_APP_SECRET='anything_you_want_here'
SENDGRID_API_KEY=

Additional Resources/Info

  • Video Conference through Jitsi
  • Emails through SendGrid 📧
  • Base css from MVP.css(with a few modifications)
  • All potential hCaptcha earnings are donated to Wikimedia foundation 🤗

Hope someone finds this useful or at least use it as a base for their own project

Discussion

pic
Editor guide