Learn to build fullstack React apps with Blitz.js

Our #WednesdayStreams return in October with a look at some new tools for building full stack JavaScript apps!

In September we built a "Tag Journal" habit tracking app with Laravel. This month we're going to build a similar app using the full-stack React framework Blitz.js. (https://blitzjs.com)

In this first stream (Part 1 of ... 4?) we'll look at some of the open source tools Blitz.js brings together: Next.js, Prisma 2 and React Query. We'll try to understand how they work separately, by building a simple project so that next week we can see how Blitz.js builds on top of these existing tools.

If there's time, we'll also deploy our demo app to Vercel.

The project code: https://github.com/shaunchurch/nordev-next

Software and services:
https://blitzjs.com
https://nextjs.com
https://prisma.io
https://react-query.tanstack.com/
https://vercel.com
https://digitalocean.com

Order of events:
2:02 Video intro after live stream introduction
9:03 Kick off a new Next.js project from scratch
26:54 API Routes in Next.js
30:47 Set up Prisma 2 and some basic data models
56:06 Fetching data from API routes
1:00:24 Intro to React Query
1:13:32 React Query dev tools
1:20:23 Deploy the project to Vercel with the Github integration
1:22:36 Create Digital Ocean Postgres Database
1:23:32 App deployment successful, waiting for db...
1:30:27 Database is up!
1:31:49 Vercel overview, setting up database connection Environment variable
1:49:10 It works!
1:49:30 Slow network round trips to San Francisco
1:51:24 One single Vercel config to make it much faster
1:55:44 Outro, thanks!
1:56:31 Post outro Prisma examples
1:57:41 End

Next up watch Part 2 here: https://www.youtube.com/watch?v=6Poafy4ehHE

Norfolk Developers Patreon: https://www.patreon.com/NorfolkDev
Shaun on twitter: https://twitter.com/shaunchurch