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
- PostgreSQL
- MikroORM/TypeORM
- Redis
- TypeGraphQL
- Chakra

Links from video:

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: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
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: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:

----

----

----
Follow Me Online Here:

​
----
#benawad

[pedroferrari]

Just managed to finish it. I stopped at every single word or action I didn't fully understand and researched more into it. I ended up doing other small courses along the way to get a better knowledge of SQL, Server Side Rendering, Data Structures, Redis, Debugging, Networking and data mutations. It took me about three months but I can tell for sure I learned more within these three months than I did on a whole year before. Ben, you are amazing. Your efforts are tremendously appreciated and I wish you the very best.

[metropolis]

My #1 advice when following this tutorial: If you run into an error, don't pause and research it. Hit play for 5 more minutes, he likely runs into it too even if not at the exact same time, and will explain it and how to fix it. Burned me a few times now.

[peterszarvas]

I have finished today (took me more than 6 month) and got a front-end job a month ago. Thank you Ben!

[juancarlostremolss]

Hey Ben, I just finished this 14 hours tutorial and wanted to say thank you for bringing us such a great content. I didn't know all the tricks you can do with typescript to improve the quality of your code. I learned a lot and think this is only the beginning of a hole new GraphQl world for me. You are the best!

[deriegle]

Go from homeless to full stack FANG developer in one 14 hour tutorial featuring Ben Awad

[robintom]

I can't help but imagine the amount of hours or even days you put into making this 13Hr+ video. Kudos to you. Godspede

[johnmcneill]

Just finished! Absolutely amazing tutorial. Perfect for intermediate programmers. Thanks so much Ben! Can't wait to jump into my side projects with everything I have learned from this.

[williamriddle]

Finally finished the full tutorial, took me about 1 month to really soak it all in. Thank you for such a great journey and through programming. Now I can start making my dream app!

[ThomasFaller]

14 hours is insane. Can’t imagine the amount of work required to put that together. Thanks Ben!

[juancarloselorriaga]

Thank you very much, Ben. I completed every step in this tutorial and took me about a month, as soon as you finished with the typeorm part I switched to pg just for fun and learned a lot of SQL that I didn't knew before, I think I just upgraded my stack thanks to you. Great insights of every piece of technology too.

[anshulgoel]

Followed this tutorial till end, took almost a month to complete it (with hands on). But it was totally worth it. Felt like going through a mini college. Thanks a lot for the tutorial Ben.

[seiferkinsdale]

Just finished the course! I feel like my brain is overflowing with knowledge. I literally invested my time in this and it was well worth it. Thank you master Ben Awad! This padawan is happy!

[ITSHWK]

14 hours?? New level of respect for this! 👏👏

[jorgepvenegas]

Even for an experienced developer, this is amazing! Thanks for putting together all this contents in a single long tutorial. There's so much to learn and new tools coming out every week that having resources like your videos helps so much to stay up to date.

[cebuch.]

Just completed whole video and going along write code together with you. I am on windows now and there were couple different things to setup, clients and terminal comands, like pg admin and redis but eventually all can be done. I really liked to see whole process the way you code, think and troubleshoot problems. I really learned from it and I think that kind of videos are most valuable. Thanks Ben

[erwin]

This is very comprehensive. I don't normally watch tutorials this long, but this one is just excellent as a crash course. Thanks!

[liamcarnahan]

I love how you say every little vscode "shortcut" you know as you're using it. I end up hearing a bunch that I already know that seem obvious but learning an equal amount of super handy ones that I can't believe I didn't know already

[udaysamsani]

The best go to guide for full stack web dev. Thanks ben for this wonderful resource 🙏🙏

[DouglasThom]

Well that was great. Thank you. I really appreciate you leaving in all the mistakes, debugging, etc. The thought process is way more valuable than the final result. Awesome stuff here.

[mrCetus]

I'm only 20 mins in but this is already such great content. I love how you don't overlook any little thing, especially the little IDE tips like autocompletion with CTRL+space !