Use THIS database for React and TypeScript apps

Written version: https://lwj.dev/blog/convex-type-safe-database You can build a database-powered app with end-to-end type safety _and_ real-time updates without needing to learn how to manage databases. This tutorial will show you how. - Source code: https://github.com/learnwithjason/dashboard-convex-react - Finished app: https://convex-dashboard-react.netlify.app/ Quick note: at 3:50 and 7:20, the mutations should also be async functions and we should await db.insert() — leaving it out isn't a _bug_ but the Convex team let me know that it's safer to always send async functions to queries and mutations. Huge thanks to Convex for sponsoring this video. Learn more at https://convex.dev Resources: - Read this tutorial instead: https://lwj.dev/blog/convex-type-safe-database - Convex documentation: https://docs.convex.dev/introduction/ - Unsplash: https://unsplash.com/ — images of pups came from here - React Charts: https://react-charts.tanstack.com/ — used for the stats view Chapters: 00:00 — Overview 00:14 — What keeps web devs from building apps 00:48 — How companies like Convex are moving databases forward 01:08 — App starting point 01:34 — Local dev 01:40 — Convex installation and setup 01:59 — Defining a schema 03:26 — Create and read pup entries in the database 03:50 — Write a mutation to add a pup to the database 04:58 — Write a query to load all pups 05:19 — Add the Convex client and provider to the React app 05:57 — Load pup entries from Convex on the home page 06:36 — Create all pup entries in the database 07:08 — Create and read reactions in the database 07:33 — Reading reactions (advanced Convex query) 09:18 — How caching works in Convex 09:30 — Hooking up the UI to save reactions in the database 09:52 — Adding real data to the stats view 10:31 — Deploy the app to Netlify 11:28 — Adding reactions to the production dataset 11:40 — BONUS: Real-time updates are free 12:27 — Frontend devs don't need to feel intimidated by data anymore