CustomCodeEditor

Éditeur de code personnalisé

Ce projet est un constructeur de code basé sur React qui utilise l'éditeur Monaco. Il permet aux utilisateurs d'écrire et d'exécuter des extraits de code dans un navigateur Web. Il utilise Judge0 comme système d'exécution de code

Commencer

Suivez ces instructions pour mettre le projet en cours d'exécution sur votre machine locale.

Condition préalable

Node.js installé sur votre machine NPM ou gestionnaire de packages de fils

Installation

Clone le référentiel de votre machine locale:

 git clone <repository-url>

• Remarque: - Veuillez remplir les clés nécessaires dans le fichier .env pour les soumissions de code réussies

Sans docker

Installez les dépendances à l'aide de NPM ou de fil: bash

 npm install
# or
yarn install

Pour commencer le projet

 npm run start

Avec Docker

Condition préalable

Avant de commencer le projet, assurez-vous que Docker est installé. Sinon, suivez ces étapes pour installer Docker:

Installation de Docker

1. Windows :

   • Téléchargez Docker Desktop depuis Docker Hub.
   • Suivez les instructions d'installation.

2. Mac :

   • Téléchargez Docker Desktop depuis Docker Hub.
   • Suivez les instructions d'installation.

3. Linux :

   • L'installation du moteur Docker varie selon la distribution Linux. Reportez-vous à la documentation officielle de Docker pour les instructions d'installation spécifiques à votre distribution Linux.

Pour démarrer le projet à l'aide de Docker Compose:

1. Construisez et exécutez le projet:

    # Detach mode
   docker-compose up -d

    docker-compose up
   

2. Accéder au projet:

   • Une fois que Docker Compose a démarré les conteneurs, accédez au projet à l'aide de votre navigateur Web sur http://localhost:3000 .

3. Projection de fermeture

    docker-compose down
   

Configuration du juge0 avec Rapidapi

1. Accédez à Judge0 :

   • Commencez par aller à la page Judge0 sur Rapidapi.
   • Sélectionnez le plan de base , qui offre une limite de 50 demandes par jour.

2. Inscrivez-vous au plan de base :

   • Rapidapi héberge le juge0, vous devez donc vous inscrire au plan de base sur Rapidapi.
   • Suivez le processus d'inscription pour commencer.

3. Accédez au tableau de bord RapidAPI :

   • Après vous inscrire, allez au tableau de bord Rapidapi.
   • Dans la barre de navigation, sélectionnez API Hub .

4. Accédez à la section de l'API :

   • Cliquez sur les points de terminaison pour afficher
   • Vous verrez plusieurs points de terminaison tels que les soumissions, les langues et les langues.

5. Utilisation du point de terminaison des soumissions :

   • Pour les soumissions de code, accédez au point de terminaison des soumissions , puis sélectionnez Créer la soumission .
   • Ici, vous trouverez X-RapidAPI-Key , X-RapidAPI-Host et l'URL ( url ) nécessaire pour les appels API. L'URL est située sous la section "Code Snippets".

6. Copier les clés requises :

   • Copiez les valeurs RAPIDAPI_HOST et RAPIDAPI_KEY . Ceux-ci sont nécessaires pour effectuer des appels API au système d'exécution de code.
   • Assurez-vous que ces clés sont enregistrées car elles seront utilisées dans vos demandes d'API.

En suivant ces étapes, vous serez en mesure de configurer Judge0 pour les soumissions de code en utilisant l'infrastructure de RapidAPI, vous permettant d'exécuter et d'évaluer le code dans votre application.

Configuration de la base de la base

1. Créez un compte Firebase sur Firebase.google.com et accédez à la console.
2. Aller à l'authentification.
3. Dans la méthode de connexion, choisissez le fournisseur Google.
4. Accédez à Paramètres et vous verrez des domaines autorisés.
5. Ajoutez votre URL de production dans des domaines autorisés pour notre projet: https://custom-code-editor.vercel.app/
6. Créez un fichier .env dans votre répertoire racine et ajoutez ces valeurs:

 REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""

Configuration d'authentification GitHub

Pour activer l'authentification GitHub pour l'éditeur de code personnalisé, suivez ces étapes:

1. Activer l'authentification GitHub dans la console Firebase:

   • Accédez à votre projet Firebase dans la console Firebase.
   • Accédez à Authentication > Méthode de connexion .
   • Activez GitHub en tant que fournisseur de connexion.
   • Notez l' URL de rappel d'autorisation fournie par Firebase, car vous en aurez besoin pour votre application GitHub OAuth.

2. Enregistrez une nouvelle application OAuth sur GitHub:

   • Accédez à vos paramètres de développeur GitHub.
   • Cliquez sur les applications OAuth et sélectionnez la nouvelle application OAuth .
   • Remplissez les détails de l'application:
     • Nom de l'application : éditeur de code personnalisé
     • URL de page d'accueil :
       • Pour le développement local , utilisez http://localhost:3000
       • Pour le déploiement de la production , utilisez votre URL publique (par exemple, https://custom-code-editor.vercel.app/ )
     • URL de rappel d'autorisation :
       • Utilisez l' URL de rappel d'autorisation fournie par Firebase.
   • Cliquez sur l'application d'enregistrement .

3. Récupérer l'ID client GitHub et le secret du client:

   • Une fois l'application enregistrée, vous verrez l' ID client et le secret du client dans les paramètres de l'application GitHub OAuth. Copiez ces valeurs.

4. Ajoutez des informations d'identification GitHub OAuth à Firebase:

   • Retournez à la console Firebase et revenez à la configuration du fournisseur GitHub .
   • Entrez l' ID client et le secret client de GitHub.
   • Enregistrez ces paramètres.

5. Mettre à jour les variables d'environnement:

   • Ouvrez votre fichier .env dans la racine de votre projet et ajoutez ce qui suit:

      REACT_APP_GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
     REACT_APP_GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
     

   • Remplacez YOUR_GITHUB_CLIENT_ID et YOUR_GITHUB_CLIENT_SECRET par les valeurs que vous avez copiées à partir de github.

Configuration locale

• Créez un fichier .env dans le répertoire racine de votre projet s'il n'existe pas déjà.
• Vous pouvez copier du contenu de .env.example à .env , vous pouvez exécuter la commande ci-dessous.

   cp .env.example .env
  

• Définissez les variables d'environnement suivantes dans le fichier .env:

 REACT_APP_RAPID_API_HOST=YOUR_HOST_URL
REACT_APP_RAPID_API_KEY=YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL=YOUR_SUBMISSIONS_URL

# key for docker container name
COMPOSE_PROJECT_NAME=custom_code_editor

Remplacez votre_host_url, votre_secret_key et votre_submissions_url par les valeurs appropriées pour votre API rapide et les points de terminaison API juge0.

Configuration de configuration du serveur

Créez un fichier .env dans le répertoire racine de votre projet s'il n'existe pas déjà. Définissez la variable d'environnement juge0_submission_url dans le fichier .env. Cette variable doit pointer vers l'URL du point de terminaison de l'API juge0 que vous souhaitez utiliser pour l'exécution de code. Par exemple: texte en clair

 JUDGE0_SUBMISSION_URL=https://api.judge0.com/submissions

Remplacez https://api.judge0.com/submissions par l'URL appropriée pour votre point de terminaison de l'API juge0.

Exécution du serveur de développement Une fois la configuration terminée, vous pouvez démarrer le serveur de développement pour voir le constructeur de code React en action.

 npm start
# or
yarn start

Ouvrez votre navigateur Web et accédez à http: // localhost: 3000 pour accéder à l'application.

Usage

• Écrivez votre code dans l'éditeur de Monaco.
• Exécutez l'extrait de code en cliquant sur le bouton "Exécuter".
• Affichez la sortie dans la console ou le panneau de sortie.

Informations importantes

Actuellement, l'URL du projet est basée à partir de la version gratuite de Judge0, cela signifie que le plus peut avoir 50 demandes par jour.

Contributif

Les contributions sont les bienvenues! N'hésitez pas à soumettre des demandes de traction ou à des problèmes d'ouverture.

Contributeurs

Gitpod

Dans l'environnement de développement sans cloud où vous pouvez commencer directement à coder.

Vous pouvez utiliser gitpod dans le cloud

---

N'hésitez pas à personnaliser ce Readme.md en fonction des exigences et des fonctionnalités spécifiques de votre projet. Faites-moi savoir si vous avez besoin d'aide supplémentaire!