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

Name: Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase
Uploaded: 2023-05-25T14:33:36Z
Channel: freeCodeCamp.org
Description: In this project tutorial, you will build a LeetCode clone with React, Tailwind CSS, Next.JS, Typescript, and Firebase. Also deploy it to Vercel at the e...

freeCodeCamp.org · Beginner ·📰 AI News & Updates ·2y ago

Auth & Authorisation90%Frontend Performance80%API Design70%Backend Performance60%

In this project tutorial, you will build a LeetCode clone with React, Tailwind CSS, Next.JS, Typescript, and Firebase. Also deploy it to Vercel at the end. 💻 Source Code: https://github.com/burakorkmez/leetcode-clone-youtube 💻 Github Gist: https://gist.github.com/burakorkmez/5ba4c1a910f396050a2ac2f229418f54 🔗 Demo Project: https://leetclone.vercel.app/problems/two-sum 🔗 Discord Server(to ask questions): https://discord.gg/YFn2WyheZV Course created by @codesistency ❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possib…

Watch on YouTube ↗ (saves to browser)

Chapters (47)

Intro

0:29 Demo of The App

5:23 Project Setup

8:51 Auth Page Setup

13:19 Auth Page Navbar

18:54 AuthModal Layout UI

22:16 Login UI

29:41 Signup UI

31:59 ResetPassword UI

33:13 Integrating Recoil Auth State

47:31 Firebase Setup

52:41 Signup Functionality

1:01:21 Login Functionality

1:05:14 Auth Page Route Guard

1:08:01 Home Page UI

1:12:50 Problems Table UI

1:21:01 Youtube Video Modal

1:29:51 Topbar Update On Auth

1:32:46 Logout Functionality

1:37:11 Auth Modal Optimizations

1:38:44 Reset Password Functionality

1:42:56 React Toastify

1:47:19 Image optimizations

1:54:33 Creating [pid] page and update topbar

2:02:27 Creating Timer.tsx

2:12:31 Creating Workspace.tsx

2:15:18 Splitting The Page

2:19:47 Creating ProblemDescrition.tsx

2:26:03 Creating PreferenceNav.tsx

2:34:39 Creating Code Editor

2:41:10 Adding Test Cases UI

2:50:15 Creating EditorFooter.tsx

2:56:32 Data Handling Explained

3:01:50 Two Sum Problem

3:12:52 Reverse Linked List

3:18:05 Jump Game Problem

3:20:13 Valid Parentheses Problem

3:21:16 Search 2d Matrix Problem

3:22:01 Using SSG for [pid].tsx

3:46:47 Updating testcases UI

3:51:39 Initializing Firestore

3:55:56 Adding problems to DB

4:12:09 Fetch Problems

4:32:58 Create Users in DB

4:40:33 Fetch problem data

4:51:28 Loading skeletons

4:56:35 Get user data on the problem

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →

React: Production Server Setup Part 2 - Live Coding with Jesse

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

Chapters (47)

Playlist

Lesson complete!