Build 0-cost invite-only website with Next.js & Airtable!
summary
Builds a zero‑cost invite‑only site using Next.js front end, Next.js API routes, Airtable as the spreadsheet backend and Vercel+GitHub for free deployment. Implements a custom React hook that reads a URL code, calls a Next API to fetch an invite record, and offers an RSVP update that writes back to Airtable with near real‑time UI updates. Notes Airtable limits (5 req/sec), implements an Airtable query injection escape, and demos working end‑to‑end.
AI-written summary · about
chapters (23)
- 0:00Zero-cost invite-only site intro
- 3:47Speaker intro
- 5:11Agenda and stack
- 6:38Why Next.js, Airtable, Vercel
- 8:08Private site with invite codes
- 11:15Airtable structure and setup
- 12:41Next.js + TypeScript project
- 13:47Connect Airtable to Next.js backend
- 15:33Airtable utility functions
- 18:00Next.js API endpoints for invites
- 22:23Frontend invite validation
- 24:29React hooks for invites
- 29:55Add RSVP functionality
- 31:19Update Airtable with preferences
- 32:03RSVP API endpoint
- 34:14Enhance RSVP React hook
- 37:28RSVP UI and demo
- 39:54Deploy to Vercel
- 40:36Security for invite-only sites
- 43:47Prevent Airtable query injections
- 48:18Airtable limitations and alternatives
- 49:23Key takeaways
- 50:26Q&A
related talks
04mI Love Next.js - A Creator Mash-up
38mExplosive Velocity with a Modern Stack
40mNeo4j and Next.js: A Full-Stack Relationship
18mBuilding for Non-Profit Communities with Vercel and Next.js
44mBuilding a Membership Site with 11ty
29mHow to develop your APIs without a backend
30mBuilding a massively scalable and performant Jamstack app in minutes
46mBuilding a conference website on Jamstack with Next.js and Crystallize