Build and Deploy a Fullstack Reddit Clone: Next.js 13, React, Tailwind, Auth, Prisma, MySQL

Discord for questions & answers: / discord
GitHub: github.com/joschan21/breadit
Upstash Redis: upstash.com/?Josh2
-- Features
Infinite scrolling for dynamically loading posts
Authentication using NextAuth & Google
Custom feed for authenticated users
Advanced caching using Upstash Redis
Optimistic updates for a great user experience
Modern data fetching using React-Query
A beautiful and highly functional post editor
Image uploads & link previews
Full comment functionality with nested replies
... and much more
To get the most out of this video I highly recommend that you follow along and learn these concepts in this hands-on approach. I'll also link additional resources in case you want to dive deeper into some concepts.
React Query in-depth: • My Favorite Way to Fet...
Parallel and intercepting routes: • When Did NextJS Routin...
Routing and rendering in the new app router: • NextJS App Router: Lea...
Infinite scrolling in-depth: • Loading Your React Dat...
How to use the "FC" snippet I keep using in the video:
Follow the "getting started" instructions here github.com/joschan21/breadit/...
Thanks to Code With Antonio for the thumbnail design inspiration! / @codewithantonio
-- Chapters
0:00 Demo
5:07 Getting started
9:24 Building the Navbar
30:44 Authentication
1:20:15 Building a user-profile menu
1:37:35 Perfecting the authentication flow
1:53:50 Database modeling
2:10:00 Creating subreddits
2:59:33 Subreddit detail page
3:33:47 Joining and leaving subreddits
3:57:00 Creating posts (editor, image upload)
5:02:48 Displaying posts in a feed & infinite scrolling
5:51:25 Voting for posts
6:22:37 Advanced caching: Optimizing post performance
6:42:21 Creating an API for infinite scrolling
6:58:25 Custom feeds for logged in & logged out users
7:09:19 Creating a performance-optimized post detail page
7:37:50 Creating the comments section
8:10:48 Voting for comments
8:18:45 Replying to comments
8:42:54 Creating the search bar
9:05:47 Letting users change their username
9:33:16 Deployment to Vercel
9:40:05 Last tweaks and conclusion

[@joshtriedcoding]

Man I'm really happy to hear you guys enjoy these long projects so much. This video was ridiculous amounts of work but seeing these positive reactions is such a sincere appreciation of that. Cheers. Discord for questions & answers: discord.gg/4vCRMyzgA5 GitHub: github.com/joschan21/breadit

[@vedantbhoyarxd]

We enjoy logprojects because they are detailed and production grade, there's no sense in small projects, from which we can't learn, we need these type of projects. You are awesome. ♥

[@vedantbhoyarxd]

Can you make a project on Next js are frontend and Express js with typescript setup as backend, authentication with credentials and with google both, and auth handling, middlewares, use of access tokens and refresh token securely, as its possible backend server is no another server and frontend on antoher url, please make some according to this.

[@shreyas.sihasane]

This is the best reddit clone I have ever seen. ❤❤ Please use Alt+z for word wrap in vs code, use it in your videos further.😊

[@slythespacecat]

Josh I seriously can't thank you enough for this... you're an absolute rockstar. I never thought I'd be doing something like this. One year ago i didn't know React. Today here I am eheh. This is the second long form video/lesson I watch from you. Did the messaging app as well. Not only you're extremely skilled and good at what you do, I also love the insight you give on everything from organizing files, dos and donts... This is just stellar, top notch content. Thank you so much 🤍

[@WebDevCody]

I’m exhausted just thinking about recording and editing a one hour video, and our man Josh does almost 10 hours. Great work!

[@mazwrld]

i stressed out just to watch it.. i can't imagine what making that is like

[@joshtriedcoding]

Really takes enormous amounts of effort but seeing people so happy about it just makes my day. Appreciate ya man

[@laercionascimento7122]

@@joshtriedcoding ❤

[@codewithantonio]

Amazing video Josh! Crazy amount of work! 🔥

[@eshw23]

You both are gods!

[@hariommahato919]

yup you both are great and i get a. lot of help from your video too Antoni and josh thanks

[@shahariarniloy8935]

You too are amazing

[@joshtriedcoding]

These really are crazy amounts of work. Appreciate you man

[@user-xu1zy7pn2q]

@@joshtriedcoding hey josh how we can do state management if we need?

[@genshian]

Jeez, it’s very rarely I watch a tutorial where I’m learning from the creators mannerisms and ideology. Loving the vibe and it just makes loving learning so much better. Thanks for the positivity and being super open around your personality as a dev.

[@aritrabose8050]

Just the time I needed a project like this, Josh came out with this mindblowing build!!! Great work Josh!!!

[@rohanhazari4642]

This is some top quality content man this deserves more views for sure 🔥especially love the advance caching and optimization which you don't usually find in project tutorials. Keep up the good work !

[@DNAwastaken]

Yes, it was confusing, but I learned a lot more from this confusion than I've ever learned from another tutorial. Cheers to you for making it so in-depth, Josh!

[@mobix25]

MAN. this is what I love to see. just recently i've asked you to make a video for Next 13 and Planetscale, and you really did it. KEEP UP THE GOOD WORK.

[@nwaguchima2280]

Josh!!!!!!!!!!! I feel like screaming!!! I followed and codded till the end. Thank you so much for this. This has been the most intense build I have followed on KZbin. I learned more than I could imagine from one video. It's amazing how in the short time I have been following you, my tech skills have gone up. It's not just the code, it's how you think and see things. Thank you so much man, I am really grateful. I don't think I have missed a single update from you, your videos are amazing, every single one. Thank you, man! it's funny how I had a take-home assessment while I was halfway this project, I did it faster than I had ever done any project. Thank you!!!!!

[@MohanadHani]

Amazing work man! I can't tell you how much I appreciate these long projects videos.

[@t_park]

I've always wondered how Instagram made those pop-up Modals of individual posts whenever I click on a post in my profile page on PC! Learning something new every time I watch your videos, Josh! Thank you so much and keep up the good work :)

[@1val]

pretty satisfying to see stuff from your smaller videos all come together in big ones

[@dongyuexu4823]

This full stack reddit clone tutorial is so comprehensive and amazing, love the final deployment as well! Thanks for your effort, Josh!

[@paramveersingh1673]

Agreed!

[@denvudd4492]

I'm kinda new in web development and especially in Next JS but man your code looks soo clean and awesome, I love it. I learned a lot of cool stuff from this project. I hope you'll keep making this type of videos

[@kazettique]

So many thanks, Josh! I've learned a lot from this long video. Such a marathon but totally worth it!

[@0xDevelopers]

I have not seen a single NextJS video with this good coding practice. Industry standard ! Subscribed!

[@luizsantos9330]

I think Josh tried coding is one the best channels to following along new projects in TS since his projects get less crashes and erros than others

[@thiagoleobons390]

still watching it. looks really good so far, Im a couple hours in and all straight to the point with great helpful tips all over. Thanks, German guy who likes bread!

[@danypell2517]

YES! The larger and the more complex the project is, the better. That is where we truly learn more about stuff that typical tutorials don't show, like architectural decisions, what to do when a file becomes too large etc.

[@usedjjd]

I have problem in Components/ui/button.tsx => The argument of type '({ className, children, variant, isLoading, size, ...props }: ButtonProps, ref: ForwardedRef) => Element' is not assignable to the parameter of type 'ForwardRefRenderFunction'. Unable to assign type 'Element' to type 'ReactElement | null'. Unable to assign type 'undefined' to type 'ReactElement | null'.ts(2345) function({ className, children, variant, isLoading, size, ...props }: ButtonProps, ref: React.ForwardedRef): JSX.Element ?? Can you solve it please thanks

[@ssatriyaa]

Amazing project as always Josh, going to back later when I have time. Definitely a project I would look at as a reference. Thanks

[@aBradAbroad]

This is huge. Nice one. EDIT: Man I was just working on react query and struggling a bit with it, this is so perfect I'm stoked!

[@ernst367]

What a huge project 🎉 Really appreciate your work Josh! Inspiring

[@andresgutgon]

This is the long video more helpful I have seen in a long time. Awesome!

[@mimi2362]

Thank you Josh. It's help me a lot while I starting learn NextJS and TS.

[@yousafsabir7]

Been waiting for this. A lot of beginners only courses out there, but you're here to save the day

[@developwithindra]

Just completed the project learnt a lot, thank you :)

[@JoeBuza]

Amazing walkthrough, Josh. I like that you are striving to create prod ready videos

[@ryanpleava9802]

This tutorial is so amazing. Keep up the awesome work!

[@sheddy845]

Thanks alot for this josh ive been looking for where to learn alot of the new next13 features and you popped up 😁 Thanks alot again, gained a lot from this one little thing i recreated your project but my initial post from the server kept been overwritten then i checked the docs and found out you just have to set enabled:false in your useInfiniteQuery config just incase anyone runs into that problem

[@aliplaysgtr]

I'll start this one asap, looks fantastic. Good job man!

[@DannyONealCodes]

Amazing! How does Josh have only 35k subscribers? There are a lot of developers missing out.

[@acemanftw]

Thank you so much, this is crazy good! I can't believe this tutorial is free, you're a champ bro :)

[@code.design]

This is really awesome Please consider doing a video about a multilanguage blog in next (with translated slug - Utterly important for SEO), using a headless cms such as hygraph. There are zero tutorials out there, but it is one of the most googled questions out there. Thanks!

[@besizzo]

oh boi, this is extremely lucky timing for me. currently skimming through next docs, definitely watch this next!

[@giuseppemartinelli880]

I needed a project like this! Great work and effort, awesome to see the passion you put to make this incredibly useful videos!

[@joshtriedcoding]

Appreciate ya man

[@timbobs666]

just watched the intro, looks insane, will do 100%, congrats.

[@BarisPalabiyik]

This is amazing man. These projects make me want to give back to the community like you do. I am planning for a studio for recordings and setup. Internet taught me a lot, wanna give some back. Keep it up.

[@elpolodiablo5486]

Good luck on your journey 🎉

[@mohammedsaad0761]

Good luck man ! let us know when you start the channel, we will support you ❤

[@savit3r]

Josh I wish if you could make a video on how to fix typescript being so slow, I get “loading...” all time when I work on Next JS tsx project. Till this day I couldn’t find is causing this problem!

[@joshtriedcoding]

Wishing you all the best for that man

[@outis99]

@@savit3r It slows me down so much I swear... Tbh I think it's because of my PC being pretty outdated nowadays

[@ufuomaonecha9815]

really love this your video.. trying to work on the crud operation with editor js using next js but currently having lot of problems with the editing part.

[@saman6199]

Josh, mate this is super amazing, thanks so much, really appreciate your hard work. You are da best ❤

[@MehediHassan-pn5uc]

Thank you Josh for Bringing Enterprise Level Projects to Us! ❤️

[@MilindMishra]

mindblowing, hats off to the tremendous effort Josh!

[@aumbattul2268]

Completed my project today. Learned a lot of new things. Your explanations and the way you go through each line of code is on point. Thankyou so much for this amazing course. Looking for more such content❤

[@giramtanmaybhaskar8765]

Did you deploy it without any issue ? If so can you share the link

[@maureenj1]

Loved it! Thanks for the effort you put in these videos.

[@fstywandev]

Amazing project bro!, you help me a lot learning fullstack! Thank you very much!

[@pedrorego1443]

one of the best videos i ever seen about the current state of art stack thank you so much

[@developer_hadi]

This is awesome, I will watch it after finishing Dave gray's next js course

[@ayushjain7023]

Amazing video Josh, just one change expected is to not use const queryClient = new QueryClient() Inside providers component, instead either declare it outside or use state or ref instead, this ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle as per tanstack query docs 😊

[@carmelshores2658]

Thank you for sharing such PRO TIPS to constrict the scope of user data from spilling outside of its target return.

[@gastrader9993]

Can you explain the changes this would result in? Or what should be done exactly?

[@miguelangelmadronerosequei9517]

​@@gastrader9993x2

[@nithin3476]

so you are saying not to create a separate component for it instead to directly use that in layout.tsx??

[@seyadeodin]

@@nithin3476 no, he is saying to either declare it outside the component function or inside a useref

[@MrLT-vf3wr]

Fantastic work here Josh, I've learned quite a bit. I added credentials authentication along with using a server action to handle the registration in my implementation as well, just for giggles. @1:40:45 This is now fixed in Typescript 5.1.3 and @types/react 18.2.12 so update your packages and you can remove the hack.

[@spazzels50]

Thanks for the video just finished the project!

[@timeforrice]

Love that he explains very well and clearly!!!

[@stevy.188]

Finally finished it, great work!

[@sujjee]

Hey Josh, I love your videos! They are very helpful for someone like me who wants to learn advanced concepts. Thank you for being a great tutor for those who can’t afford paid courses. 👏

[@joshtriedcoding]

Cheers dude

[@afaqahmad8918]

@@joshtriedcoding i dont know mysql can i go with this ?

[@0kidflash0]

@@afaqahmad8918this will teach you prisma which took out the headache of dealing with mysql like it did for me

[@gaworap]

That was a journey! Big thanks to you for creating this huuuge video

[@TheTanimou]

DUDE I even didn't finish the realtime chat app and you already posted a new long project.😂 you so fast. Btw you do great job appreciate that and keep going

[@curious_cat505]

This probably took a lot of time and effort. Nice. I've subscribed!

[@YuuffyLIVE]

Just to let you know that I really appreciate the hard work you put into your projects.

[@joshtriedcoding]

Thank you dude

[@0b3ryn29]

great timing. just what I needed, a reference proj, aside from shadcn/taxonomy

[@MeatCatCheesyBlaster]

This is a great video Josh. And wow your channel has really really taken off since I started following.

[@zorrobasher2947]

this man so good they teach is so amazing ,i understand and before them ,i not watch long tutorial because is boring but after i watch him i enjoyed ,this is so interesting thanks Josh :)

[@zivtamary]

Let's go! 🔥 amazing project Josh!

[@Yahya_Umar]

Great video! Any plans for a Next.js inventory management tutorial? Your Next.js tutorials are fantastic, and I'd love to see one on this topic!

[@8koi245]

Had am interview and got send this video a a Bible of good practices, That's a compliment if I have ever seen one!!! congrats!!

[@abhilasha231]

Dude this is Code as Art. I have been learning through tutorials by Code with Antonio & JSMastery and both the guys are AMAZING. But you are not just coding, you are CREATING ART. Some functions, or ways you have executed things - just art. WOW Need more long very long tutorials Josh please. I'd love to do a Github clone or Linkedin clone - two of the longest running platforms. Eagerly waiting for the next drop. Lots of Love & Respect from India.

[@dibuzzz3920]

Thank you josh, I really like that you starting with auth.

[@yeabsra3182]

Thank you so much Josh 🙌You leveled up my next.js skill

[@0xatul]

Good video, I love how indepth you went for the application. Very few videos with indepth content

[@thesobercoder]

Love your videos, Josh! Would love to see a long form video from you using Deno KV and Fresh.

[@wakibtz7134]

YOU ARE THE BEST JOSH. I tried finded video like that long time

[@mihaillepadatu8256]

Perfect timing. Builiding something similar with Web3 authentication and signed announcements created with Editor.js. Keep it up bro🫡

[@alexiglesias3464]

Woow, uploaded 2 hours ago ... I know what to do this weekend :D Thanks for this buddy!

[@riveto_ir]

WOW Josh! Loved it! very informative and educative 😀 I took note and I learned a lot! Lots of tiny details to Large concepts like Rich text Editor! thanks Josh 🥰🥰🥰🥰🥰

[@mostakahamed6169]

You are doing just mind blowing job. I appreciate u.

[@spikezhang2161]

I really appreciate your videos! I am still confused about the session and jwt in Next-Auth. Hope you can make a video explaining everything about the Next-Auth configuration and terms like session token, access token, session, session cookie...

[@aadarsh9845]

Finallyy!!!! Done with this, amazing course overall,

[@andresgutgon]

I can't believe I watched all the video. Amazing work!

[@datkumar1024]

Took me 2.5 weeks to finish this but i feel i gained a solid understanding of building full-stack nextjs apps now and i thank you for putting in so much effort in your videos

[@myselfashutosh]

Bro I don't know much of typescript should I start watching this project

[@datkumar1024]

@@myselfashutosh You should at least be decent in JavaScript. Watch a small guide video on basics of TS and then you can start this tutorial

[@myselfashutosh]

@@datkumar1024 yep I already know js till advance topics like promises , async await , closures etc but I don't know ts

[@datkumar1024]

@@myselfashutosh Watch any introductory guide video on TS. Start building. Refer documentation and other resources when you're stuck

[@HIGHLIGHTSDBD]

hi, I've been following your channel for the second month, great videos and coding skills, thanks for the content

[@FullStackDevGreg]

I can't wait to do this with you, thank you Sir

[@oscarmugambi]

This is going to be awesome! Thanks Josh

[@IoanAlexandruAndrei]

All this knowledge for free, it`s crazy! Thanks!

[@snsa_kscc]

Banger! 🔥🔥🔥 Thanks, Josh!

[@0kidflash0]

I’m new to coding and this is the biggest project I’ve ever followed because I liked the idea of having a personal Reddit clone to share with my friends. Let me tell you my friend, it feels good to be working on a large project like this and to get a glimpse of what goes on in a real large scale project. I’ve already learned so much so I can’t thank you enough. I will be going through each concept of this project until I have an understanding of them. Again, thank you for this!

[@pragadees_]

Hey there, I'm trying this for my college project. Does this work with multiple users and just like reddit ? Please explain cuz i need to demonstrate this in front of a 100 people😂

[@sven-o]

Sehr nice! Als ERP-Entwickler der eigentlich gern in die Webentwicklung möchte ist sowas Gold wert, danke fürs uploaden!

[@DestinoDello]

Omg thank you so much been looking for this 😢

[@juviess]

Great work!

[@rushikeshkhilari4662]

just what needed after the next 13 release!

[@metaeducation6813]

extremely quality content josh, Thank you

[@koltuz]

Muchas gracias por estos videos, ya tengo algo que hacer este fin de semana :)

[@Englishmusic-qi9fp]

Josh today work is unbelievable . Thanks a lot

[@jongseoklee9477]

wow... incredible video.. thank you!

[@exploringcrypto6609]

wow, Josh, your voice is so clean. it pleasure to listean to you.

[@vatansrivastava7279]

you are burning youtube with these high quality videos

[@peteregbujie]

From the bottom of my heart, thank you.

[@yacinezahidi7206]

Great great content Brudi ! Keep the good stuff up

[@chillydoog]

Wholy smokies! Im gonna build this rn. Thanks big dog💖

[@user-uz8um6ur4k]

Nice One... More hours for more and more learning.. Thanks mate

[@chizaa38]

Wow! Thank you Josh🙏

[@syth-1]

I knew it was a matter of time this tutorial will be made after the real time chat app tutorial and the recent Reddit shenanigans

[@owszystkim5415]

Hey Josh very cool video. Could you build in future tests to this project. It would be nice to see, because there are no videos showing how to test bigger apps in practice.

[@akuoko_konadu]

Thank you Josh 🎉, you're a blessing