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

Learn to build a Reddit clone from scratch using React, Firebase, Next.js, Chakra UI, and TypeScript. The application features authentication, Firestore database, cloud functions, security rules, Transactions, deployment, and more.
✏️ This course was created by @shadmerhi .
💻 Code: github.com/shadeemerhi/reddit...
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & Project Demo
⌨️ (0:08:25) Begin Project (Preface, Create Next App, Next.js fundamental concepts: pages and client-side routing)
⌨️ (0:11:26) Core package installations (Chakra-React, Firebase, Recoil) and & ChakraProvider setup & Quick Note on React 18 (w/ Chakra)
⌨️ (0:14:12) Create Chakra Theme (theme setup & explanation and global styling)
⌨️ (0:19:28) React TypeScript Intro & Next.js Layout Component
⌨️ (0:22:40) Begin Navbar (Navbar in Layout Component, component folder structure debrief)
⌨️ (0:24:30) Navbar Logos & Chakra UI Styling Fundamentals (flexbox, component styling, responsive design w/ media queries)
⌨️ (0:29:56) SearchInput Component
⌨️ (0:36:37) Authentication buttons & Chakra UI global component styling explanation
⌨️ (0:44:59) Authentication Modal Intro (Chakra UI modal skeleton)
⌨️ (0:47:23) Recoil Setup & Intro, Recoil Atoms with TypeScript, Auth Modal w/ global Recoil State
⌨️ (0:57:44) Authentication Modal Content (Login & Sign Up forms, React form state, React events w/ TypeScript)
⌨️ (1:18:57) OAuth Buttons (Sign In w/ Google, Facebook, Github, etc.)
⌨️ (1:23:49) Firebase Setup (Create new Firebase Project, Client SDK’s)
⌨️ (1:30:31) User Creation (react-firebase-hooks, useCreateUser firebase hook)
⌨️ (1:40:22) Firebase Error Handling (TypeScript indexing, custom error messages)
⌨️ (1:46:13) Google Authentication (useSignInWithGoogle hook)
⌨️ (1:51:28) Sign in Existing users (useSignInWithEmailAnPassword firebase hook)
⌨️ (1:56:45) useAuthState firebase hook (currently signed-in user, modify navbar UI for authenticated user)
⌨️ (2:03:54) Reset Passwords (useSendPasswordResetEmail firebase hook)
⌨️ (2:09:04) Navbar Icons (react-icons)
⌨️ (2:16:47) User Dropdown Menu (Chakra Menu component)
⌨️ (2:26:54) User Karma (custom user properties)
⌨️ (2:28:55) Community Directory in Navbar (create community intro)
⌨️ (2:38:09) Create Community Modal 1: Skeleton
⌨️ (2:44:34) Create Community Modal 2: Body (input, character count, community type list)
⌨️ (3:01:20) Create Communities & Cloud Firestore Database
⌨️ (3:17:37) Joining Communities 1 (User communities, SQL vs. NoSQL Data Modelling)
⌨️ (3:27:31) Cloud Functions (firebase-admin, Authentication, Adding Custom User Properties)
⌨️ (3:38:43) Cloud Functions Alternative for Custom User Properties, optional
⌨️ (3:43:46) Joining Communities 2 (Firestore Transactions and Sub-Collections)
⌨️ (3:50:12) Community Page (Server-side Rendering w/ NextJS, data fetching w/ getServerSideProps)
⌨️ (4:01:44) Community Not Found component
⌨️ (4:04:36) Community Page Header component
⌨️ (4:14:30) Custom PageContent Layout component (React children)
⌨️ (4:25:20) Community Data Recoil Atom (global communities state)
⌨️ (4:30:29) useCommunityData Custom Hook (Creating Custom Hooks in React)
⌨️ (4:39:35) Fetch User Community Snippets (getMyCommunities function)
⌨️ (4:50:59) Join & Leave Communities (Firestore Database Batched Writes)
⌨️ (5:04:26) Create Post Page & CreatePostLink Component
⌨️ (5:08:17) NewPostForm 1: FormTabsComponent (Multi-step React forms)
⌨️ (5:20:36) NewPostForm 2: PostTextInputs (Post Title & Body)
⌨️ (5:31:50) NewPostForm 3: ImageUpload Component
⌨️ (5:49:13) handleCreatePost Function (Save Posts to Firestore, Upload Image to Firebase Storage)
⌨️ (6:07:45) Fetch All Posts in Community (usePosts custom hook, Firestore queries)
⌨️ (6:17:56) PostItem Component
⌨️ (6:38:07) PostLoader Component (Chakra UI Skeletons)
⌨️ (6:43:17) Deleting Posts (handleDelete function, TypeScript promises)
⌨️ (6:54:23) About Community Component (currentCommunity recoil state)
⌨️ (7:10:19) Customize Community Image (useSelectFile custom react hook, Admin/Moderator permissions)
⌨️ (7:30:24) Voting on Posts (user postVotes collection batched writes)
⌨️ (8:11:30) Single Post Page (Next.js Dynamic [pid] route, event propagation)
⌨️ (8:29:25) Single Post Link Sharing (refresh dilemma, fetchPost fallback function)
⌨️ (8:35:09) Community Data Refresh Dilemma (getCommunityData fallback function)
⌨️ (8:43:49) Commenting on Posts (comment collection data modelling)
⌨️ (9:08:46) CommentItem Component
⌨️ (9:29:41) Deleting Comments
⌨️ (9:37:25) Community Navigation Dropdown (communityDirectory recoil atom)
⌨️ (9:55:31) useDirectory custom react hook
⌨️ (10:14:15) Home Page (Governing logic)
⌨️ (10:21:48) Home Feed for Logged-Out Users
⌨️ (10:38:11) Home Feed for Logged-In Users
⌨️ (10:54:20) Post Votes for Feed Posts
⌨️ (11:00:01) Top Communities Component (and supporting components)
⌨️ (11:20:34) Deployment with Vercel
⌨️ (11:32:06) Firebase Security Rules
⌨️ (11:41:48) Project Completion & Outro

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

[@user-dj6cm1cf6c]

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!

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

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

[@sharayus6832]

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

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

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

[@maxmi3091]

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

[@aldrinseanpereira140]

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

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

[@adeleke5140]

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

[@adeleke5140]

haven't finished yet but would be finishing this week

[@user-gf9ri4wj5h]

Masterpiece, included many many skills

[@kevin73911]

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

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

[@INAVACL]

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

[@ascyrax8507]

perfect timing. i was looking for something like this

[@Khang-rr8td]

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

[@taurohkea2169]

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

[@bkatsevych]

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

[@ssm2015_ita]

As usual amazing work done by freeCodeCamp

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

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

[@changmetellus3052]

Amazing tutorial 🙌🏽

[@amaanullah13]

You guys are life saviour♥️

[@rawwwwwr]

thanks, rlly appreciate your contribution to free education.

[@54peace]

I know I have commented like this like 5 times already but FCC does read my mind tho. I started using firebase last 2 weeks ago as the first time. now here's a new tutorial. Man i love this pls keep doing that. haha

[@TheEndOfMadness]

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

[@kunzhang6927]

amazing video, Thank you for 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.

[@techwithulises]

Excelente video 👍

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

[@grotsunfull]

Great content!

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

[@yantech.4249]

Amazing tutorial

[@infiniterush]

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

[@iamnisc]

Yeah Bahubali

[@madeonearthbyhumans]

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

[@codewithguillaume]

Woooow ! Loving it ❤

[@history3042]

Thanks. This will be useful

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

[@sergeybrin1326]

Ah yes I can absolutely customize my reddit EVERYTHING I WANT

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

[@TomMeadowsFox]

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

[@UmairMirza-rc1wv]

Amazing course! Thank you! Just out of curiosity, why didn't you use Redux for state management? And does Recoil have caching features?

[@DavidWoodMusic]

Redux has been on its way out for a while. There seem to be a lot more solutions that can accomplish the same goals with a lot less overhead. Not sure on Recoil and caching however.

[@UmairMirza-rc1wv]

@@DavidWoodMusic That was the general assumption a while ago but Redux toolit has brought Redux back into the game don't you think?

[@DavidWoodMusic]

@@UmairMirza-rc1wv Redux Toolkit is great and has modernized a lot, but there's still a lot of other solutions that people tend to gravitate towards

[@user-dj6cm1cf6c]

Find this nice discussion from you. I've learned more from here. Thanks!

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

[@devhammed]

Thanks!

[@marloncruz5892]

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

[@juanpasalagua2402]

Kudos to you broda!!!! :)

[@devsilva7155]

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

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

[@JasperDK913]

Wow. What a miracle!

[@mrmae99]

Perfect🎉❤

[@sidd_sarkar]

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

[@harshkanojia8419]

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

[@owensofcode]

Thanks alot

[@satwikagarwal3736]

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

[@sharayus6832]

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

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

[@mahendranath2504]

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

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

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

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

[@TomMeadowsFox]

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

[@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 🤗🙏?

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

[@user-vv5vt6ho4j]

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

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

[@antontyronchik496]

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

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

[@hooyah]

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

[@mocambiquemaputomatola8238]

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

[@dbruddy]

WOW Amanzing

[@hrithikwins]

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

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

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

[@frogfox9577]

Hi, it's with nextJS 12 or 13 ?

[@vibros_vlog]

Hi iam from tamilnadu

[@AmanKhan-bw3rt]

awesome awesome

[@webcoder9029]

Awesome helpful video #webcoder

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

[@SubhiHamad-fu3hk]

I couldn't run the project from github Are there any steps i have to do before Please help if any one know..

[@jovan4614]

Nextjs 12 is outdated!

[@yoshy3263]

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

[@fahadullakhan1793]

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

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

[@jaymahakaal5354]

Chakra🕉️🔱

[@abdelrahmanmostafa9489]

what's the difference between get and getDoc

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

[@z52ontop]

Time stamp for me: 27:21

[@juanpardo8551]

what should be put in these things What is your project named? … reddit ✔ Would you like to use TypeScript with this project? … No / Yes ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use `src/` directory with this project? … No / Yes ✔ Would you like to use experimental `app/` directory with this project? … No / Yes ? What import alias would you like configured? › @/*

[@thesacredlamp]

No, No, No, No , @/* worked for me

[@hexidecimalAFF0]

@@thesacredlamp thank you it worked for me.

[@meetabhashiniparida9417]

What is chakra ui all about?

[@dawitsileshi5946]

No way !!!

[@adjust6744]

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

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

[@OjoKemi]

Pls.can you don a more detailed tutorial of the whole set up. It was to fast and I couldn't get some things right.

[@pira9850]

Woah

[@ledgeplayz7640]

Is this web or app?

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

[@AmanKhan-bw3rt]

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

[@charliewang6041]

What should we already know before watching this video?

[@maitreepasad4407]

Community image change does not update imageURL in users communitySnippets and also for posts. I am not sure how does it work at kzbin.info/www/bejne/qHTQZoWMjrCKjMk

[@abhijitmanna4524]

my getServerSideProps not working pls help