DEV Community

Cover image for React + Jitsi + Serverless + Twilio SendGrid
Filipe Herculano
Filipe Herculano

Posted on

React + Jitsi + Serverless + Twilio SendGrid

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=
…
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)