Leetcode clone

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.

Features

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

Tech Stack

Client

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

Server

• Firebase - Backend-as-a-Service platform.

Additional NPM Packages

• @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.

Environment Variables

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.

Installation

  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.