Realtime React with Firebase
Build a full-stack chat application with real-time updates.
Watch Promo
Your Instructor
Hey! I've been building stuff on the web since the 90's (before fancy things like CSS and JavaScript!). I care most about great composable APIs and accessible UI. I co-authored React Router and now build OSS at Reach. I've taught web development and React to thousands of developers at our workshops, and now we're bringing that material online.
Hang out with me on twitter @ryanflorence :D
Course Curriculum
Lessons
Available in
days
days
after you enroll
-
StartGetting Started (0:35)
-
StartCreate React App (2:17)
-
StartAssets
-
StartDownloading Assets (0:59)
-
StartBuilding for Production (3:21)
-
StartFirebase Sign Up (2:04)
-
StartInitializing Firebase (6:06)
-
StartYour First Deployment (4:07)
-
StartRolling Back and Restoring Deployments (3:05)
-
StartCloud Firestore Data Model (3:04)
-
StartAdding Data Manually (3:33)
-
StartAdding Firebase to Your App (3:04)
-
StartAdding Component State (2:18)
-
StartSubscribing to Data (3:03)
-
StartExtracting Documents (2:10)
-
StartUpdating State (0:55)
-
StartUnsubscribing from Data (1:04)
-
StartGetting Realtime Updates (1:19)
-
StartReview (4:26)
-
StartCleaning Up (2:24)
-
StartWhere to Split Big Components (2:34)
-
StartReorganized src Download
-
StartFile Structure Review (1:12)
-
StartFirebase Import and Keys (1:53)
-
StartGetting Input Values (4:05)
-
StartSaving Messages (5:05)
-
StartPosting to Different Channels (1:49)
-
StartClearing the Input (0:54)
-
StartSubscribing to Messages (7:57)
-
StartOrder Messages with Collection Queries (2:03)
-
StartAbstracting Subscriptions with a Custom Hook (5:30)
-
StartReusing useCollection (4:01)
-
StartEnabling Authentication (1:11)
-
StartLogging In (4:33)
-
StartPersisting Login (2:14)
-
StartA Little More About useEffect (1:52)
-
StartAdding the User and Passing Props (3:06)
-
StartLogging Out (1:08)
-
StartCleaning Up (1:58)
-
StartAuth Error Handling (2:43)
-
StartStore Users in the Database (3:16)
-
StartReferencing Users in Messages (5:32)
-
StartRefactor Messages (7:03)
-
StartDisplay Author on Messages (5:22)
-
StartJSX and Non-Breaking Spaces (2:24)
-
StartAdd Routes (4:34)
-
StartUsing Route Params (5:18)
-
StartAdding Link (1:55)
-
StartGetting Effects to Update (14:40)
-
StartDon't Subscribe to Authors (5:45)
-
StartAvoid Flickers with a Simple Cache (5:44)
-
StartuseDocWithCache (2:40)
-
StartDisplay Message Timestamps (3:55)
-
StartFormat Dates with date-fns (2:28)
-
StartShowing the Avatar Only Once (5:45)
-
StartShow Day Horizontal Rules (5:24)
-
StartRefactor Topics to useDoc (6:43)
-
StartuseRef (3:53)
-
StartManaging Scroll Position (2:36)
-
StartDeploy Again! (3:32)
-
StartHooks vs. Component (3:55)
-
StartForwarding Props with JSX Spread (2:21)
-
StartBetter Scroll Handling (5:13)
-
StartAdd Channel Data to Users (5:47)
-
StartUpdating Deep Document Values (1:56)
-
StartSubscribing to Channel Members (1:57)
-
StartCollection Queries (2:59)
-
StartA Little Bit About Indexes (6:08)
-
StartDisplay Channel Members (0:49)
-
StartIndexes and Reinitializing Firebase (2:53)
-
StartDitching Our Index (lol) (3:00)
-
StartWatching Connection Status (5:17)
-
StartSaving Presence to RTDB (6:08)
-
StartVerifying RTDB Writes (2:19)
-
StartSaving Presence to Firestore Clientside (5:35)
-
StartAdding Presence to the UI (1:42)
-
StartPlanning the RTDB and Firestore Sync (4:06)
-
StartYour First Cloud Functions (1:37)
-
StartRunning and Deploying Functions (7:43)
-
StartTriggers (0:50)
-
StartSync Status from RTDB to Firestore Serverside (12:40)
-
StartOrganize Cloud Functions (3:37)
-
StartGetting Started with a Chat Bot (16:21)
-
StartAdding the Cleverbot API (10:40)
-
StartConfig Vars (4:46)
-
StartThe End! (1:51)
Frequently Asked Questions
When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound? After enrolling, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy! If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.