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

[@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 🤍

[@evansensteen7000]

what about (@editorjs/video upload)

[@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

[@mahatohariom]

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

[@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!!!!!

[@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

[@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

[@breakinggood-r2v]

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

[@seyadeodin]

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

[@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

[@shreyanshsrivastava4349]

Hey I'm currently following this project, and I'm running into some problems, can we connect?

[@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

[@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.

[@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.

[@0xDevelopers]

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

[@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!

[@vatansrivastava7279]

you are burning youtube with these high quality videos

[@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!!

[@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

[@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😂

[@kazettique]

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

[@andreyzinchenko6208]

Josh, very good, thank you! Would propose a new proj for you to implement. Consists of 2 modules: - Nextjs 13 full-stack module, running some services for a customer (say, a user app) - AI LLM module, specifically trained/indexed for the user app, used by dev/test/support teams to evolve/maintain the user app (let's call it a side-car app). Side car app requirements might be as follows: 1. UI for pts 2-5 below. 2. Further enhancement/development of the user app according to customer's new requirements (input to the side-car); 3. Searching docs on the user app codebase (funcs, classes, etc) 4. Creating test cases for the user app 5. Analizing the user app logs (maybe reacting in real time, changing the app's settings, re-loading, etc.) In the future if we learn how to create such supplements for user apps I beleve we make a huge difference in automation..

[@DannyONealCodes]

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

[@TomGirshovsky]

Dude your'e awesome! you literally woke up in the morning and kept recording the video 6:56:34, You helped me a loooot! 🏆

[@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 :)

[@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!

[@developwithindra]

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

[@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

[@NikitaDrokin]

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!

[@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

[@aadarsh9845]

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

[@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

[@TheFuneralmask]

Just in case anyone was having trouble with creating subreddits at around 2:46:36. I ran my computer's terminal in administrator mode (not vscode's terminal) and used "npx prisma db push" and then "npx prisma generate" and that fixed it

[@hashira_d]

God bless you!

[@SeattleSpursFan1882]

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.

[@vikastriedcoding]

done and dusted, took me more than 2 weeks! Thank you Josh

[@nisargjaiswal4264]

Planet Scale is paid now, Which database did you use?

[@AvikNayak_]

@@nisargjaiswal4264 use supabase

[@YuuffyLIVE]

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

[@joshtriedcoding]

Thank you dude

[@pedrorego1443]

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

[@aritrabose8050]

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

[@sven-o]

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

[@snivels]

Just in time for Reddit's collapse

[@samiullahsheikh5015]

😂

[@chessknock17]

Lmao

[@orionRuse]

I literally came here to see this comment.

[@blessingz]

😅

[@KhairulHidayat]

😭😭🤣🤣

[@VATNIK-KILLER]

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

[@andresgutgon]

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

[@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!

[@1val]

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

[@codinginflow]

Now that Reddit is striking we can build our own Reddit!

[@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.

[@yousafsabir7]

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

[@ЕжЕжиков-в9ь]

Hi, Josh! Let me express my sincere gratitude for all your next.js apps you share with! You`re not playing a great man. You are a Great Man! Just Keep on with your courses!

[@mihaillepadatu8256]

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

[@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

[@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

[@johnsondsouza4722]

This is just for my reference Bookmark 46:15 1:19:45 1:34:00 1:37:40

[@spazzels50]

Thanks for the video just finished the project!

[@pranjalagnihotri6072]

Just 1 minute in the video and remembered 2 years ago Ben Awad did a 13 hours long video where he built Reddit clone using Next.JS + Graphql would be fun to do this again 2 years later with new features in NextJS 💚

[@gerald-abuchi]

Benjamin Awad is a legend.

[@developer_hadi]

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

[@anonimato1987]

Seeing how even Josh forgets to sign in when testing the subreddit creation means there's still some hope for me XD

[@mimi2362]

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

[@exploringcrypto6609]

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

[@acemanftw]

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

[@timeforrice]

Love that he explains very well and clearly!!!

[@sibaldh5763]

I just watched the part about authentication flow 1:37:35 . When you get the sign in modal, then hard refresh, and then click the signUp, you again get the modal. I know that is the purpose, but I think when you are on the hard-refreshed-signIn and want to sign up you should get the hard-refreshed-signUp page instead. Is there a way to prevent the route catch? Also. If you click the 'New to Breadit? Sign Up" and "Already a Breadittor? Sign In" a bunch the modals will stack on top of each other. Meaning if you want to close the model. You go back through the cycle until you have closed all the modals.

[@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 🥰🥰🥰🥰🥰

[@xiiEJRAM]

You are an epic and masterful developer. I gained a lot of knowledge from watching this video, and I've noted every tip from you in Notion. Words can't describe the immense amount of knowledge you've provided me through this video. Thank you a lot.

[@xiiEJRAM]

The like vote functionality is blow my mind I never thoughts it could be like this

[@gaworap]

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

[@JoeBuza]

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

[@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!

[@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 :)

[@nyxcatakemichi6469]

Hello guys, im from Indonesia. my English listening is bad. i reckon that it would be great if KZbin created the subtitle for this awesome video. I love the way he teach, details and beginner friendly🎉 🙏

[@ernst367]

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

[@aliplaysgtr]

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

[@MeatCatCheesyBlaster]

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

[@besizzo]

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

[@curious_cat505]

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

[@jovincebrillantes1042]

I don't know how KZbin's algorithm brought me here, but I'm glad it did...

[@alexiglesias3464]

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

[@wakibtz7134]

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

[@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

[@dibuzzz3920]

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

[@0xatul]

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

[@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

[@MohanadHani]

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

[@danotwitch]

6:55:05 "You're waking up in 7 hours, at 4:50 AM" 😨

[@andresgutgon]

I can't believe I watched all the video. Amazing 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

[@RokietPL]

For those for whom the modal doesn't work with the error(Application error: a client-side exception has occurred), Update your nextjs and then delete the .next directory, once it's up and running it should work.

[@aguud]

thanks

[@thiagoneves50]

Thank you!

[@Sayantan_627]

You saved me bro. It cost me 2 hrs of debugging and then find your comment. Thank you

[@IoanAlexandruAndrei]

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

[@rushikeshkhilari4662]

just what needed after the next 13 release!

[@ryanpleava9802]

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

[@0b3ryn29]

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

[@yeabsra3182]

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

[@ichiroutakashima4503]

Josh, this might sound weird. But, I love you man. And thank you.

[@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 !

[@MilindMishra]

mindblowing, hats off to the tremendous effort Josh!

[@mostakahamed6169]

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

[@koltuz]

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

[@fstywandev]

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

[@Englishmusic-qi9fp]

Josh today work is unbelievable . Thanks a lot

[@nunopereira1772]

hot damn Josh, blew it out of the park with this one. Love to see it, one of the best content creators for the web dev community 😀

[@joshtriedcoding]

That's a very high praise man. Cheers

[@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!

[@stevy.188]

Finally finished it, great work!

[@MartyFitz-108]

Did you have to tweak uploadthing? I am struggling with that. Tried going down the s3 bucket route but and struggling there too!

[@nisargjaiswal4264]

PlanetScale Database is paid now, which database did you use?

[@maureenj1]

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

[@Fragmin4]

So you've just become the new Ben Awad. Great job Josh!

[@ogbillity]

From the bottom of my heart, thank you.

[@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.