Build and Deploy a LeetCode Clone with React: Next JS, TypeScript, Tailwind CSS, Firebase | Part 2

In this second part of the tutorial, we'll be completing our Leetcode clone application and at the end we'll deploy it to vercel. We use React, Tailwind CSS, Next.JS, Typescript, and Firebase.

Timestamps
00:00 Review of part 1
04:35 Image optimizations
06:10 Creating [pid] page and update topbar
26:55 Splitting page
46:16 Creating Code Editor
52:47 Addin Testcases UI
1:08:09 Data Handling Explained
1:13:27 Two Sum Problem
1:24:29 Reverse Linked List
1:29:42 Jump Game Problem
1:31:50 Valid Parentheses Problem
1:32:53 Search 2d Matrix Problem
1:33:38 Using SSG for [pid].tsx
1:58:24 Updating testcases UI
2:03:16 Initializing Firestore
2:07:33 Adding problems to DB
2:23:46 Fetch Problems
2:44:35 Create Users in DB
2:52:10 Fetch problem data
3:03:05 Loading skeletons
3:08:12 Get user data on the problem
3:18:00 Like functionality
3:39:28 Dislike functionality
3:50:40 Star functionality
3:57:40 Next and Previous problem
4:07:00 Solving Hydration Error
4:09:45 Confetti Celebration
4:13:20 Code Submission
4:32:27 Save code to localstorage
4:36:25 Solving bugs
4:42:45 Toggle Full Screen
4:45:50 SettingsModal UI
4:53:10 SettingsModal Functionality
5:06:00 Update Home Page
5:10:48 Sandboxing technique
5:13:35 Deployment
5:16:45 Firebase Rules

#reactjs #javascript #leetcode

[furkansegmen]

Burak you are incredible teacher. Thanks for your work ❤❤❤

[DanEMO]

Thank you so much for this! I am super grateful for this project

[lovekiran_kaur]

Great!! just finished building and you were awesome

[SR-zipw]

Nice tutorial please zoom little bit can't see on mobile

[bahtitashpaev]

thank you very mach, , everything works fine till the end of deploymentt..🤗🤗🥳🥳🥳🥳🥳. I just wonder should i add new problm desision to utils folder? now i have 5 of them.. (as in tutorial)

[youthfactfactory]

Hey Burak I am getting errors by implementing Playground part
[HMR] connected websocket.js:52:27
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
client.js:1:4803
getServerError client.js:1
_hydrate index.js:638 Please tell how to fix the issue?

[kingjune]

first to comment, so my request is that i will like you to use chakra-ui in your next project

[youthfactfactory]

If I want to add other language functionalities like Java or C++ how to implement it?

[ankitgupta]

31:26 after installing react-split and adding css, it doesn't showing up

[programmer]

Hello bro.. I want to suggest one feature if you can do for us.

Like we can have cards displaying the topic.. Like arrays.. Matrix... Dynamic programming.. And when we open them then these questions will be shown.. Like category wise option should be there.. If you can bring this one small feature in next video...

It's a humble request ❤❤