Leetcode Clone Project

This is a Leetcode clone I built using React, NextJS, TypeScript, TailwindCSS, and Firebase.

Features

User authentication with Firebase
Home page listing coding challenges
Challenge details page with problem statement
Code editor to write solution
Test cases to validate solution
Submit solution button

Tech Stack

NextJS - Framework for server-side rendered React apps
React - Frontend library for building user interfaces
TypeScript - Typed superset of JavaScript
TailwindCSS - Utility-first CSS framework for styling
Firebase - Backend-as-a-service for authentication, database, storage etc

Walkthrough

The homepage fetches coding challenges from Firestore and displays them in a grid layout. Each challenge links to the details page.
The details page shows the problem statement and has a code editor component powered by Monaco Editor.
Users can write and test their solution locally using the provided test cases. The submit solution button saves the code to Firestore and shows if it passed all tests.
The leaderboard page fetches top solutions for each challenge from Firestore and displays them in a table.
User authentication is handled by Firebase. New users can sign up and existing users can login/logout.

What I Learned

Implementing authentication with Firebase
Passing data between pages with NextJS routing
Local state management with React Hooks
Styling responsive layouts with TailwindCSS
Writing strongly typed React components with TypeScript
Monaco editor integration and executing code safely
Validating solutions using provided test cases
Storing and retrieving data from Firestore