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

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.

Course created by @asaprogrammer_

⭐️ Contents ⭐️
0:00:00 Intro
0:00:29 Demo of The App
0:05:23 Project Setup
0:08:51 Auth Page Setup
0:13:19 Auth Page Navbar
0:18:54 AuthModal Layout 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 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:15:18 Splitting The Page
2:34:39 Creating Code Editor
2:41:10 Adding Test Cases UI
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
5:06:23 Like functionality
5:27:51 Dislike functionality
5:39:03 Star functionality
5:46:03 Next and Previous problem
5:55:23 Solving Hydration Error
5:58:08 Confetti Celebration
6:01:43 Code Submission
6:20:50 Save code to localstorage
6:24:48 Solving bugs
6:31:08 Toggle Full Screen
6:34:13 SettingsModal UI
6:41:33 SettingsModal Functionality
6:54:23 Update Home Page
6:59:11 Sandboxing technique
7:01:58 Deployment
7:05:08 Firebase Rules

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan

--

[asaprogrammer_]

Thank you so much FCC for posting this content! It's a unique project to have on a resume. I hope everyone enjoys it. ❤

[MagdalenaPizarroOrtega]

I just finished deploying my project 😍 thank you so much!!! I learned A LOT! ❤

[mayanksgajjar]

Thanks for this work bro. Keep it up. Great work keep doing good work ☺

[Sahil-]

Finally completed this project! Thank you so much FCC and @burakorkmez for uploading such an amazing project on YouTube! ❤❤

[Deparnieux]

Thank you so much for this tutorials. Great work keep going ❤

[akshayaileni]

This channel teaches more than a college. Just loved it ❤️

[aravindsuresh]

Great content by the way for webd enthu's

[adamk]

This video nicely shows how something can actually be done to work, but i would like to see a follow up on this how to actually clean this code up.. because it doesnt look like something that could be easily maintained with lots of added functionality in the future.

[terryadityaildefonsochagua]

THANKS, I learn a lot, I finished this project today. 😁😁😁

[jl_]

I am gonna make this after being fed up with working on projects and Leetcode being a separate thing

[sreejishnair]

I have been listening about languages like Zig, Rust and a new high level language Mojo(inspired by python). Hopefully we can get to see those tutorials on this channel

[judevector]

How will my tech journey be without FCC, I owe most of everything I know to you guys

[reiinoki]

Thank you so much for this fun course! I cannot believe such a website can be built in 8 hours. Can I put your video on a Chinese website Bilibili so more Chinese learners can enjoy this course?

[nocopyrightgameplaystockvi]

Finally. I made a tiny website like this using Django and Tailwind. But this is the next🎉

[cvtcvt]

thank you very much for this app. Amaizing

[freshtechtips]

I'm in love with freeCodeCamp
The content is always very hot 🔥

[DevEmpower]

Hi, how can we create tutorials to be published via your channel ?

[bhavyapandya]

So if i watch this whole vid i can also make it side by side? Right?

[edwarda]

Hi, is there any downside to using the codemirror react library rather than the plain version?

[albertoa.rosasc.]

I Don't understand but good video.
Like #126 👍🏻