The LeetCode clone is a web application built with Next.js, React, TypeScript, Tailwind CSS, and Firebase. It offers an interactive code playground for users to write and test code, presents LeetCode-style problem statements, and supports user authentication for progress tracking. The tech stack includes popular libraries and tools such as CodeMirror, Firebase SDK, and React icons.
-
Interactive Code Playground: Users can write, edit, and test their code in a dynamic and interactive code editor.
-
LeetCode-Style Problem Statements: Clear presentation of problem statements, following the style of LeetCode challenges.
-
User Authentication: Secure user authentication system enabling users to log in, save progress, and track solved problems.
- Next.js - React framework for server-rendered React applications.
- React - JavaScript library for building user interfaces.
- TypeScript - Typed superset of JavaScript.
- Tailwind CSS - Utility-first CSS framework.
- Firebase - Backend-as-a-Service platform.
- @codemirror/lang-javascript - CodeMirror language support for JavaScript.
- @uiw/codemirror-theme-vscode - Visual Studio Code theme for CodeMirror.
- @uiw/react-codemirror - CodeMirror component for React.
- assert - Node.js built-in assert module for assertions.
- firebase - Firebase SDK for JavaScript apps.
- react-firebase-hooks - Firebase hooks for React.
- react-icons - Popular icon library for React.
- react-split - Resizable split views for React.
- react-toastify - Toast notifications for React.
- react-youtube - YouTube component for React.
- recoil - State management library for React.
To run this project, you will need to add the following environment variables to your .env file
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
Replace the values with your actual Firebase project details.
git clone https://github.com/your-username/leetcode-clone.git
cd leetcode-clone
npm install
npm run dev
Visit http://localhost:3000 in your browser.