Feat/leetcode fetcher

[R3Nexe]

Feature: Deep LeetCode Integration & Automated Problem Fetching

Description

This PR implements a robust system for importing and rendering LeetCode problems directly into the platform. It automates the process of fetching problem details (title, description, difficulty, tags, and starter code snippets) while ensuring high-fidelity rendering and enhanced search capabilities.

Key Changes

LeetCode Service & API

• GraphQL Integration: Implemented a service to fetch full problem data from LeetCode's GraphQL API using a problem slug or URL.
• Selective Snippets: The backend now filters fetched code snippets to only include supported languages (javascript, python3, java, cpp), reducing database overhead and focusing on platform-supported environments.

Backend & Data Model

• Challenge Model Expansion: Updated the Challenge schema to store link, tags (array), and codeSnippets (array of objects containing code and language metadata).
• Advanced Search: Enhanced the getChallenges controller to include the tags field in the global search filter. Users can now search for terms like "Hash Table" or "DFS" to find relevant challenges.
• Zod Validation: Updated schemas to enforce strict validation for the new fields during challenge creation and updates.

Admin Studio Enhancements

• Auto-Fill Logic: Fixed and completed the LeetCode importer. Admins can now paste a slug to instantly populate the creation form.
• Snippet Preview Panel: Added a tabbed code preview section allowing admins to review the fetched starter code for every language before saving.
• Tag Management: Fetched topic tags are displayed as interactive pills that can be individually reviewed or removed before submission.

Challenge Experience & Rendering

• Starter Code Injection: The code editor in the Challenge Details page now automatically loads the official LeetCode starter snippets from the database based on the selected language.
• High-Fidelity Rendering: Replaced plain-text description rendering with safe HTML rendering via DOMPurify.
• LeetCode Theme CSS: Added extensive CSS styling to handle LeetCode's rich HTML structure (nested lists, tables, code blocks, superscripts, etc.) with full support for both light and dark modes.
• Topic Pills: Challenges now display their associated topic tags as styled badges alongside difficulty and XP points.

Dependencies Added

• dompurify: Used on the client to ensure safe rendering of LeetCode's HTML descriptions.

Verification Results

• Build: npm run build completed successfully on the client.
• Server: All API integration tests passed (npm run test).
• End-to-End: Verified the full flow: Fetch Slug → Preview Snippets → Create Challenge → View rendered HTML and load code in the editor.

---

Tip

Migration Note: Challenges created before this update will continue to use the hardcoded fallback starter code. New challenges created via the importer will benefit from language-specific starter snippets stored in the database.

[vercel]

@R3Nexe is attempting to deploy a commit to the Sky Ruler's projects Team on Vercel.

A member of the Team first needs to authorize it.