Solving coding challenges on the LeetCode website is a great way to improve your developer skills. But an even better way to improve your skills is to develop your own LeetCode website.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build and deploy your own LeetCode clone.

The purpose of this course is to provide a hands-on approach to learning and implementing a bunch of popular web technologies. You'll come out of it with a fully functional coding problems platform, similar to LeetCode, which you can proudly add to your portfolio.

Burak Orkmez developed this course. He is a software developer and course creator.

Course Breakdown

Intro & Demo of The App: We kick off the course by giving you a preview of what you'll be creating by the end.

Project Setup: Here, we'll set up our development environment, introducing you to the technologies used in the course, including React, Next JS, TypeScript, Tailwind CSS, and Firebase.

Auth Page Setup & Functionality: This series of modules covers the creation of an authentication page, including UI for Login, Signup, and Password Reset, along with their respective functionalities using Firebase.

Home Page UI & Problems Table UI: Learn to design the home page and problem tables using Tailwind CSS, a utility-first CSS framework that significantly speeds up the development process.

YouTube Video Modal, Topbar Update On Auth & Auth Modal Optimizations: This section guides you through various UI improvements and interactive features using React components.

Firebase Setup & Firestore Initialization: You'll learn to leverage Firebase for user authentication, database management, and more.

React Toastify & Image Optimizations: Improve your application's UX by introducing notifications and optimizing images for faster load times.

Creating Various Pages & UI Elements: Dive deep into the creation of different pages and components, like Timer.tsx, Workspace.tsx, ProblemDescription.tsx, and more, honing your React and Tailwind CSS skills.

Code Editor Creation & Test Cases UI: One of the course highlights is creating your own code editor and implementing UI for test cases.

Data Handling & Problem Implementations: We'll discuss how to handle data in React applications and demonstrate how to implement some popular coding problems like Two Sum, Reverse Linked List, Jump Game, and more.

SSG, Fetch Problems & User Data: Understand the concepts of Static Site Generation (SSG) in Next.js, learn to fetch problems from the database, and how to handle user data.

Like, Dislike, and Star functionality: Add interactive features to problem solutions, enhancing the user experience.

Code Submission & Local Storage: Learn how to implement code submission functionality and how to use local storage to save code.

SettingsModal UI & Functionality: Dive into creating a settings modal with complete functionality using React and Tailwind CSS.

Solving Bugs & Hydration Error: Debugging is a crucial part of development. Here, we'll go through some common bugs and discuss strategies to solve them.

Deployment & Firebase Rules: Lastly, you'll learn how to deploy your application and set Firebase rules to secure your data.

This course is packed with practical lessons and examples that mirror real-world development processes. By the end of it, you'll have a solid understanding of the technologies involved and the confidence to build similar large-scale projects.

Watch the full course on the freeCodeCamp.org YouTube channel (7-hour watch).