Fullstack React GraphQL TypeScript Tutorial

A fullstack project course that teaches you how to build a backend and frontend from scratch then deploy it.

Includes the follow technologies:

– React
– TypeScript
– GraphQL
– URQL/Apollo
– Node.js
– PostgreSQL
– MikroORM/TypeORM
– Redis
– Next.js
– TypeGraphQL
– Chakra

Code: https://github.com/benawad/lireddit

Links from video:
Learn vim: https://benawad.com/vim
How to install PostgreSQL: https://www.google.com/search?q=how+to+install+postgresql
How to install Redis: https://www.google.com/search?q=how+to+install+redis
Argon2 vs bcrypt: https://security.stackexchange.com/questions/193351/in-2018-what-is-the-recommended-hash-to-store-passwords-bcrypt-scrypt-argon2
React snippets: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#file-snippets-typescriptreact-json
Simple pagination: https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/src/extras/simplePagination.ts
Node.js Docker: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
Next Apollo: https://github.com/adamsoffer/next-apollo/blob/master/src/withApollo.js

0:00:00 Intro
0:02:02 Node/TypeScript Setup
0:11:29 MikroORM Setup
0:39:50 Apollo Server Express Setup
0:47:32 MikroORM TypeGraphQL Crud
1:09:23 Register Resolver
1:23:27 Login Resolver
1:41:11 Session Authentication
2:03:06 Sessions Explained
2:08:24 Next.js + Chakra
2:32:36 URQL Basics
2:46:07 GraphQL Code Generator
2:53:16 Register Error Handling
3:10:57 NavBar
3:26:21 URQL Cache Updates
3:39:33 Logout
3:50:11 Next.js URQL SSR
4:12:34 Forgot Password
4:35:31 Change Password
5:22:14 Why Switching to TypeORM
5:25:27 Switching to TypeORM
5:50:44 Many to One
6:02:26 Global Error Handling
6:24:15 Next.js Query Params
6:31:26 URQL Pagination Start
6:50:02 Adding Mock Data
7:01:19 Chakra Styling
7:12:37 More URQL Pagination
7:32:07 Fix Mock Data
7:40:41 URQL Pagination Has More
8:00:53 GraphQL Fetching Relationships
8:18:43 GraphQL Field Permissions
8:23:16 Many to Many
8:46:46 Invalidate Queries
9:00:49 Upvote UI
9:23:11 Change Vote
9:31:57 Write Fragments
9:39:00 Vote Status
9:51:57 SSR Cookie Forwarding
10:04:08 Single Post
10:21:55 Delete Post
10:38:19 Edit Post
11:09:23 DataLoader
11:40:06 Cache Reset
11:43:55 Deploy Backend
11:52:56 Docker
12:03:29 Environment Variables
12:14:55 DB Migrations
12:21:40 Docker Hub
12:28:23 DNS
12:36:39 Deploy Frontend
12:57:28 Fix Cookie
13:03:07 Switch to Apollo

#benawad #fullstack #tutorial

—-
Checkout my side projects:

If you’re into cooking: https://www.mysaffronapp.com/

—-
Join the Discord: https://discord.gg/Vehs99V

—-
Patreon: https://www.patreon.com/benawad

—-
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Medium: https://medium.com/@benawad
GitHub: https://github.com/benawad
Twitch: https://www.twitch.tv/benawad
Facebook: https://www.facebook.com/benawad97/
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
TikTok: https://www.tiktok.com/@benawad ​
​
—-
Follow me online: https://voidpet.com/benawad
#benawad