Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

freeCodeCamp.org via freeCodeCamp Direct link

Auth Page Setup

4 of 63

4 of 63

Auth Page Setup

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

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

  1. 1 Intro
  2. 2 Demo of The App
  3. 3 Project Setup
  4. 4 Auth Page Setup
  5. 5 Auth Page Navbar
  6. 6 AuthModal Layout UI
  7. 7 Login UI
  8. 8 Signup UI
  9. 9 ResetPassword UI
  10. 10 Integrating Recoil Auth State
  11. 11 Firebase Setup
  12. 12 Signup Functionality
  13. 13 Login Functionality
  14. 14 Auth Page Route Guard
  15. 15 Home Page UI
  16. 16 Problems Table UI
  17. 17 Youtube Video Modal
  18. 18 Topbar Update On Auth
  19. 19 Logout Functionality
  20. 20 Auth Modal Optimizations
  21. 21 Reset Password Functionality
  22. 22 React Toastify
  23. 23 Image optimizations
  24. 24 Creating [pid] page and update topbar
  25. 25 Creating Timer.tsx
  26. 26 Creating Workspace.tsx
  27. 27 Splitting The Page
  28. 28 Creating ProblemDescrition.tsx
  29. 29 Creating PreferenceNav.tsx
  30. 30 Creating Code Editor
  31. 31 Adding Test Cases UI
  32. 32 Creating EditorFooter.tsx
  33. 33 Data Handling Explained
  34. 34 Two Sum Problem
  35. 35 Reverse Linked List
  36. 36 Jump Game Problem
  37. 37 Valid Parentheses Problem
  38. 38 Search 2d Matrix Problem
  39. 39 Using SSG for [pid].tsx
  40. 40 Updating testcases UI
  41. 41 Initializing Firestore
  42. 42 Adding problems to DB
  43. 43 Fetch Problems
  44. 44 Create Users in DB
  45. 45 Fetch problem data
  46. 46 Loading skeletons
  47. 47 Get user data on the problem
  48. 48 Like functionality
  49. 49 Dislike functionality
  50. 50 Star functionality
  51. 51 Next and Previous problem
  52. 52 Solving Hydration Error
  53. 53 Confetti Celebration
  54. 54 Code Submission
  55. 55 Save code to localstorage
  56. 56 Solving bugs
  57. 57 Toggle Full Screen
  58. 58 SettingsModal UI
  59. 59 SettingsModal Functionality
  60. 60 Update Home Page
  61. 61 Sandboxing technique
  62. 62 Deployment
  63. 63 Firebase Rules

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.