Black Friday 2024: 25+ Ways to Save on Online Learning
Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Sign in Existing users useSignInWithEmailAnPassword firebase hook

18 of 67
Previous
Next

18 of 67

⌨️ Sign in Existing users useSignInWithEmailAnPassword firebase hook

Class Central Classrooms beta

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

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.