Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial

Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial

freeCodeCamp.org via freeCodeCamp Direct link

Working on suggestion.js (sidebar completed)

51 of 91

51 of 91

Working on suggestion.js (sidebar completed)

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Introduction
  2. 2 Showcase
  3. 3 Create React App (yarn)
  4. 4 Project Folder Structure
  5. 5 Installing Dependencies
  6. 6 Refactoring unnecessary files, refactoring code
  7. 7 Install ESLint
  8. 8 Creating Folder Structure & Architecture
  9. 9 Setup Firebase
  10. 10 Firestore
  11. 11 Firestore Rules
  12. 12 Firestore (Collections & Docs)
  13. 13 Firebase Authentication
  14. 14 Realtime Database (Explanation)
  15. 15 createContext in firebase.js
  16. 16 Creating App in Firebase
  17. 17 Start working on Login Page
  18. 18 Install React Router Dom
  19. 19 Create Routes
  20. 20 Continue working on Login Page (Part 2)
  21. 21 Tailwind.css Introduction
  22. 22 Continue working on Login Page (Part 3)
  23. 23 Install more dependencies
  24. 24 Change how all scripts work
  25. 25 yarn add postcss -D
  26. 26 Create components folder
  27. 27 Tailwind.css setup
  28. 28 Completed Tailwind Setup, Continue working on Login Page (Part 4)
  29. 29 Interjection: Field Value
  30. 30 Continue working on Login Page
  31. 31 Tailwind.config
  32. 32 Login Functionality (with Firebase)
  33. 33 Signup Page
  34. 34 Check for user created is a duplicate
  35. 35 Not Found & Dashboard Page
  36. 36 Created Timeline Component
  37. 37 Created Sidebar Component
  38. 38 Created Header Component
  39. 39 use-auth-listener.js Hook
  40. 40 users.js UserContext
  41. 41 Back to Header Component
  42. 42 Working on Dashboard Page
  43. 43 Working on Sidebar Component
  44. 44 use-user.js hook
  45. 45 In user.js ⇒ Introduction to prop types
  46. 46 Created Timeline.js
  47. 47 Explanation on useMemo
  48. 48 Add WhyDidYouRender
  49. 49 Struggling with some issues
  50. 50 Finally Figuring out some problems with WhyDidYouRender
  51. 51 Working on suggestion.js (sidebar completed)
  52. 52 Get suggested profiles
  53. 53 Functionality: Remove followed user from suggestion
  54. 54 Functionality: Update user’s following & followers
  55. 55 Overview on Timeline
  56. 56 Creating Post Component
  57. 57 Creating more custom hooks (usePhotos)
  58. 58 Rendering out the photos (using React skeleton)
  59. 59 Start work on Post Component
  60. 60 Components within Post
  61. 61 Header Component
  62. 62 Image & Actions
  63. 63 Service call in Firebase
  64. 64 Show Comments
  65. 65 Add Comments
  66. 66 Adding Protected Routes
  67. 67 Profile
  68. 68 Lazy load explanation
  69. 69 Continue working on Profile Page
  70. 70 Header Component in Profile Page
  71. 71 Profile Specific Header
  72. 72 Get User Photos
  73. 73 Continue working on header
  74. 74 Information in header
  75. 75 Photos Component in Profile Page
  76. 76 Recap of everything we’ve done
  77. 77 Start of Review
  78. 78 Not found header
  79. 79 Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
  80. 80 Review of contexts: firebase.js and user.js
  81. 81 Review of Routes & Posts
  82. 82 loadtest (Npm install -g loadtest)
  83. 83 Create a production build
  84. 84 Deployment to Vercel done but with issues
  85. 85 Issues fixed
  86. 86 Lighthouse
  87. 87 Wrapping up
  88. 88 Changes and Refactoring (Fixing Bugs)
  89. 89 Quick Look at Paid Version
  90. 90 Cypress
  91. 91 Signing Off

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.