Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

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

via freeCodeCamp

Overview

This course teaches learners how to build and deploy a LeetCode clone using React, Next JS, TypeScript, Tailwind CSS, and Firebase. By the end of the course, students will be able to create a fully functional LeetCode clone and deploy it to Vercel. The course covers topics such as project setup, authentication, UI design, Firebase integration, data handling, and deployment. The intended audience for this course includes developers looking to enhance their skills in web development using modern technologies.

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

Taught by

freeCodeCamp.org

Reviews

Start your review of Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

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.