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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 7-hour project tutorial to construct a LeetCode clone using React, Next.js, TypeScript, Tailwind CSS, and Firebase. Learn to build a fully functional coding practice platform from scratch, covering everything from authentication and user interface design to problem-solving functionalities and database integration. Master the implementation of features such as code editor, test cases, user preferences, and real-time updates. Gain hands-on experience with modern web development technologies while creating an interactive and responsive application. Conclude the tutorial by deploying your finished project to Vercel, ensuring your clone is accessible online. Perfect for developers looking to enhance their full-stack skills and create a complex, real-world application.

Syllabus

Intro
Demo of The App
Project Setup
Auth Page Setup
Auth Page Navbar
AuthModal Layout UI
Login UI
Signup UI
ResetPassword UI
Integrating Recoil Auth State
Firebase Setup
Signup Functionality
Login Functionality
Auth Page Route Guard
Home Page UI
Problems Table UI
Youtube Video Modal
Topbar Update On Auth
Logout Functionality
Auth Modal Optimizations
Reset Password Functionality
React Toastify
Image optimizations
Creating [pid] page and update topbar
Creating Timer.tsx
Creating Workspace.tsx
Splitting The Page
Creating ProblemDescrition.tsx
Creating PreferenceNav.tsx
Creating Code Editor
Adding Test Cases UI
Creating EditorFooter.tsx
Data Handling Explained
Two Sum Problem
Reverse Linked List
Jump Game Problem
Valid Parentheses Problem
Search 2d Matrix Problem
Using SSG for [pid].tsx
Updating testcases UI
Initializing Firestore
Adding problems to DB
Fetch Problems
Create Users in DB
Fetch problem data
Loading skeletons
Get user data on the problem
Like functionality
Dislike functionality
Star functionality
Next and Previous problem
Solving Hydration Error
Confetti Celebration
Code Submission
Save code to localstorage
Solving bugs
Toggle Full Screen
SettingsModal UI
SettingsModal Functionality
Update Home Page
Sandboxing technique
Deployment
Firebase Rules