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

⌨️ Intro & Project Demo
⌨️ Begin Project Preface, Create Next App, Next.js fundamental concepts: pages and client-side routing
⌨️ Core package installations Chakra-React, Firebase, Recoil and & ChakraProvider setup & Quick Note on React 18 w/ Chakra
⌨️ Create Chakra Theme theme setup & explanation and global styling
⌨️ React TypeScript Intro & Next.js Layout Component
⌨️ Begin Navbar Navbar in Layout Component, component folder structure debrief
⌨️ Navbar Logos & Chakra UI Styling Fundamentals flexbox, component styling, responsive design w/ media queries
⌨️ SearchInput Component
⌨️ Authentication buttons & Chakra UI global component styling explanation
⌨️ Authentication Modal Intro Chakra UI modal skeleton
⌨️ Recoil Setup & Intro, Recoil Atoms with TypeScript, Auth Modal w/ global Recoil State
⌨️ Authentication Modal Content Login & Sign Up forms, React form state, React events w/ TypeScript
⌨️ OAuth Buttons Sign In w/ Google, Facebook, Github, etc.
⌨️ Firebase Setup Create new Firebase Project, Client SDK’s
⌨️ User Creation react-firebase-hooks, useCreateUser firebase hook
⌨️ Firebase Error Handling TypeScript indexing, custom error messages
⌨️ Google Authentication useSignInWithGoogle hook
⌨️ Sign in Existing users useSignInWithEmailAnPassword firebase hook
⌨️ useAuthState firebase hook currently signed-in user, modify navbar UI for authenticated user
⌨️ Reset Passwords useSendPasswordResetEmail firebase hook
⌨️ Navbar Icons react-icons
⌨️ User Dropdown Menu Chakra Menu component
⌨️ User Karma custom user properties
⌨️ Community Directory in Navbar create community intro
⌨️ Create Community Modal 1: Skeleton
⌨️ Create Community Modal 2: Body input, character count, community type list
⌨️ Create Communities & Cloud Firestore Database
⌨️ Joining Communities 1 User communities, SQL vs. NoSQL Data Modelling
⌨️ Cloud Functions firebase-admin, Authentication, Adding Custom User Properties
⌨️ Cloud Functions Alternative for Custom User Properties, optional
⌨️ Joining Communities 2 Firestore Transactions and Sub-Collections
⌨️ Community Page Server-side Rendering w/ NextJS, data fetching w/ getServerSideProps
⌨️ Community Not Found component
⌨️ Community Page Header component
⌨️ Custom PageContent Layout component React children
⌨️ Community Data Recoil Atom global communities state
⌨️ useCommunityData Custom Hook Creating Custom Hooks in React
⌨️ Fetch User Community Snippets getMyCommunities function
⌨️ Join & Leave Communities Firestore Database Batched Writes
⌨️ Create Post Page & CreatePostLink Component
⌨️ NewPostForm 1: FormTabsComponent Multi-step React forms
⌨️ NewPostForm 2: PostTextInputs Post Title & Body
⌨️ NewPostForm 3: ImageUpload Component
⌨️ handleCreatePost Function Save Posts to Firestore, Upload Image to Firebase Storage
⌨️ Fetch All Posts in Community usePosts custom hook, Firestore queries
⌨️ PostItem Component
⌨️ PostLoader Component Chakra UI Skeletons
⌨️ Deleting Posts handleDelete function, TypeScript promises
⌨️ About Community Component currentCommunity recoil state
⌨️ Customize Community Image useSelectFile custom react hook, Admin/Moderator permissions
⌨️ Voting on Posts user postVotes collection batched writes
⌨️ Single Post Page Next.js Dynamic [pid] route, event propagation
⌨️ Single Post Link Sharing refresh dilemma, fetchPost fallback function
⌨️ Community Data Refresh Dilemma getCommunityData fallback function
⌨️ Commenting on Posts comment collection data modelling
⌨️ CommentItem Component
⌨️ Deleting Comments
⌨️ Community Navigation Dropdown communityDirectory recoil atom
⌨️ useDirectory custom react hook
⌨️ Home Page Governing logic
⌨️ Home Feed for Logged-Out Users
⌨️ Home Feed for Logged-In Users
⌨️ Post Votes for Feed Posts
⌨️ Top Communities Component and supporting components
⌨️ Deployment with Vercel
⌨️ Firebase Security Rules
⌨️ Project Completion & Outro