[#Script #Coding] Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

Spread the love

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

By freeCodeCamp.org
Published: May 25, 2023

freeCodeCamp.org 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 @burakorkmez

⭐️ 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: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
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

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Spread the love
Proudly powered by WordPress
Creative Commons License
EricBrooks.Com® is licensed under a Creative Commons License.

Disclaimer: The views expressed herein are solely those of Eric Brooks. They do not necessarily reflect those of his employers, friends, contacts, family, or even his pets (though my cat, Puddy, seems to agree with me on many key issues.). In accordance to my terms of use, you hereby acknowledge my right to psychoanalyze you, practice accupuncture, and mock you incessantly with every visit. As the user, you also acknowledge that the author has been legally declared a "Problem Adult" by the Commonwealth of Pennsylvania, and is therefore not responsible for any of his actions. ALSO, the political views and products advertised on this site may/may not reflect the views of Puddy or myself, so please don't take them as an endorsement. We just need to eat.