Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI - Full Course

[@shadmerhi]

Thank you @freecodecamp for sharing! Also, I just recently upgraded the project source code from Next 12 to Next 13 and it functions exactly as it does in the tutorial, using the same patterns taught in the tutorial, so all viewers can safely proceed with the build using all latest package dependencies 🚀

[@eaglesrockbooya]

Newbie trying it out on Next 13 and get this error compiling once I start installing the chakra around the 19min mark TypeError: Cannot read properties of null (reading 'useMemo') Call Stack useMemo file:/Users/x/node_modules/react/cjs/react.development.js (1650:21) ThemeProvider file:/Users/x/node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs (14:25)

[@slemansafiah8588]

i am glad to hear this , all the best bro

[@Almighty_Flat_Earth]

React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated. Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening. Svelte and react have confusing code. Developer experience matters.

[@Almighty_Flat_Earth]

React is f nonsense library no one asked for. React is a tyrant, makes web development unnecessarily complicated with its weird and alien syntax.

[@shadmerhi]

@@eaglesrockbooya Are you using the app directory?

[@鎮安陳-n4r]

Awesome! Thank you very much Shadee. I'm a frontend developer & learner from Taiwan, who has been benefited from generous people like you on the web for my dev carrer. Cheers!

[@MsSharayu]

This is an awesome Project, it's been a month and I have completed 65% of it. Happy so far. Highly recommended.

[@ksjitendra18]

I have completed this whole series from the Shadee's channel and trust me this is by far the best project video. This is bit towards intermediate level project so give time to it.

[@Johnsonwingus]

This is awesome, gonna save this for when I start learning react. Currently learning native JavaScript so I'll make it here eventually, don't delete this video! :D

[@dadodelgado1996]

1:26:40 Visual Studio Code also has a feature to format your text, just press f1 and type "snake" or "upper case" and it shows you the option to transform your current selected text easily

[@CharlExMachina]

In 1:13:17, an alternative solution is to use the gap property. You could pass gap={1} as a prop in the component and achieve the same effect

[@LetsFly96]

Thank you for this! Trying to create an app with similar functionality and this has perfect timing :) Happy to see some up-to-date Firebase info as well. I'm about an hour in and excited to complete this project!

[@waqarhaq5280]

what's your progress so far ?

[@devhammed]

Thanks!

[@maxmi3091]

Incredible that you provide this for free. Thank you very much, I will do the course as soon as I have time.

[@taurohkea2169]

he didnt only create the whole app but also speedrun it :D amazing!

[@Bigfoot_With_Internet_Access]

Cool now I can make my own reddit and call it "good reddit"

[@TickingBombCom]

Quick question... do you think you could make a strip down version... where it would strictly be a subreddit... I'm looking to create a forum on my website. I always thought it would be awesome to have my own "SubReddit." I know nothing about code... Thoughts?

[@Bigfoot_With_Internet_Access]

​@@TickingBombCom that's probably possible, depending on what exactly you mean by having your own subreddit om your site. But I don't really know anything about web development. I'm sure someone else in these comments could probably give you some real info on how to do that though

[@katyushha_]

better reddit

[@hrithiksingh73]

​@@katyushha_ i am creating a better reddit, and called re-reddit but confuse about what to build first mobile or web

[@aldrinseanpereira140]

This seems like a really fun project to build! I love it!

[@INAVACL]

Will always appreciate these FULL courses that arent split into parts thanks!

[@ShrivastavAditya]

Hey Guys, If you are getting a typescript error @1:30:00 after writing the line "const app = !getApps().length ? initializeApp(firebaseConfig) : getApps();" then change that line to """ let app; if (!getApps().length) { app = initializeApp(firebaseConfig); } else { app = getApp(); } """ This will solve the error and you will be able to use app in all functions like firestore(), auth(), storage(), getAnalytic() etc.

[@User-w8t4t]

Masterpiece, included many many skills

[@BotsOne]

Awesome tutorial! I was able to follow it to the end using NextJS 13 without too many discrepancies. I'm going to continue to develop it out and add new features so that I can get better at React and NextJS. Thanks again @shadmerhi

[@adeleke5140]

Love that you made this Shadee. Currently taking it right now.

[@adeleke5140]

haven't finished yet but would be finishing this week

[@prasannasahoo0806]

Just checking on you...did you finish it ?​@@adeleke5140

[@kevin73911]

Finished watching this. Nice tutorial for nextjs. Thank you. ;)

[@bkatsevych]

I've found Shad's channel several weeks ago, didn't expect him to show up on fCC that quickly, my congrats.

[@ascyrax8507]

perfect timing. i was looking for something like this

[@charliewang6041]

Please make a video on how to convert this project and others like it into Next 13 with the App Router and all the other new features. A lot of people (including me) would really appreciate it.

[@codewithguillaume]

Woooow ! Loving it ❤

[@charliewang6041]

This tutorial is a life-saver!! I've been learning web development for only half a year, trying to make a website for my school. Reddit is the closest website out there to the one I'm trying to make, and this tutorial uses the exact tech stack I was hoping for. Thank you so much Shadee for making this tutorial and freeCodeCamp for bringing it to my attention. :)

[@clippy5394]

nextjs 12 is outdated already

[@rawwwwwr]

thanks, rlly appreciate your contribution to free education.

[@ssm2015_ita]

As usual amazing work done by freeCodeCamp

[@infiniterush]

This might be one of the biggest projects that I've seen from Freecodecamp. Thanks aloooooot.🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@iamnisc]

Yeah Bahubali

[@Khang-rr8td]

Thank you for your dedication to helping people learn and grow. Your contributions are truly appreciated.

[@TheEndOfMadness]

ONLY 3K LIKES??? SO UNDERRATED. GREAT WORK BUD.

[@TomMeadowsFox]

what an awesome project. I didnt get to it yet, but im assuming there is no branching comments (ie comment of the comment of the comment). its such an essential element of reddit, and is a bit complex in terms of UI (it seems pretty dynamic). would love to see an update to this with that element! edit- nevermind he has the nested comments on his own youtube page!

[@madeonearthbyhumans]

Few,,, Cool.., I'll back when my popcorns 🍿 ready🥤 this is my Netflix version... marathon

[@sergeybrin1326]

Ah yes I can absolutely customize my reddit EVERYTHING I WANT

[@changmetellus3052]

Amazing tutorial 🙌🏽

[@sidd_sarkar]

The comment thread part i was looking for. Would be better if added.

[@grotsunfull]

Great content!

[@techwithulises]

Excelente video 👍

[@maskman4821]

Shadmerhi's channel is really awesome, all the projects UI are beautifully designed, fully responsive and production ready. I like chat app the most because it is the best chat app we can ever have anywhere, and now we have the almost identical reddit clone, trully amazing, I will definitely make time watcging the full video and build it, thank you Shadmerhi for the best quality content 🙏🙏🙏

[@amaanullah13]

You guys are life saviour♥️

[@philcurran8306]

Looks cool; excited to get started on this. One question first though; is the result 'multi-tenant,' meaning can multiple people theoretically login and use it with distinct accounts and database entries?

[@slemansafiah8588]

i think this looks great , but i hope also next video to be on next 13 because it has a major changes even though it is on beta and to many things will changes in the coming days

[@stcattc]

So all tutorials are meant to be created on beta software 😂

[@slemansafiah8588]

@@stcattc i don't mean that 😂😂😂 But a lot of devs have issues with next 13 so that the case 😁😁

[@adeleke5140]

Is there a reason for using next 13?

[@hazadus]

@@adeleke5140 No.

[@JJDK485]

Wow. What a miracle!

[@devsilva7155]

Wow a tiktok clone with nextjs and firebase would be awesome, upload videos, likes, comments, shares, profile page, and authentication

[@kunzhang6927]

amazing video, Thank you for this!

[@satwikagarwal3736]

finally completed . took me way too long. Thank you @shadmerhi for this amazing tutorial.

[@juanpasalagua2402]

Kudos to you broda!!!! :)

[@harshkanojia8419]

For those who dont know this is the previous version of next js - 12.1.0

[@TomMeadowsFox]

you guys should always provide the code editor color scheme and font!

[@waqarhaq5280]

5:51:00 cant we use transaction here? so that if image is uploaded and document is created we get post or nothing else?

[@yantech.4249]

Amazing tutorial

[@history3042]

Thanks. This will be useful

[@bestAIUser]

Perfect🎉❤

[@marloncruz5892]

will it work if i go back to the Spark plan? Great Course! Love it

[@microwavecoffee]

Great vid but unfortunately the vote system suffers from race conditions. You can easily manipulate the number of votes for a post through simply spamming the upvotes (as two consecutive requests can be overlapped, leading to inconsistent votes). edit: If anyone wants a solution to this issue, you must switch from using batched writes to a transaction. The reason this works is that transactions can both read and write, and hence you can do your checks for data consistency with your reads followed by your writes (also internally Firestore makes sure that if the data changes while the transaction runs, it retries from the start, hence preventing race conditions). See the "Aggregation Queries" Firestore documentation page for an example implementation.

[@prakash-niroula]

thanx mate, that's actually a very important security risk if applied on delicate things

[@microwavecoffee]

@@prakash-niroula Yeah it's crucial to avoid race conditions in all situations

[@kovbenyaalexander5426]

11:16:51 e.stopPropagation didnt prevent event bubbling. how can i solve this problem? usually stopPropagation always helped

[@ShivaM-wg9qc]

hey have you figured out the soultion actually i am facing the same issue any help is appriciated.

[@kovbenyaalexander5426]

​@@ShivaM-wg9qc I don't know how to solve this problem. sorry man

[@ShivaM-wg9qc]

No worries 🙌🏻

[@aaronbrown9816]

@@ShivaM-wg9qc have you tried using e.preventDefault instead ?

[@juanpardo8551]

Does anyone know how to refactor the ssr at minute 4:00:00, because ssr in next13 doesn't work anymore

[@abhijitmanna4524]

same issue, thank you for commenting server side rendering no more working any fix ?

[@Jonasgranlof]

Same here, did you manage to solve it?

[@abhijitmanna4524]

Likely it has been changed like it will only work in prod mode no more in dev mode and if you want in dev mode still not clear I watched various stackoverflow posts, nextjs docs, they didn't changed the docs actually

[@Jonasgranlof]

@@abhijitmanna4524 Yeah same here, haven't been able to solve it still which is pretty annoying...

[@abhijitmanna4524]

@@Jonasgranlof can you implement getServerSession and check if it is working instead of getServerSideProps please do tell if it works

[@dbruddy]

WOW Amanzing

[@rs4267]

Can i start this course without knowning redux ? Thank you so much for your work, i hope i'll learn a lot from this tutorial !

[@cevdet-gt3uu]

I recognize Shadee and he is one of the best indoctrinators. I highly recommend checking his KZbin channel

[@Nihilist_Porcupine]

Assuming you're not a native English speaker: I think you mean "educators" not "indoctrinators". Indoctrination has a much more negative meaning than you were probably intending. Education is learning about objective, provable reality and fact. Indoctrination is learning "facts" that may or may not be true, and believing in them without having valid evidence. So, calling someone an "indoctrinator" is not a compliment, whereas calling someone an "educator" is a more neutral (and sometimes positive) statement. I hope that makes sense.

[@cevdet-gt3uu]

@@Nihilist_Porcupine thanks for Information and you guessed right i am not a native speaker :)

[@satwikagarwal3736]

I am making this project in next13 app directory instead of the pages director and at 3:50:12 instead of using getServerSideProps i used next13's generateStaticParams to do ISR but it seem to cause react hydration errors i can't understand . Can someone help me out, i am stuck?

[@Sukawheatloaf]

Can you explain how you fix this error. I'm getting the same thing.

[@cj1871]

Thanks so much for this course! Does anyone know if there are any other advantages to using the Cloud functions approach rather than the useEffect way, other than less code to write/maintain?

[@akshayagarwal9311]

Can someone tell me the pre-requisites required for this course? Do you need to have a good grasp on the mentioned tech-stack or a beginner would be able to follow along?

[@MsSharayu]

I have a question, why didn't you use nextAuth functionality instead of firebaseAuth?

[@AmanKhan-bw3rt]

awesome awesome

[@owensofcode]

Thanks alot

[@jeandesauw7646]

That's a little "meeh" its not Next.js 13, but everything else seems amazing, HUGE THANKS for providing it for free as always !

[@AmanKhan-bw3rt]

5:32:10 if disabled button not working then use isDisabled={}

[@ugbanawaji]

is there a way to swap out chakra ui in favour of bootstrap 5? just for customization purpose though and how to with plain old css

[@mahendranath2504]

Thank you so much for the awesome content ✨✨👏👏😍😍🙌🙌👍👍👌👌🤩🤩✌✌🐱‍🏍🐱‍🏍🎉🎉😊😊

[@antontyronchik496]

Hi guys, do u know why author used chakra Image instead of next/image?

[@TomMeadowsFox]

can you share your font and vscode theme? i like to match when i follow along!

[@mocambiquemaputomatola8238]

Hi bro, can you develop reddit clone using prisma nextjs typescrupt and tailwind please, like updated reddit clone?

[@Hacking-NASSA-with-HTML]

Hello 👋 Sir, maybe you could make a tutorial on how to make a MERN simple blog, with images stored in a Cloudinary 🤗🙏?

[@adjust6744]

Celebrate birthday or do this tutorial? Maybe celebrate by doing tutorial. FCC is the best

[@frogfox9577]

Hi, it's with nextJS 12 or 13 ?

[@hooyah]

why that repo is edited 10 months ago? has anyone watched it? and can this be implemented with the new version of dependencies?

[@jovan4614]

Nextjs 12 is outdated!

[@yoshy3263]

You can install older version, and do the video like I have

[@webcoder9029]

Awesome helpful video #webcoder

[@musabmomin9906]

hey, I am following this course and stuck on adding community snippet to my existing user. The problem is when I am trying to add sub collection of communitySnippet. it is getting added as separate document in users collection. I following the code line by line. if you can help me pls help me out.

[@hrithikwins]

It's on nextjs 12 :D Edit: Updated on 13. check pined cmmnt

[@VedashreeBhat]

I am getting issue with extendTheme. Module '"@chakra-ui/react"' has no exported member 'extendTheme'. ---> This is the error, I tried everything, reinstalling chakra, clearing cache everything!! Then too same error is there. Can someone help me?

[@jaymahakaal5354]

Chakra🕉️🔱

[@abdelrahmanmostafa9489]

what's the difference between get and getDoc

[@fahadullakhan1793]

"getServerSideProps" is not supported......how can I fix this?

[@TickingBombCom]

I'm looking to hire a developer that could create a SubReddit... I'm not looking to create the whole website... thoughts? Possible using this method? A stripped down model of this concept?

[@z52ontop]

Time stamp for me: 27:21

[@sibirajvibrosvlog]

Hi iam from tamilnadu

[@pira9850]

Woah

[@meetabhashiniparida9417]

What is chakra ui all about?

[@sanidhya5433]

Is it responsive ?

[@ojasvisingh786]

🤩✨🥳🥳👏👏👏

[@MissDepronBlack]

I'm having issues when compiling this - the error points to an issue with importing Global CSS from files other than the Custom , and asking for import traces on the @fontsource modules and chakra theme.ts file. Anyone else seeing this issue? Googled my butt off already, but nothing seems to fix the issue. Please help.

[@dawitsileshi5946]

No way !!!

[@ledgeplayz7640]

Is this web or app?

[@MohyeMahmoudFawzy]

May you make a website project like Amazon or Ali Express with laravel angular postgresql. Thanks free code camp for your efforts

[@rishiraj2548]

👍👍👍

[@raki0125]

What is the pre requisite i know react

[@sir.dookie5827]

javascript, html, css

[@zeonos]

Might be time to actually do this for real now that Reddit is starting to destroy their own website with insane API prices.

[@charliewang6041]

What should we already know before watching this video?

[@abhijitmanna4524]

my getServerSideProps not working pls help

[@timtom4154]

Is it good time to start programming as have completed my undergraduation in civil or else go in civil. As ai is thriving day by day. Can any one suggest me

[@Nihilist_Porcupine]

If you want to learn AI stuff, web development isn't really the best place to start. There's a cool Machine Learning for Everyone class that FCC offers that might be of more interest to you: kzbin.info/www/bejne/n5CvqK2Ii7VqmMk. I'd look at that and see if you like it before making any big decisions.