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