Text-to-Post Web App Tutorial - Twilio, Convex, Clerk, React, and TypeScript

Overview

Learn how to build a web application that processes incoming SMS messages with authentication, image storage, and a real-time database using Twilio, Convex, Clerk, React, and TypeScript. This 19-minute tutorial demonstrates how to create a complex workflow in under 200 lines of code. Set up a webhook to handle incoming text messages, store them for display in a React web app, manage user authentication and permissions, and implement file storage. Follow along as the instructor guides you through each step, from setting up credentials to testing the final application. Gain insights into the power of modern web development tools and learn why they're revolutionizing the way we build applications.

Syllabus

Overview and app scope
Clone the repo for development
Clerk setup and credentials
Get a Twilio phone number
Install Convex and credentials
Create a type-safe database schema
Integrate Clerk with Convex
Create a Convex query
Filter Convex queries with auth details from Clerk
Run a Convex query in a React app
Create a webhook for Twilio with Convex HTTP Actions
Use Convex's HTTP Router
Handle incoming SMS in Twilio with a custom webhook
Validate Twilio webhook request
Get Twilio credentials
Save messages with Convex mutations
Test text-to-post in the app plus a bonus!
Save images from text messages using Convex file storage
Working app demo and review of what we built
Why I'm excited about the state of the web today