(BETA) feat: Add multiple language support with code samples for algorithms

[xWickz]

⚠️ Esto es solo una demostración y no es todo el código completado al 100%, solo tiene algunos ejemplos y el paso a paso solo está disponible en JavaScript por los momentos

Problem

alg0.dev is a website featuring algorithms ranging from basic to advanced programming levels. These concepts are very important and fundamental when it comes to competitive programming: programming marathons, Leetcode, etc. That is why it is important to have these examples in multiple programming languages, including the most commonly used languages in competitive programming, which are usually C++ or Java. This is why the problem or idea of proposing a feature that contains codes in other languages arises

Solution

Multiple languages have been developed for code visualization, with five available: JavaScript (default), TypeScript, Python, C++, and Java. You can switch between these codes in the algorithms to understand and visualize how it would look in other programming languages. This helps not only to take it into account in other languages but also to have the reference at hand on the same page without having to use AI or other tools/methods to change the JavaScript code to another desired one, which boosts the page even more

Testing

1. Testing in Bubble Sort

Changing to another language

Available Algorithms to Test

1. Sliding Window — Concepts
2. Linked List — Data Structures
3. Binary Search Tree — Data Structures
4. Bubble Sort — Sorting
5. Dijkstra's Algorithm — Graphs
6. N-Queens Problem — Backtracking

How to add new or more languages

CodePanel.tsx (to add or remove languages)

const LANGUAGE_PRESETS: Record<CodeLanguage, { label: string; short: string; monaco: string }> = {
  javascript: { label: 'JavaScript', short: 'JS', monaco: 'javascript' },
  typescript: { label: 'TypeScript', short: 'TS', monaco: 'typescript' },
  python: { label: 'Python', short: 'Py', monaco: 'python' },
  cpp: { label: 'C++', short: 'C++', monaco: 'cpp' },
  java: { label: 'Java', short: 'Java', monaco: 'java' },
}

Algorithms (Folder) — sorting.ts
We got bubbleSort for example, default code is:

const bubbleSort: Algorithm = {
  id: 'bubble-sort',
  name: 'Bubble Sort',
  category: 'Sorting',
  difficulty: 'easy',
  visualization: 'array',
  code: `function bubbleSort(array) {
  const n = array.length;

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (array[j] > array[j + 1]) {
        // Swap adjacent elements
        [array[j], array[j + 1]] = [array[j + 1], array[j]];
      }
    }
  }

  return array;
}`,

For example, if we would like to add C++ language example, it would be this way:

const bubbleSort: Algorithm = {
  id: 'bubble-sort',
  name: 'Bubble Sort',
  category: 'Sorting',
  difficulty: 'easy',
  visualization: 'array',
  code: `function bubbleSort(array) {
  const n = array.length;

  for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
      if (array[j] > array[j + 1]) {
        // Swap adjacent elements
        [array[j], array[j + 1]] = [array[j + 1], array[j]];
      }
    }
  }

  return array;
}`, // starting here a JSON
  codeSamples: [
    {
      language: 'cpp',
      code: `#include <vector>
#include <algorithm>

std::vector<int> bubbleSort(std::vector<int> nums) {
  const int n = nums.size();
  for (int i = 0; i < n - 1; ++i) {
    for (int j = 0; j < n - i - 1; ++j) {
      if (nums[j] > nums[j + 1]) {
        std::swap(nums[j], nums[j + 1]);
      }
    }
  }
  return nums;
}`,
    },
],

⚠️ Vuelvo a repetir, esto es una demostración, si midu quiere aceptar la PR puede hacerlo sin problemas porque NO rompe el código, pero aun falta agregar en el resto de algoritmos los códigos en otros lenguajes como C++ o Java o TypeScript. Si midu desea aceptar la PR se puede continuar trabajando, esto ha sido solo una demostración, la cual puede o no ser aceptada, si no es aceptada al menos midu sabe que puede implementar en un futuro para hacer la pagina mas atractiva para todos mas de lo que ya lo es! ✨

[vercel]

@xWickz is attempting to deploy a commit to the midudev pro Team on Vercel.

A member of the Team first needs to authorize it.