Software Development

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



On this challenge tutorial, you’ll construct a LeetCode clone with React, Tailwind CSS, Next.JS, Typescript, and Firebase. Additionally deploy it to Vercel on the finish.

Thank you for reading this post, don't forget to subscribe!

๐Ÿ’ป Supply Code:
๐Ÿ’ป Github Gist:
๐Ÿ”— Demo Challenge:
๐Ÿ”— Discord Server(to ask questions):

Course created by @asaprogrammer_

โญ๏ธ Contents โญ๏ธ
0:00:00 Intro
0:00:29 Demo of The App
0:05:23 Challenge Setup
0:08:51 Auth Web page Setup
0:13:19 Auth Web page Navbar
0:18:54 AuthModal Format UI
0:22:16 Login UI
0:29:41 Signup UI
0:31:59 ResetPassword UI
0:33:13 Integrating Recoil Auth State
0:47:31 Firebase Setup
0:52:41 Signup Performance
1:01:21 Login Performance
1:05:14 Auth Web page Route Guard
1:08:01 Dwelling Web page UI
1:12:50 Issues Desk UI
1:21:01 Youtube Video Modal
1:29:51 Topbar Replace On Auth
1:32:46 Logout Performance
1:37:11 Auth Modal Optimizations
1:38:44 Reset Password Performance
1:42:56 React Toastify
1:47:19 Picture optimizations
1:54:33 Creating [pid] web page and replace topbar
2:02:27 Creating Timer.tsx
2:12:31 Creating Workspace.tsx
2:15:18 Splitting The Web page
2:19:47 Creating ProblemDescrition.tsx
2:26:03 Creating PreferenceNav.tsx
2:34:39 Creating Code Editor
2:41:10 Including Check Circumstances UI
2:50:15 Creating EditorFooter.tsx
2:56:32 Knowledge Dealing with Defined
3:01:50 Two Sum Downside
3:12:52 Reverse Linked Listing
3:18:05 Leap Recreation Downside
3:20:13 Legitimate Parentheses Downside
3:21:16 Search second Matrix Downside
3:22:01 Utilizing SSG for [pid].tsx
3:46:47 Updating testcases UI
3:51:39 Initializing Firestore
3:55:56 Including issues to DB
4:12:09 Fetch Issues
4:32:58 Create Customers in DB
4:40:33 Fetch downside information
4:51:28 Loading skeletons
4:56:35 Get person information on the issue
5:06:23 Like performance
5:27:51 Dislike performance
5:39:03 Star performance
5:46:03 Next and Earlier downside
5:55:23 Fixing Hydration Error
5:58:08 Confetti Celebration
6:01:43 Code Submission
6:20:50 Save code to localstorage
6:24:48 Fixing bugs
6:31:08 Toggle Full Display screen
6:34:13 SettingsModal UI
6:41:33 SettingsModal Performance
6:54:23 Replace Dwelling Web page
6:59:11 Sandboxing approach
7:01:58 Deployment
7:05:08 Firebase Guidelines

๐ŸŽ‰ Because of our Champion and Sponsor supporters:
๐Ÿ‘พ davthecoder
๐Ÿ‘พ jedi-or-sith
๐Ÿ‘พ ๅ—ๅฎฎๅƒๅฝฑ
๐Ÿ‘พ Agustรญn Kussrow
๐Ÿ‘พ Nattira Maneerat
๐Ÿ‘พ Heather Wcislo
๐Ÿ‘พ Serhiy Kalinets
๐Ÿ‘พ Justin Hual
๐Ÿ‘พ Otis Morgan

Be taught to code totally free and get a developer job:

Learn lots of of articles on programming:

source

Comments are closed.