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).