This is a LeetCode clone project created with Next.js, TypeScript, Tailwind CSS, OpenAI API, Firebase, Firestore, and Authentication. It allows users to practice coding problems, translate code between different programming languages, and save their solutions for reference.
- User authentication using Firebase.
- Code translation feature using the OpenAI API.
- Firestore integration to save and retrieve user solutions.
- A clean and responsive user interface designed with Tailwind CSS.
The LeetCode Clone project you described uses the following technologies in its tech stack:
-
Next.js: A popular React framework for building web applications, offering server-side rendering, static site generation, and other features.
-
Tailwind CSS: A utility-first CSS framework that helps in creating responsive and stylish user interfaces.
-
OpenAI API: Used for the code translation feature, allowing users to translate code between different programming languages.
-
Firebase: Used for user authentication, providing a secure and easy-to-integrate solution for user management.
-
Firestore: Integrated for data storage and retrieval, typically used to save and manage user solutions for coding problems.
-
Docker: You mentioned Docker, which is likely used for containerization and deployment of the application, making it easier to manage and scale the application in various environments.
To get started with this project, follow the steps below:
- Clone this repository to your local machine.
git clone https://github.com/your-username/leetcode-clone.git- Navigate to the project directory.
cd leetcode-clone- Install the required dependencies.
npm install
# or
yarn install
# or
pnpm install
# or
bun install-
Set up Firebase for authentication and Firestore for data storage. Update the Firebase configuration in the project to connect to your Firebase project.
-
Set up the OpenAI API for code translation. Update the API key in the project to use your OpenAI account.
-
Run the development server.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev-
Open http://localhost:3000 in your web browser to access the application.
-
You can start editing the page by modifying
pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. You can customize this endpoint in pages/api/hello.ts.
The pages/api directory is mapped to /api/* and is used for creating API routes.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can also check out the Next.js GitHub repository for feedback and contributions.
The easiest way to deploy your LeetCode Clone app is to use the Vercel Platform from the creators of Next.js.
For more details on deploying Next.js apps, you can refer to our Next.js deployment documentation.
One of the unique features of this LeetCode Clone is its ability to translate code between different programming languages. To use this feature, simply provide the code you want to translate, select the source and target programming languages, and click the "Translate" button.
We welcome your feedback and contributions to improve this LeetCode Clone project. Feel free to open issues, submit pull requests, or provide suggestions to help make this project even better.
Happy coding! 👨💻👩💻