A Sasquatch Story: DIY Full-Stack Type-Safe React App Hosted For Free
Monday, July 29, 2024 - 7:00 PM UTC, for 4 hours.
Workshop (pre-conference)
Room: African 30
Remix is the hot new React framework, and for good reason. The return to web fundamentals means developers don’t need to learn lots of framework specifics, while user needs, like speed and a11y, come almost automatically. Getting familiar with Remix will serve you well for years to come. If you’re like me, you learn by doing, but you’re also cheap (I get a monthly email from AWS threatening to shutdown my account over an 11 cent charge from 3 years ago). This guide will show you how to setup and deploy an SEO friendly, production-ready, full-stack Remix app for no-cost and not-too-much effort using some of my favorite services: Fly.io for hosting, Supabase for database, and Contentful for a CMS. What are building? Since I always tell people React is the "choose-your-own-adventure" frontend framework, we're going to build a Sasquatch story where you choose how it ends.
Agenda
- What is Remix and why is the future of React actually the past - Components and Routing - Data loaders - Setting up Postgres on Supabase - DB schemas and migrations with Prisma - Type-safe data-access in loaders - Remix Forms are just like forms - Mutating data in actions - Setting up a Contentful CMS - Pulling in page copy from Contentful - Merging multiple data sources in a single loader
Prerequisites
Node (20+) and NPM installed Basic React and Typescript knowledge Nice to know: ORMs Databases Docker
Take Aways
- Learn to create SSR web-apps with Remix
- Learn to use Prisma for type-safe web apps
- Learn to add a CMS to any app with Contentful
- Learn to use Supabase as a Postgres DB
