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: github.com/benawad/lireddit
Links from video:
Learn vim: benawad.com/vim
How to install PostgreSQL: www.google.com/search?q=how+t...
How to install Redis: www.google.com/search?q=how+t...
Argon2 vs bcrypt: security.stackexchange.com/qu...
React snippets: gist.github.com/benawad/1e9dd...
Simple pagination: github.com/FormidableLabs/urq...
Node.js Docker: nodejs.org/en/docs/guides/nod...
Next Apollo: github.com/adamsoffer/next-ap...
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: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Medium: / benawad
GitHub: github.com/benawad
Twitch: / benawad
Facebook: / benawad97
LinkedIn: / benawad
Instagram: / benawad97
TikTok: / benawad
----
Follow me online: voidpet.com/benawad
#benawad
Go from homeless to full stack FANG developer in one 14 hour tutorial featuring Ben Awad
Lmao.
😂😂😂
Go from a carrot farmer to full stack FANG*
lolol
I used to be a full stack FANG developer, then I watched this video, and now I'm homeless. Thanks a lot Ben.
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.
Thewistle i am getting error in the user.ts resolver --- CannotDetermineGraphQLTypeError: Cannot determine GraphQL output type for 'errors' of 'UserResponse' class. Is the value, that is used as its TS type or explicit type, decorated with a proper decorator or is it a proper output value? How can I fix this
@@thewistle3219 How can I help you? In each part did you get stuck? I am starting now the Session Authentication so if it is before it, just reach me out. :)
@@ViniciusCerqueiraBonifacio yes i have solved it...thanks alot
This is the comment we were searching for.
"l follow you up now too
I have finished today (took me more than 6 month) and got a front-end job a month ago. Thank you Ben!
🎉
@@M.A.Kabir.K dontasktoask
can you provide github repo please?
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.
it's better to solve the errors yourself tho, makes you learn faster when you are forced to solve problems yourself.
@@SpaceMarine113 I believe you are taking a generally true statement and applying it when you should not. We wouldn't be here watching a tutorial if we wanted to learn everything ourselves, nor is that always the best way to learn, for everyone. Especially when some of these errors are so obtuse and amount to not having typed out the whole example because you haven't "played" the rest of the sentence.
@@metropolis10 i remember watching tutorials, learning angular from 0. The dude released the tutorial, and i watched it 4-5 months later. A new version of angular was released, so there were numerous breaking changes, and the code didn't work the way it used to anymore. I was forced to google every single instance where the code didn't work, and find out why it didn't work, and also figure a way to do the same thing, but in the new, correct way. I learned way more in that tutorial than the author originally intended, because of all that googling. So it won't hurt you to solve some problems yourself, even if he solves it 5 seconds later into the tutorial. 90% of programmer's job is googling.
lol do you really think anyone watched this thing. 99% of people watch 5mins then leave
@@SpaceMarine113 are you a carrot farmer then ?
Me before 14 hrs : "Ohh no!! how can I find a job i have no skills" Me after 14 hrs : "Sry Jeff, I can't join your company because I'm joining Google."
But Google uses Angular 😱
@Karen Efereyan Lmao.
it took you 14 hours to do this simple coding challenge? and no unit tests? sorry we've decided not to move forward with your application.
Did it really help that much? I'm thinking to start the same.. Any tips
@@aasthamehtatech it gets your foot in the door. So yeah, have at it!
I can't help but imagine the amount of hours or even days you put into making this 13Hr+ video. Kudos to you. Godspede
He probably put 13 hours into it. Other than the years of coding experience.
rendering and editing a 13 hour video. will take a week at least
@@sadhlife You clearly never did a tutorial. Do you think he did this in one day in one shot?? 13 hours (14 actually) it's only the final edited tutorial. The full work of preparing the tutorial, the whole recording and all the edition afterwards requires way more time, at least a week as other user commented. It must've been HUGE work.
@@SeriesTube01 yeah I hadn't, I'm at hour 6 now and now I know also i was half joking anyway
@@SeriesTube01 plus the time spend preparing all the code, both writing it and researching/re-reading documentation, he's not writing it all out for the 1st time here.
I'm not skipping any ads just to repay this huge effort in some way. Thanks!
I think it works the other way around, when you skip it's when he gains
@@katteos No, when you click it, he gains
@@katteos I think you have to watch it the ad fully so the seller of the ad gets revenue (and maybe also the youtuber gets revenue same way)
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!
14 hours is insane. Can’t imagine the amount of work required to put that together. Thanks Ben!
Udemy: here's a 60hour 200 part series on HTML Ben: Hold my beer...let me supercharge your knowledge
🤣😂 I just have imagined Ben actually doing that! It is so true. Hist tutorial is literally worth more than 20 of crappy udemy 50+ hour courses.
This dude is a software saint!
@@z3glarz Udemy is pretty solid, I love the coding community because you find essentially anything you need for free but having a community that can assist you if you get stuck and teacher assistants at the ready is extremely useful. Udemy provides that. When you have these crash courses, you can become stranded when something isn't working especially at this level of coding. This may be excessive but swhat I'm trying to say is "different strokes for different folks" .
@@MrBEEOUTCH keep in mind there is also a discord server that Ben created. You can ask questions related to this video and get answers there if needed.
@@MrBEEOUTCH i find bens discord to be better than anything on Udemy. That said, Bens material is a bit of an outlier, he really tried to put together the ultimate stack for this point in time and made good decisions on execution. Udemy is great for its own purposes, when you need to go in depth with a certain framework (though you might be better just digging into the docs once youve gotten a holistic start like this).
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.
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!
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.
I think Ben grew a beard during the 14 hour recording
this guy completed 14 hr video in 4 hr...awsome
@@MohitRakhade 😂😂
It's called being a man.
Lol
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!
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.
14 hours?? New level of respect for this! 👏👏
I was like, “Let me take a look at this short video”. Oh. Can’t wait to go through it. Thank you for posting it here for all of us to enjoy. Can’t imagine the effort it took to make.
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
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
The best go to guide for full stack web dev. Thanks ben for this wonderful resource 🙏🙏
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.
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 !
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.
*Wes Bos takes an eternity to update Graphql course* Ben: fine, I'll do it myself (and for free)
That's what I was thinking
what course is this?
@@william3588 advanced react
@@william3588 Last Christmas, Wes Bos said he will soon update his advanced react course. But this Christmas is coming, Wes updated his status and said he is starting to make it a few days ago.
He just released a gatsby course
when i saw 14 hours, my hand automatically subscribe, God bless you mr Ben
This was honestly neat to watch. Was sceptical about length but got hooked by the different approaches to things and some tips I didn't know.
"I'll put a link below if you do not know to configure any of this stuff." links to a google search LMAO
@@shotgun_blammo did you figure it out? still stuck there
@John Hel Gumban yo did you get how he did it
@John Hel Gumban like when he said he configured postgres to his cmd line and it's in the desc, but he just put a link to a google search for "how to install postgres"
@@microwavecoffee It was tough, but I finally got it.
@@Maecrow any tips / resources
Just finsihed! Took about three weeks. Coming from only using React on the frontend and rails on the back made for an interesting experience. Got to say I love coding in only one language. Thanks for the tut!
This is exactly what I'm looking for, cant wait to watch it all the way thru!
This is very comprehensive. I don't normally watch tutorials this long, but this one is just excellent as a crash course. Thanks!
Adding Google search queries in description is so far the best thing, and also something every development tutor on KZhead should start doing.
Finally finished. This is by far the most useful piece of coding instruction I've ever received. There are certain hangups along the way due to minor changes that have occurred since the date of posting, but ultimately I have learned so much from this.
hey if you dont mind, what sort of hangups did you encounter?
@@SaadKhan-xb8un1) mikro-orm.config.ts file needs additional parameter ' allowGlobalContext: true,' 2)createdAt and updatedAt fields need question marks now. createdAt?: ... updatedAt?: 3) don't let the migration name your postgres table 'user' - that is a big no-no, user is a special keyword for pg. 4) need to call 'await apolloServer.start();' after initiateing 'new ApolloServer' and before calling 'applyMiddleware' .
Took me about 2months to finish this. Very solid tutorial! learned so much from it! I had to follow along using the up-to-date official documentations because of deprecations and changelogs, good thing being that it forced me to actually slow down and figure stuff out myself. Thanks ben!!
This is a huge win. I like picking up old tutorials and do exactly that. So helpful.
The differences are much, I quit.
Took me a couple of weeks to do it, but I managed to get all the way to the end. Thanks for the awesome tutorial Ben!
thanks for the tutorial ben! loved how u even took the time to explain little details such as cookies, redis, sessions etc. behind the scenes! thanks a ton!!!
Like to give a shout out to Ben for uploading this masterpiece. It was a couple of years ago when I was jobless and still struggling to learn how to code a fullstack website. Everything seemed to slowly clicked when I chanced upon this tutorial. It was difficult to follow at first, but provided a lot of room for further research and a general path to the libraries and concepts I needed to grow to be a better developer. I would highly recommend anyone who is learning to watch this video and Ben's other videos if you're looking to become a developer.
This is the kind of tutorial I've been looking for. Actually showing best practices, error handling, and setting up with a production mindset. Not enough tutorials actually show this. Cheers Ben!
“Production mindset”, I like it!
Amazing tutorial! Really shows a developer's way of handling issues and working with modern tools while teaching awesome tips and tricks on the way!
You can't imagine how much this is going to help me in my future life. Thank you for this awesome tutorial.
Finished it after 2 days of just going at it hard. Love a Ben Awad tutorial, you can relate to his pain when things don't work compared to the normal scripted tutorials. Learnt some good debugging techniques. Thanks for this! React Native / Flutter one next maybe Ben? :D
Just completed this after a week of doing a few hours each day, Mr. Awad you are a legend, thank you for sharing your knowledge. I went from total GraphQL noob to feeling decently confident on both the frontend and backend after this tutorial. Subscribed and liked
Wait wait wait you completed this whole in ONLY A WEEK!?
Beginning to end. What a wild ride. I will update after the job hunt on how much this paid off! Can't thank you enough for the effort put into this piece.
A true king for creating this. Can't thank you enough for this. Just finished the bare-bones construction of a heatmap generating website thanks to you.
40:04 - Express, Apollo Server Express 1:41:46 - Express session 1:42:55 - Connect Redis 2:03:08 - Sessions Explanation 2:40:30 - CORS 11:59:14 - docker build 12:22:46 - docker push 13:24:56 - Apollo Pagination
3:27:05 Formidable URQL GRAPHQL caching 4:13:00 Forgot password option with nodemailer 5:22:30 Adding information to Posts/ change from mikroorm to typeorm 6:00:54 graphql middleware
More more more I NEED MORE
Reminds me of the old saying by Blaise Pascal. "I would have created a shorter tutorial, but I did not have the time."
watched through about half of it for the techs i used, decided i might as well try and learn all of this, coming back after a crash course binge!
This course is amazing. Im having SO MUCH FUN LEARNING ALL OF THIS. Thanks BEN!!!!!
Only 1 hour in at the moment, but I have to say this is absolutely awesome, Ben. Great content and can't believe it's free. Instant subscribe from me. Thank you very much for making this!
WOW
Hey, cool to see you here !
@@MrMatheus195 you too 😍
Cheguei tarde! O Deschamps ta muito rapido
Ben is CRAAAAAAAAZY dude. btw, Michel Teló! what a surprise!
Bem que tu podia fazer um vídeo assim, pra quem não entende inglês.
Never would I thought that I'do a 14 HOURS long tutorial on youtube, good job man !
I'm so freaking excited about this video that even my husband is excited to hear me talking about it, and he has no clue how to code, I'm a frontend and I wanted to learn how to connect some stuff and I ended up learning more than I expected! good work!
Quick tip: In the section 8:00:53 "GraphQL Fetching Relationships", where Ben writes SQL to grab the "creator" object from the posts, I found a better solution. Using TypeORMs lazy relations, you can create a "creator" field resolver for Post that returns the creator object when it is requested (await post.creator). It makes things much more scalable in my opinion.
Yeah, I finally grinded through it after putting this in my bookmarks the whole time. This is no doubt the best tutorial ever, its a shame that I didn't watch this earlier!
I'm now fully converted to Typescript after following this video. I love it so much and can't wait for your next video!
Long time fan, since the Slack clone tutorial☺Finished it all the way focusing more on NextJS parts! You're so good at what you does!
The content in this 14 hour video is more valuable than a 200 Hr course on Udemy. Ben live codes and narrates, encounters real issues and fixes them, pauses to show alternate means and explains why he chose one over the other. Covers just the right amount of information on the libraries/packages, enough to understand the course, while stimulating learners to explore more. Massive respect!!
for real, this dude is a legend
well what I found on people who only relies on Udemy and nothing else is, they're extremely opinionated over things that are not supposed to be.
This the most valuable tutorial in KZhead right now
I just finished the project. It gave me a great learning experience. I went through it thoroughly and coded it.
Hey Ben! Great tutorial! This is the first video I've seen from your channel. Definitely I'll be giving you a well deserved like and you just got a new subscriber from Venezuela. I just wish I could give you more than one like.
wow! this is an awesome content, might be the best resource in this React/JS/TS era.. thank you!
Ben: gonna release a fullstack tutorial Me: cool, now I have plans for this evening Ben: drops a 14-hours video Me: 😳... Tell everyone I'm busy this whole week
The dude is awesome! Love him.
tell everyone im busy the whole moth lol writing down all the hidden gems
Ben - You are a Beast!! I can not imagine how much effort has gone into making this. Great Work!!
I definitely did not code along with you, but I persevered until the end of the video! Lovely stuff, thank you. I learnt a lot!
Who needs movies binges, all I need is 14 hour fullstack tutorials from Ben. I'm living for this!
14 hours straight 🔥
How have I not seen this. You are a good ben. Bless you. It took me time to warm up to you bc I didn't completely get your sense of humor, but this is legit a great contribution to ppl. Thank you
Just finished the whole tutorial, adapting it to my own hobby project as I went. Really appreciated this tutorial as it was A-Z and showed how lots of pieces fit together. Sometimes I didn't know if I should be mad you had so many errors recorded in the video itself and didn't plan it ahead of time, or if I should be glad to see a fellow dev run into errors and see how you approach debuging them (to an extent). It almost felt like watching you livestream a new project. In the end I think I liked it, even if it probably added an hour or more to the runtime. Great job and thanks again.
Trying to fix the error caused by mikro-orm after testing the unique username field more than once but I guess all that goes away after he changes to typeorm.
OMG Full stack, from my favourite ytber. Thank You So Much Mann! You Are Awesome!
man now i become a full stack FANG developer and your fan number 1 thanks Ben!!
This is the best tutorial of this magnitude that I've seen of anything - ever!
Following this from last 2 hours, Learnt so many new things. Thank you Ben!!
This is next level 🔥 Congrats on producing such good content. Thank you ❤️
Thank you very much for this masterpiece ❤️ I learned so much!
hey Ben, thanks for all what you have doing. Respect!! I finished this course and in the side I was doing it a bit different to match with my project and seems going well so far, didn't deployed it yet, but all seems working fine so far what I have changed it I used my own css, I have been following with Chakra Ui, but needed to do my own css. I cannot wait I finished at least some level and show you. again Thanks for all.
This is dope that you did this. Probably helped a lot of people
I love how these link just makes you google how to install stuff xD
Wow, this was an epic ride, never gonna forget it. The best 14 hours spent on the internet.
I think i’m going to take the plunge.
Learned so much from this. Thanks Ben! Happy to modestly support through Patreon.
This is really awesome tutoring, let me admit, I was like little sceptical about starting to watch being so lengthy video, however after watching this for an hour or so, I thought this is great, I haven't watched it completely yet, however still couldn't wait to write this comment. Ben you are really great, keep it coming, more and more such end to end stuff. I though would suggest to cut them in to playlist or something. Love you dude...
longer than Lord of the rings extended combined
Lol
lol this is the most sensible comparison
really gets you thinking on the sheer amount of work and talent involved in this
Lord of the tutorials.
When I started watching this, I thought wow, that's a good 13 minutes tutorial.
I watched the whole thing, good job me! Thank you Ben for this awesome tut!
Just made it to the end. Thanks for making this freely available!
legend, good luck with your next job search
Started this tutorial in June 2023, I'm 6 hours into it and this is the most I've learnt from any tutorial, did face some issues at the start while setting up the project but worked around it. If you're thinking whether to start this in 2023 or not, you should 100% go for it. If you run into any errors, reply to this comment and I'll try to help you out.
Hi, I dont know Nextjs12 and this tutorial is using Nextjs12, is there any major different between Nextjs 12 and 13 for this project? Or do you have any advice for new Nextjs learner like me?
@@hungsonnguyen862 I think ben uses an older version of Nextjs(v9) which was the latest during the time of tutorial. I didnt know much about Nextjs either but he explains everything in detail. I just followed along with the latest version of Nextjs as using older versions was raising conflicts.
npx tsconfig.json is not working for me
I just want to say thank you Ben. Massive efforts _/\_ Thanks :P
Took a while, but reached the end. This is superb, thank you creating this 👏
The best graphQl with React Typescript I have ever seen
Believe it or not, but I watched the WHOLE video! Amazing work Ben, you just got yourself a new fan! I was wondering if you can make a similar tutorial for setting up infrastructure for this project, what I mean with that is like microservices with heart-beat, various Gateways, etc... And maybe then implement notifications / messaging for users! That would be really awesome to watch! Good job!
Now THIS is the true "full stack" dev tutorial, validating, authentication, front / back-end, full architecture, not those "BUILD A FULL STACK TWITTER CLONE GET HIRED IN 20 MIN" videos
completed the full tutorial, and that was ammazing 14 hours Thanks, I got tons of value
Made it. Took me longer than I'd like to admit, but I made it. Great work, Ben! PS: next-apollo now supports Typescript!
Well. There goes my weekend! It’s me and Ben growing a beard! Using a disposable angular razor to clean up at the end 🪒
i used to watch this channel and now i am in microsoft all thanks to you,
Finished this today. Thanks for the amazing tutorial, Ben
Is this courses outdated? How much time you took to complete this? Any suggestion for new course takers? Thanks
How can anyone dislike that masterpiece? Thank you Ben!
I'm learning to code at the age of 38, I'm old as f*ck for the developers world. This tutorial it's super helpful. It must've been huge work. Thank you very much, Ben. 👏👏👏
You're not alone. 38 here too 😎
@@DNAMIX1 You're not even nearly old enough (actually quite young and not to even think that you're probably experienced in other fields! Just keep your head straight and remember WHY you are learning to code! You may even find points of convergence between your old career/job and your new IT skills! Brave!
@@olasupoodebiyi totally agree with you, what it makes coding into commercial is the key
i did the whole 14 hours!!! congrats to me...and kudos to you Ben for being awesome. Learnt so much!
can you provide your this project git-hub repo please? facing a lots of problem with newer version packages.
Yes can you please give your repo please.
What a great person, Sharing this for free! I cannot say how much grateful I'm. This is What I need, a Next js, GraphQL, TypeScrip course, including Session Authentication, Docker technologies. I have added this to my watch list.
This is GOLD, Ben. Thank you for this.