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: https://github.com/shadeemerhi/reddit-clone-yt

⭐️ 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