En este tutorial, aprenderás cómo diseñar plantillas asombrosas de email con React Email y enviarlos usando Resend – una potente plataforma API de correo electrónico.

Pre-requisitos

Para aprovechar lo máximo de este tutorial, deberías tener un entendimiento básico de React o Next.js.

También haremos uso de las siguientes herramientas:

• React Email: Una librería que te permite crear plantillas de email diseñadas hermosamente usando componentes de React.
• Resend: Una poderosa y sencilla plataforma API para enviar emails desde tus aplicaciones.

Cómo construir la Aplicación con Next.js

En esta sección, crearás una aplicación sencilla de soporte de cliente. La aplicación incluirá un formulario para usuarios para enviar sus solicitudes, el cual dispara una notificación de email confirmando que un ticket de soporte ha sido creado.

Para comenzar, primero configuraremos la interfaz de usuario y un endpoint de la API.

Ejecuta el siguiente comando para crear un nuevo proyecto de Next.js con TypeScript:

npx create-next-app react-email-resend

Actualiza el archivo app/page.tsx para renderizar un formulario que recoge los detalles del cliente, incluyendo su nombre completo, la dirección de email, el asunto del ticket, y un mensaje con detalles describiendo el problema. Cuando el formulario se envía, los datos son registrados a la consola usando la función handleSubmit.

"use client";
import support from "@/app/images/support.jpg";
import { useState } from "react";
import Image from "next/image";

export default function Page() {
    //👇🏻 estados de las entradas
    const [name, setName] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [subject, setSubject] = useState<string>("");
    const [content, setContent] = useState<string>("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        //👇🏻 registra las entradas del usuario
        console.log({ name, email, subject, content });
    };
return ({/** -- elementos de UI -- */})
}

Regresa los elementos UI del formulario que aceptan el nombre completo del usuario, la dirección de email, asunto del ticket, y un mensaje con los detalles describiendo el problema.

    return (
        <main className='w-full min-h-screen flex items-center justify-between'>
                <form className='w-full' onSubmit={handleSubmit}>
                    <label htmlFor='name' className='opacity-60'>
                        Full Name
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='name'
                        required
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />

                    <label htmlFor='email' className='opacity-60'>
                        Email Address
                    </label>
                    <input
                        type='email'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='email'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />

                    <label htmlFor='subject' className='opacity-60'>
                        Subject
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='subject'
                        value={subject}
                        onChange={(e) => setSubject(e.target.value)}
                        required
                    />

                    <label htmlFor='message' className='opacity-60'>
                        Message
                    </label>
                    <textarea
                        rows={7}
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='message'
                        required
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                    />

                    <button className='w-full bg-blue-500 py-4 px-3 rounded-md font-bold text-blue-50'>
                        SEND MESSAGE
                    </button>
                </form>
            </div>
        </main>
    );

Aquí está la página resultante del componente:

Luego, crea un endpoint de la API (/api/route.ts) que acepta las entradas del cliente.

cd app
mkdir api && cd api
touch route.ts

Copia el siguiente código en el archivo api/route.ts. El endpoint de la API registra la entrada del cliente a la consola después de recibirla.

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    const { name, email, subject, content } = await req.json();
    //👇🏻 registra los contenidos
    console.log({ name, email, subject, content });
    return NextResponse.json({
        message: "Email enviado con éxito",
        data,
 });
}

Actualiza la función handleSubmit para enviar los datos del cliente al endpoint de la API y regresa la respuesta JSON:

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
        const response = await fetch("/api", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name, email, subject, content }),
        });
        const data = await response.json();
        alert(data.message);
    } catch (error) {
        console.error(error);
        alert("Un error ocurrió, por favor intenta nuevamente más tarde");
    }
    setName("");
    setEmail("");
    setSubject("");
    setContent("");
};

¡Felicidades! Has configurado la colección de datos y el envío. En las próximas secciones, te mostraré cómo crear y enviar plantillas de email con React Email y Resend.

Cómo crear Plantillas de Email usando React Email

React Email te permite construir y enviar componentes de email usando React y TypeScript. Soporta múltiples clientes de email, incluyendo Gmail, Mail de Yahoo, Outlook, y Mail de Apple.

React Email también provee múltiples componentes UI que te permiten personalizar las plantillas de email según tu diseño preferido usando componentes de React JSX/TSX.

Instala el paquete React Email y sus componentes al ejecutar el fragmento de código de abajo:

npm install react-email -D -E
npm install @react-email/components -E

Incluye este escript en tu archivo package.json. Dirige a React Email a dónde están localizados las plantillas de email en tu proyecto.

  "scripts": {
    "email": "email dev --dir src/emails"
  },

Una de las características de React Email es la habilidad de pre-visualizar tu plantilla de email en tu navegador durante el desarrollo, permitiéndote ver cómo aparecerá en el email del receptor.

Así que luego, crea una carpeta emails que contenga un archivo TicketCreated.tsx dentro de la carpeta src de Next.js y copia el siguiente fragmento de código en el archivo:

import * as React from "react";
import {
    Body,
    Container,
    Head,
    Heading,
    Hr,
    Html,
    Link,
    Preview,
    Text,
    Tailwind,
} from "@react-email/components";

interface TicketCreatedProps {
    username: string;
    ticketID: string;
}

const baseUrl = process.env.VERCEL_URL || "http://localhost:3000";

En el fragmento de código de arriba, importamos los componentes necesarios para construir la plantilla de email.

Luego, agrega el componente TicketCreated al archivo para renderizar la plantilla de email usando los componentes de React Email.

export const TicketCreated = ({ username, ticketID }: TicketCreatedProps) => {
    return (
        <Html>
            <Head />
            <Preview>Email de Confirmación del Ticket de Soporte 🎉</Preview>
            <Tailwind>
                <Body className='bg-white my-auto mx-auto font-sans px-2'>
                    <Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]'>
                        <Heading className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
                            Tu Ticket ha sido creado
                        </Heading>
                        <Text className='text-black text-[14px] leading-[24px]'>
                        Hola {username},
                        </Text>
                        <Text className='text-black text-[14px] leading-[24px]'>
                            <strong>El Ticket de Soporte</strong> (<Link href={`${baseUrl}/ticket/${ticketID}`} className='text-blue-600 no-underline'>{`#${ticketID}`}</Link>) ha sido creado con éxito.
                        </Text>

                        <Text className='text-black text-[14px] leading-[24px]'>El Equipo de Soporte revisará tu ticket y volverán contigo en breve.
                        </Text>

                        <Hr className='border border-solid border-[#eaeaea] my-[26px] mx-0 w-full' />
                        <Text className='text-[#666666] text-[12px] leading-[24px]'>Este mensaje estaba dirigido a {" "} <span className='text-black'>{username}</span>. Si no creaste este ticket, por favor ignora este email.
                        </Text>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
};

Finalmente, expórtalo y agrega un valor predeterminado para las props:

TicketCreated.PreviewProps = {
    username: "alanturing",
    ticketID: "9083475",
} as TicketCreatedProps;

export default TicketCreated;

Ejecuta npm run email en tu terminal para pre-visualizar la plantilla de email.

Esta plantilla de email notifica a los clientes que su ticket de soporte ha sido creado y que alguien del equipo de soporte se comunicarán con ellos.

React Email ofrece una variedad de plantillas de email pre-diseñada, facilitando el crear email con estilos hermosos para distintos propósitos. Puedes revisar el demo disponible para ver ejemplos de lo que es posible.

Cómo enviar Emails con Resend

Resend es una API de email sencilla que te permite enviar emails dentro de tu aplicación de software. Soporta un montón de lenguajes de programación, incluyendo JavaScript (Next.js, Express, Node.js), Python, PHP, Go, and Rust, entre otros.

Resend y React Email pueden ser fácilmente integrados juntamente ya que el co-fundador de Resend, Bu Kinoshita, es también el creador de React Email.

Crea una cuenta en Resend. Una vez que iniciaste sesión, navega hacia la sección de claves de API en tu panel y copia tu clave de API en un archivo .env.local.

//👇🏻 archivo .env.local 
RESEND_API_KEY=<RESEND_API_KEY>

Actualiza el endpoint de la API para enviar un email usando la plantilla de React Email, como se muestra abajo:

import { NextRequest, NextResponse } from "next/server";
//👇🏻 función generado del ID del boleto
import { v4 as generateID } from "uuid";
//👇🏻 importa la plantilla de email
import TicketCreated from "@/emails/TicketCreated";
//👇🏻 imports Resend
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
    //👇🏻 acepta la entrada del cliente desde el frontend
    const { name, email, subject, content } = await req.json();
    //👇🏻 los registra
    console.log({ name, email, subject, content });
    //👇🏻 envia una email usando la plantilla de email
    const { data, error } = await resend.emails.send({
        from: "Acme <onboarding@resend.dev>",
        to: [email],
        subject: "Email de Confirmación del Ticket 🎉",
        react: TicketCreated({ username: name, ticketID: generateID() }),
    });

    if (error) {
        return NextResponse.json(
            { message: "Hubo un error al enviar el email" },
            { status: 500 }
        );
    }

    return NextResponse.json({
        message: "El email se envió con éxito",
        data,
    });
}

¡Felicidades!🥳 Has completado este tutorial.

Aquí un breve demo de la aplicación:

Próximos Pasos

En este tutorial, aprendiste cómo crear plantillas de email con React Email y enviarlos usando Resend. Ambos paquetes te permiten integra la comunicación de email fácilmente con tus aplicaciones.

Ya sean simples las notificaciones de email, los boletines informativos, o campañas de marketing, React Email y Resend ofrecen una solución eficiente y personalizable para satisfacer tus necesidades.

Algunos recursos útiles incluyen:

• Componentes pre-construidas de React Email
• Documentación de React Email
• Cómo instalar Resend en aplicaciones de Next.js

¡Gracias por leer!

El equipo detrás de Next.js ha lanzado recientemente Next.js 13, que tiene un montón de características nuevas como un nuevo directorio app, componentes para el lado del servidor y del cliente, entre otros.

En este artículo, aprenderás cómo usar el nuevo Next.js 13 y la Base de Datos Firebase para crear una aplicación full stack.

Antes de continuar, para poder seguir el artículo necesitas tener un conocimiento básico de JavaScript, React y Next.js. Si necesitas repasar alguno de esos conceptos, aquí tienes algún recursos para principiantes:

• Aprende JavaScript - contenidos y curso interactivo [en inglés]
• Aprende React - curso completo [en inglés]
• Aprende Next.js - cuadernillo completo [en inglés]

Si estás listo, empecemos.

Cómo crear un nuevo proyecto de Next.js 13

Para instalar Next.js, necesitas tener instalado Node.js y npm/yarn instalado en tu computadora. Si no los tienes, puedes bajarlos desde sus sitios oficiales: Node.js website y npm website (aunque npm está incluido al instalar Node).

1. En el directorio que quieras, inicia la terminal de tu computadora y ejecuta el siguiente comando: npx create-next-app@13 --experimental-app.
2. Elige el nombre de tu proyecto y presiona enter para crearlo y esperar a que lo instale.
3. Se creará un nuevo directorio con el nombre de tu proyecto con todos archivos necesarios.
4. Ejecuta el comando cd para cambiar al directorio nuevo:
   cd my-project-name
5. Y para iniciar el servidor de desarrollo, ejecuta el siguiente comando:

// si estás usando yarn
yarn run dev

// si estás usando npm
npm run dev

6. Ejecutar este comando iniciará el servidor de desarrollo para que puedas ver tu aplicación en tiempo real en http://localhost:3000.

Cómo instalar Firebase en Next.js

Firebase es una plataforma Baas - Backend-as-a-Service, por su sigla en inglés- que ofrece servicios como autenticación, bases de datos en tiempo real, almacenamiento en la nube, análisis de datos, entre otros.

En este tutorial, usaremos Firebase como nuestra base de datos. Sigue estos pasos para crear una aplicación Firebase:

1. En https://console.firebase.google.com/, inicia sesión con tu cuenta de Google.
2. Haz click en Crear proyecto y ponle un nombre. Luego, haz clic en Continuar.
3. En la pantalla siguiente puedes elegir si quieres habilitar métodos de análisis de datos para tu proyecto.
4. Haz clic en Crear proyecto.

Luego, necesitas crear una aplicación web. En la página de inicio, haz clic en el ícono de web para crear la aplicación:

Ponle un nombre a tu aplicación y haz clic en Registrar app:

Copia el archivo de configuración ya que vamos a necesitarlo luego. Haz clic en continuar hasta que termines.

Una vez que estés de vuelta en la página de inicio de tu proyecto, elige un producto que quieras agregar en tu aplicación. Para este tutorial, sólo agrega Authentication y Cloud Firestore:

Para Authentication, elige Método de acceso y agrega Correo electrónico/contraseña.

Después de instalar exitosamente Firebase, ya lo podemos usar como back-end en tu aplicación de Next.js 13.

Para usar Firebase con Next.js, sigue estos pasos.

Instala la última versión del SDK de Firebase en tu proyecto Next.js ejecutando el siguiente comando en tu terminal:

yarn add firebase

// o si estás usando npm
npm install firebase

Crea un archivo .env en el directorio raíz de tu proyecto Next.js y copia tus archivos de configuración de Firebase (los que habías copiado antes). Debería verse así:

NEXT_PUBLIC_FIREBASE_API_KEY=api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=auth-domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=storage-bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=sender-id
NEXT_PUBLIC_FIREBASE_APP_ID=app-id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=analytic-id

Luego, para que se vea todo más prolijo, en tu directorio src crea una carpeta con el nombre firebase y crea un archivo config.js con el siguiente código;

// Importa las funciones que necesites de los SDKs 
import { initializeApp, getApps } from "firebase/app";

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Inicializa Firebase
let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

export default firebase_app;

Con esto ya listo, ya puedes utilizar Firebase como base de datos en tu aplicación Next.js.

Cómo instalar Authentication

Al querer construir aplicaciones fullstack, lo primero en lo que pensamos es la autenticación de usuarios. Con Firebase, podemos crear una forma de registrar usuarios o de que inicien sesión muy fácilmente.

En tu directorio src > firebase, crea una nueva carpeta con el nombre auth. Todo el código relacionado con la autenticación de firebase lo guardaremos aquí.

Luego, crea un archivo signup.js  dentro del directorio src > firebase > auth con el siguiente código:

import firebase_app from "../config";
import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);


export default async function signUp(email, password) {
    let result = null,
        error = null;
    try {
        result = await createUserWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Vamos a descrifrar este código. Lo que estamos haciendo aquí es exportando la función signUp() que usa el método createUserWithEmailAndPassword() de Firebase para poder registrar nuevos usuarios. Luego de hacer esto, vamos a poder usar la función signUp() en cualquier lado de nuestra app.

En la misma carpeta, agreguemos nuestra función signIn(). Para hacer esto, crea un archivo signin.js con el siguiente código:

import firebase_app from "../config";
import { signInWithEmailAndPassword, getAuth } from "firebase/auth";

const auth = getAuth(firebase_app);

export default async function signIn(email, password) {
    let result = null,
        error = null;
    try {
        result = await signInWithEmailAndPassword(auth, email, password);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Cómo crear las páginas para el inicio de sesión y el registro de usuarios en Next.js

En Next.js 13 se puede crear nuevas páginas dentro del directorio app. Cada página es una carpeta con un archivo page.js. Para aprender más sobre cómo crear páginas, puedes leer la documentación de Next.js al respecto [en inglés].

Para crear un página de registro de usuarios un nuevo archivo page.js en signup, dentro de tu directorio app. Luego, agrega el siguiente código:

'use client'
import React from "react";
import signUp from "@/firebase/auth/signup";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signUp(email, password);

        if (error) {
            return console.log(error)
        }

        // else successful
        console.log(result)
        return router.push("/admin")
    }
    return (<div className="wrapper">
        <div className="form-wrapper">
            <h1 className="mt-60 mb-30">Sign up</h1>
            <form onSubmit={handleForm} className="form">
                <label htmlFor="email">
                    <p>Email</p>
                    <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                </label>
                <label htmlFor="password">
                    <p>Password</p>
                    <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                </label>
                <button type="submit">Sign up</button>
            </form>
        </div>
    </div>);
}

export default Page;`

Por defecto, cada página que se agrega al directorio page.js es un componente del servidor [enlace a la documentación en inglés] y por lo tanto no permite agregar interactividad de lado del servidor como un onSubmit() a elementos de formulario. Para poder agregar esta interactividad, tenemos que decirle a Next.js que queremos un componente Cliente. Para hacer esto, añadimos lo siguiente al comienzo del archivo y antes de importar cualquier otro elemento:

'use client'

// código del componente

Del mismo modo vamos a crear nuestra página de inicio de sesión. Para crear esta página, crea un archivo page.js en signin, dentro de tu directorio app, y agrega el siguiente código:

'use client'
import React from "react";
import signIn from "@/firebase/auth/signin";
import { useRouter } from 'next/navigation'

function Page() {
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    const router = useRouter()

    const handleForm = async (event) => {
        event.preventDefault()

        const { result, error } = await signIn(email, password);

        if (error) {
            return console.log(error)
        }

        // sino exitoso
        console.log(result)
        return router.push("/admin")
    }
    return (<div className="wrapper">
        <div className="form-wrapper">
            <h1 className="mt-60 mb-30">Sign up</h1>
            <form onSubmit={handleForm} className="form">
                <label htmlFor="email">
                    <p>Email</p>
                    <input onChange={(e) => setEmail(e.target.value)} required type="email" name="email" id="email" placeholder="example@mail.com" />
                </label>
                <label htmlFor="password">
                    <p>Password</p>
                    <input onChange={(e) => setPassword(e.target.value)} required type="password" name="password" id="password" placeholder="password" />
                </label>
                <button type="submit">Sign up</button>
            </form>
        </div>

    </div>);
}

export default Page;

Cómo saber si hubo algún cambio de autenticación

Mientras estás usando la aplicación, siempre vamos a querer saber si el usuario ha iniciado sesión o no. Si el usuario ha iniciado sesión, es posible crear páginas protegidas y mostrarle ciertos contenidos sólo a él. Firebase tiene el método onAuthStateChanged() para poder saber si hubo cambios.

Para que la información del usuario obtenida con el método mencionado arriba pueda ser usada en todo la aplicación, vamos a usar la API React Context. Crea un carpeta con el nombre context en tu directorio src. Dentro del directorio directory, crea un archivo con el nombre AuthContext.js y agrega el siguiente código:

import React from 'react';
import {
    onAuthStateChanged,
    getAuth,
} from 'firebase/auth';
import firebase_app from '@/firebase/config';

const auth = getAuth(firebase_app);

export const AuthContext = React.createContext({});

export const useAuthContext = () => React.useContext(AuthContext);

export const AuthContextProvider = ({
    children,
}) => {
    const [user, setUser] = React.useState(null);
    const [loading, setLoading] = React.useState(true);

    React.useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
            } else {
                setUser(null);
            }
            setLoading(false);
        });

        return () => unsubscribe();
    }, []);

    return (
        <AuthContext.Provider value={{ user }}>
            {loading ? <div>Loading...</div> : children}
        </AuthContext.Provider>
    );
};

Con el código de arriba simplemente creamos un Provider que devuelve el objeto usuario si el usuario inició sesión. De lo contrario, sólo devolverá null.

Para poder usar el valor que se le pasó a <AuthContext.Provider>  vamos a exportar useAuthContext desde el archivo y así usar el valor de user.

Antes de poder usar este contexto, necesitamos envolver todos los componentes con AuthContextProvider. Para hacer esto, abrimos el archivo layout.js dentro del directorio src > app y editamos el código con lo siguiente:

'use client'
import './globals.css'
import { AuthContextProvider } from '@/context/AuthContext'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/*
        <head /> contendrá los componentes devueltos por el padre más cercano
        head.js. Encuentra más información en https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>
        <AuthContextProvider>
          {children}
        </AuthContextProvider>
      </body>
    </html>
  )
}

Ahora ya podemos crear páginas protegidas y mostrar contenido específico a usuarios distintos.

Cómo crear páginas protegidas

Dentro del directorio app, crea el directorio admin > page.js y agrega el siguiente código:

'use client'
import React from "react";
import { useAuthContext } from "@/context/AuthContext";
import { useRouter } from "next/navigation";
function Page() {
    const { user } = useAuthContext()
    const router = useRouter()

    React.useEffect(() => {
        if (user == null) router.push("/")
    }, [user])

    return (<h1>Solamente los usuarios que iniciaron sesión pueden ver esta página</h1>);
}

export default Page;

Si el usuario es null, lo redireccionamos a la página inicial. De lo contrario, si no es null, le mostramos la página protegida.

Cómo comunicarse con nuestra base de datos

Ahora que ya lidiamos con la parte de autenticación, podemos enfocarnos en la comunicación con nuestra base de datos. Como base de datos vamos a usar Firestore.

Para seguir haciendo todo ordenado, vamos a crear un nuevo directorio llamado firebase > firestore. Dentro de este directorio vamos a guardar todo el código relacionado con Firestore.

Cómo agregar documentos a Firestore

Dentro del directorio firestore, crea un archivo con el nombre addData.js y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function addData(colllection, id, data) {
    let result = null;
    let error = null;

    try {
        result = await setDoc(doc(db, colllection, id), data, {
            merge: true,
        });
    } catch (e) {
        error = e;
    }

    return { result, error };
}

Este código ya debería serte familiar: estamos exportando una función que permite agregar información a nuestra base de datos firestore.

Ahora ya podemos usar esta función addData() desde cualquier componente para agregar información a nuestra base de datos:

'use client'
import addData from "@/firebase/firestore/addData";

export default function Home() {

  const handleForm = async () => {
    const data = {
      name: 'John snow',
      house: 'Stark'
    }
    const { result, error } = await addData('users', 'user-id', data)

    if (error) {
      return console.log(error)
    }
  }
  
  return (
    ...
  )
}

Cómo podemos obtener un documento desde Firestore

Usando un método similar, podemos obtener un documento desde nuestra base de datos Firebase.

Crea un archivo getData.js dentro del directorio Firestore y agrega el siguiente código:

import firebase_app from "../config";
import { getFirestore, doc, getDoc } from "firebase/firestore";

const db = getFirestore(firebase_app)
export default async function getDoument(collection, id) {
    let docRef = doc(db, collection, id);

    let result = null;
    let error = null;

    try {
        result = await getDoc(docRef);
    } catch (e) {
        error = e;
    }

    return { result, error };
}

También podemos usar está función en cualquier componente que quieras.

Conclusión

En este artículo, aprendimos cómo construir una aplicación fullstack usando Firebase y Next.js 13 para agregar autenticación e interacción con nuestra base de datos.

¡Feliz codificación!

Una plataforma de ejecución de código te permite escribir código en tu lenguaje de programación favorito y ejecutar ese código en la misma plataforma.

Puedes ver perfectamente una salida del programa que has escrito (por ejemplo, un programa de búsqueda binaria escrito en JavaScript).

Hoy, vamos a construir una plataforma de ejecución de código en línea llamada CodeRush el cual puede compilar y ejecutar código en más de 40+ lenguajes de programación diferentes.

¿Qué estaremos construyendo?

Código Fuente | Live Demo

Vamos a construir un rico editor de código que tiene las siguientes características:

• Un Editor de Código (Monaco Editor) que alimenta a VS Code también.
• Puede compilar código en una aplicación web con entrada y salida estándar con soporte a 40 lenguajes de programación.
• Puedes cambiar el tema del editor desde una lista de temas disponibles.
• Puedes obtener información del código ejecutado (tiempo tomado por el código, memoria usada, estado, y más).

Pila de Tecnologías

Para el proyecto, vamos a usar la siguiente pila de tecnologías:

• React.js – Para el front-end
• TailwindCSS – Para los estilos
• Judge0 – Para compilar y ejecutar nuestro código
• RapidAPI – Para desplegar código Judge0 rápidamente
• Monaco Editor – El editor de código que alimenta el proyecto

Estructura del Proyecto

La estructura del proyecto bastante simple y fácil de entender:

• Components: todos los componentes / porciones de código reusables están aquí (Ejemplo: CodeEditorWindow y Landing)
• hooks: todos los custom hooks están aquí. (Vamos a usar hooks de presiones de teclas para compilar nuestro código usando los eventos del teclado)
• lib: todas las funciones de librería están aquí. (Crearemos una función para definir nuestro tema aquí)
• constants: todas las constantes como languageOptions y customStyles para los desplegables irán aquí.
• utils: funciones de utilidad generales para ayudar a mantener el código van aquí.

Flujo de la aplicación:

Antes de que indaguemos en el código, entendamos el flujo de la aplicación y cómo deberíamos codificarlo desde cero.

• Un usuario llega a la aplicación web y puede seleccionar sus lenguajes de programación preferidos (por defecto es JavaScript).
• Una vez que el usuario termina de escribir su código, pueden compilar su código y ver la salida/resultados en la ventana de salida.
• Verán éxito o fracaso de sus porciones de código. Todo es visible en la ventana de salida del código.
• El usuario puede agregar entradas personalizadas para sus porciones de código, y el juez (nuestro compilador en línea) tomará en cuenta la entrada personalizada la cual el usuario provee.
• El usuario puede ver detalles relevantes del código que fue ejecutado (Ejemplo: tomó 5ms para que el código se compile y se ejecute, 2024 kb de memoria fue usado, y el estado de tiempo de ejecución fue exitoso).

Ahora que estamos un poco más familiar con la estructura de carpetas y el flujo de la aplicación, indaguemos en el código y entendamos cómo funciona todo.

Cómo construir el componente editor de código

Primeramente, el componente editor de código está formado por el Editor Monaco, el cual es un paquete de NPM que podemos usar y personalizar.

// CodeEditorWindow.js

import React, { useState } from "react";

import Editor from "@monaco-editor/react";

const CodeEditorWindow = ({ onChange, language, code, theme }) => {
  const [value, setValue] = useState(code || "");

  const handleEditorChange = (value) => {
    setValue(value);
    onChange("code", value);
  };

  return (
    <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
      <Editor
        height="85vh"
        width={`100%`}
        language={language || "javascript"}
        value={value}
        theme={theme}
        defaultValue="// some comment"
        onChange={handleEditorChange}
      />
    </div>
  );
};
export default CodeEditorWindow;

El componente Editor viene del paquete @monaco-editor/react que nos permite poner en marcha un editor de código con una altura de 85vh como se especifica.

El componente Editor toma un par de props:

• language: el lenguaje por el cual necesitamos resaltado de sintaxis e intellisense
• theme: Los colores y fondos de la porción del código (lo configuraremos en la última parte del tutorial)
• value: El valor del código actual que va en el editor de código
• onChange: esto se dispara cuando el valor en el editor de código cambia. Necesitamos guardar el valor modificado en el estado así podemos, más adelante, llamar a la API Judge0 para compilarlo

El editor recibe los props onChange, language, code, y theme de su componente padre, el cual es Landing.js. Cada vez que el value en el editor de código cambia, llamamos al manejador onChange que está presente en el componente padre Landing.

Cómo construir el componente landing

El componente landing consiste mayormente de 3 partes:

• El Actions Bar el cual tiene los componentes Languages y los desplegables Themes.
• El componente Code Editor Window
• Los componentes Output and Custom Input

// Landing.js

import React, { useEffect, useState } from "react";
import CodeEditorWindow from "./CodeEditorWindow";
import axios from "axios";
import { classnames } from "../utils/general";
import { languageOptions } from "../constants/languageOptions";

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import { defineTheme } from "../lib/defineTheme";
import useKeyPress from "../hooks/useKeyPress";
import Footer from "./Footer";
import OutputWindow from "./OutputWindow";
import CustomInput from "./CustomInput";
import OutputDetails from "./OutputDetails";
import ThemeDropdown from "./ThemeDropdown";
import LanguagesDropdown from "./LanguagesDropdown";

const javascriptDefault = `// algún comentario`;

const Landing = () => {
  const [code, setCode] = useState(javascriptDefault);
  const [customInput, setCustomInput] = useState("");
  const [outputDetails, setOutputDetails] = useState(null);
  const [processing, setProcessing] = useState(null);
  const [theme, setTheme] = useState("cobalt");
  const [language, setLanguage] = useState(languageOptions[0]);

  const enterPress = useKeyPress("Enter");
  const ctrlPress = useKeyPress("Control");

  const onSelectChange = (sl) => {
    console.log("Opción seleccionada...", sl);
    setLanguage(sl);
  };

  useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);
  const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("caso no manejado!", action, data);
      }
    }
  };
  const handleCompile = () => {
    // Haremos la implementación luego en el código
  };

  const checkStatus = async (token) => {
    // Haremos la implementación luego en el código
  };

  function handleThemeChange(th) {
    // Haremos la implementación luego en el código
  }
  useEffect(() => {
    defineTheme("oceanic-next").then((_) =>
      setTheme({ value: "oceanic-next", label: "Oceanic Next" })
    );
  }, []);

  const showSuccessToast = (msg) => {
    toast.success(msg || `Compilado satisfactoriamente!`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };
  const showErrorToast = (msg) => {
    toast.error(msg || `¡Algo salió mal! Por favor intenta otra vez.`, {
      position: "top-right",
      autoClose: 1000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  return (
    <>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
      <div className="flex flex-row">
        <div className="px-4 py-2">
          <LanguagesDropdown onSelectChange={onSelectChange} />
        </div>
        <div className="px-4 py-2">
          <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
        </div>
      </div>
      <div className="flex flex-row space-x-4 items-start px-4 py-4">
        <div className="flex flex-col w-full h-full justify-start items-end">
          <CodeEditorWindow
            code={code}
            onChange={onChange}
            language={language?.value}
            theme={theme.value}
          />
        </div>

        <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
          <OutputWindow outputDetails={outputDetails} />
          <div className="flex flex-col items-end">
            <CustomInput
              customInput={customInput}
              setCustomInput={setCustomInput}
            />
            <button
              onClick={handleCompile}
              disabled={!code}
              className={classnames(
                "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
                !code ? "opacity-50" : ""
              )}
            >
              {processing ? "Procesando..." : "Compilar y ejecutar"}
            </button>
          </div>
          {outputDetails && <OutputDetails outputDetails={outputDetails} />}
        </div>
      </div>
      <Footer />
    </>
  );
};
export default Landing;

Entendamos la estructura básica de la página landing en más detalle.

Componente CodeEditorWindow

Como lo vimos antes, el componente CodeEditorWindow tomará en cuenta el código (el cual sigue cambiando) y un método onChange el cual mantendrá un registro de los cambios del código.

// implementación del método onChange

 const onChange = (action, data) => {
    switch (action) {
      case "code": {
        setCode(data);
        break;
      }
      default: {
        console.warn("caso no manejado!", action, data);
      }
    }
  };

Simplemente establecemos el estado del code y hacemos un registro de los cambios.

El componente CodeEditorWindow también toma en cuenta la prop language, el cual es el actual lenguaje seleccionado que necesitamos para el resaltado de sintaxis y para intellisense.

He creado un arreglo languageOptions el cual mantiene un registro de las props de lenguajes aceptados por el Editor Monaco y también maneja la compilación (mantenemos un registro del languageId que es aceptado por las APIs de judge0).

// constants/languageOptions.js

export const languageOptions = [
  {
    id: 63,
    name: "JavaScript (Node.js 12.14.0)",
    label: "JavaScript (Node.js 12.14.0)",
    value: "javascript",
  },
  {
    id: 45,
    name: "Assembly (NASM 2.14.02)",
    label: "Assembly (NASM 2.14.02)",
    value: "assembly",
  },
    ...
    ...
    ...
    ...
    ...
    ...
    
  {
    id: 84,
    name: "Visual Basic.Net (vbnc 0.0.0.5943)",
    label: "Visual Basic.Net (vbnc 0.0.0.5943)",
    value: "vbnet",
  },
];

Cada objeto languageOptions contiene las claves id, name, label y value. El arreglo entero de languageOptions puede ser tomado y puesto dentro del despegable y suplirlos como opciones.

Cuando el estado del despegable cambie, el método onSelectChange mantiene un registro del id seleccionado y cambia el estado apropiadamente.

Componente LanguageDropdown

// LanguageDropdown.js

import React from "react";
import Select from "react-select";
import { customStyles } from "../constants/customStyles";
import { languageOptions } from "../constants/languageOptions";

const LanguagesDropdown = ({ onSelectChange }) => {
  return (
    <Select
      placeholder={`Filter By Category`}
      options={languageOptions}
      styles={customStyles}
      defaultValue={languageOptions[0]}
      onChange={(selectedOption) => onSelectChange(selectedOption)}
    />
  );
};

export default LanguagesDropdown;

Para el despegable, vamos a usar el paquete react-select que se encarga de los despegables y sus manejadores de cambio.

React select toma defaultValue y options como los parámetros mayores. options es un arreglo (y vamos a pasar languageOptions aquí) que automáticamente muestra todos los valores relevantes del despegable.

La prop defaultValue es el valor por defecto que es provisto al componente. Vamos a mantener a JavaScript como el lenguaje por defecto (el cual es el primero de nuestro arreglo de lenguajes).

Cuando sea que el usuario cambie el lenguaje, cambiamos el lenguaje con el callback onSelectChange:

const onSelectChange = (sl) => {
    setLanguage(sl);
};

Componente ThemeDropdown

El componente ThemeDropdown en realidad es muy similar al componente LanguageDropdown (con la UI y el paquete react-select).

// ThemeDropdown.js

import React from "react";
import Select from "react-select";
import monacoThemes from "monaco-themes/themes/themelist";
import { customStyles } from "../constants/customStyles";

const ThemeDropdown = ({ handleThemeChange, theme }) => {
  return (
    <Select
      placeholder={`Select Theme`}
      // options={languageOptions}
      options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({
        label: themeName,
        value: themeId,
        key: themeId,
      }))}
      value={theme}
      styles={customStyles}
      onChange={handleThemeChange}
    />
  );
};

export default ThemeDropdown;

Aquí, vamos a usar el paquete monacoThemes para que nos ayude con los diferentes temas preciosos que están disponibles en el internet para el Editor Monaco.

Tenemos una lista de temas disponibles a nuestra disposición.

// lib/defineTheme.js

import { loader } from "@monaco-editor/react";

const monacoThemes = {
  active4d: "Active4D",
  "all-hallows-eve": "All Hallows Eve",
  amy: "Amy",
  "birds-of-paradise": "Birds of Paradise",
  blackboard: "Blackboard",
  "brilliance-black": "Brilliance Black",
  "brilliance-dull": "Brilliance Dull",
  "chrome-devtools": "Chrome DevTools",
  "clouds-midnight": "Clouds Midnight",
  clouds: "Clouds",
  cobalt: "Cobalt",
  dawn: "Dawn",
  dreamweaver: "Dreamweaver",
  eiffel: "Eiffel",
  "espresso-libre": "Espresso Libre",
  github: "GitHub",
  idle: "IDLE",
  katzenmilch: "Katzenmilch",
  "kuroir-theme": "Kuroir Theme",
  lazy: "LAZY",
  "magicwb--amiga-": "MagicWB (Amiga)",
  "merbivore-soft": "Merbivore Soft",
  merbivore: "Merbivore",
  "monokai-bright": "Monokai Bright",
  monokai: "Monokai",
  "night-owl": "Night Owl",
  "oceanic-next": "Oceanic Next",
  "pastels-on-dark": "Pastels on Dark",
  "slush-and-poppies": "Slush and Poppies",
  "solarized-dark": "Solarized-dark",
  "solarized-light": "Solarized-light",
  spacecadet: "SpaceCadet",
  sunburst: "Sunburst",
  "textmate--mac-classic-": "Textmate (Mac Classic)",
  "tomorrow-night-blue": "Tomorrow-Night-Blue",
  "tomorrow-night-bright": "Tomorrow-Night-Bright",
  "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
  "tomorrow-night": "Tomorrow-Night",
  tomorrow: "Tomorrow",
  twilight: "Twilight",
  "upstream-sunburst": "Upstream Sunburst",
  "vibrant-ink": "Vibrant Ink",
  "xcode-default": "Xcode_default",
  zenburnesque: "Zenburnesque",
  iplastic: "iPlastic",
  idlefingers: "idleFingers",
  krtheme: "krTheme",
  monoindustrial: "monoindustrial",
};

const defineTheme = (theme) => {
  return new Promise((res) => {
    Promise.all([
      loader.init(),
      import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
    ]).then(([monaco, themeData]) => {
      monaco.editor.defineTheme(theme, themeData);
      res();
    });
  });
};

export { defineTheme };

El paquete monaco-themes nos provee con un montón de temas que podemos usar para definir cómo va a lucir nuestro editor de código.

La función defineTheme se encarga de los diferentes temas de donde el usuario podría seleccionar. La función defineTheme regresa una promesa que en realidad establece el tema del editor Monaco usando la acción monaco.editor.defineTheme(theme, themeData). Esta línea de código es responsable en sí de cambiar los temas dentro de una ventana de código del Editor Monaco.

La función defineTheme es llamada con la ayuda del callback onChange que vimos anteriormente en el componente ThemeDropdown.js.

// Landing.js - función handleThemeChange()

function handleThemeChange(th) {
    const theme = th;
    console.log("theme...", theme);

    if (["light", "vs-dark"].includes(theme.value)) {
      setTheme(theme);
    } else {
      defineTheme(theme.value).then((_) => setTheme(theme));
    }
  }
  

La función handleThemeChange() verifica si el tema es light o dark. Estos temas por defecto están disponibles en el componente MonacoEditor y no necesitamos llamar al método defineTheme() para esto.

Si no, simplemente llamamos al componente defineTheme() y ponemos el estado del tema seleccionado.

Cómo compilar el código con Judge0

Adentrémonos a la parte sustanciosa de la aplicación – el cual es compilar el código con diferentes lenguajes.

Para compilar nuestro código, vamos a usar Judge0. Judge0 es un sistema simple de ejecución de código, de código abierto, con el que podemos interactuar.

Podemos hacer una simple llamada API con algunos parámetros (código de fuente, ID de lenguaje) y obtenemos la salida como una respuesta.

Configuremos Judge0 y sigamos con los siguientes pasos:

• Dirígete a Judge0 y elige el Plan Básico
• Judge0 está hospedado en realidad en RapidAPI. Ve y suscríbete al plan básico.
• Una vez que estés suscrito, puedes copiar el RAPIDAPI_HOST y la RAPIDAPI_KEY los cuales son necesarios para hacer las llamadas a la API para nuestro sistema de ejecución de código.

El panel luce algo así:

Los parámetros X-RapidAPI-Host y X-RapidAPI-Key serán requeridos para nuestras llamadas a la API. Guárdalo para un uso futuro en el archivo .env así:

REACT_APP_RAPID_API_HOST = YOUR_HOST_URL
REACT_APP_RAPID_API_KEY = YOUR_SECRET_KEY
REACT_APP_RAPID_API_URL = YOUR_SUBMISSIONS_URL

Es importante en React que inicialicemos nuestras variables de entorno con el prefijo REACT_APP.

La SUBMISSIONS_URL es la URL que vamos a usar. Básicamente consiste de tu host , seguido de una ruta /submission.

Por ejemplo: https://judge0-ce.p.rapidapi.com/submissions será la URL submissions en nuestro caso.

Una vez que tenemos las variables configuradas correctamente podemos continuar adelante y manejar la lógica de compilation.

Flujo de Compilación y Lógica

El flujo de compilación es como sigue:

• Cuando se hace clic en el botón Compile and Execute, el método handleCompile() es llamado.
• La función handleCompile() llama a nuestro backend Judge0 RapidAPI en el URL submissions con languageId , source_code, y stdin (customInput en nuestro caso) como parámetros del cuerpo.
• Los options también toman el host y el secret como encabezados.
• base64_encoded y fields son parámetros opcionales que pueden ser pasados.
• La petición POST submission registra nuestra petición en el servidor y crea un proceso. La respuesta de la petición post es un token que puede ser usado más adelante para verificar el estado de nuestra ejecución. (Hay varios estados – Procesando, Aceptado, Límite de Tiempo Excedido, Excepciones de Tiempo de Ejecución y más.)
• Una vez que nuestros resultados son regresados, podemos verificar condicionalmente si los resultados son exitosos o no y mostrar los resultados en nuestras pantallas.

Adentrémonos en el código y entendamos el método handleCompile().

const handleCompile = () => {
    setProcessing(true);
    const formData = {
      language_id: language.id,
      // codifica el código fuente en base64
      source_code: btoa(code),
      stdin: btoa(customInput),
    };
    const options = {
      method: "POST",
      url: process.env.REACT_APP_RAPID_API_URL,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "content-type": "application/json",
        "Content-Type": "application/json",
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
      data: formData,
    };

    axios
      .request(options)
      .then(function (response) {
        console.log("res.data", response.data);
        const token = response.data.token;
        checkStatus(token);
      })
      .catch((err) => {
        let error = err.response ? err.response.data : err;
        setProcessing(false);
        console.log(error);
      });
  };

Como se ve arriba, el método handleCompile() toma languageId, source_code y stdin. Nota el btoa antes de source_code y stdin. Esto es para codificar nuestras cadenas a base64 ya que estamos usando base64_encoded: true en nuestros parámetros para la API.

Cuando hay una respuesta exitosa y tenemos un token, llamamos al método checkStatus() para sondear la ruta /submissions/${token}.

const checkStatus = async (token) => {
    const options = {
      method: "GET",
      url: process.env.REACT_APP_RAPID_API_URL + "/" + token,
      params: { base64_encoded: "true", fields: "*" },
      headers: {
        "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
        "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
      },
    };
    try {
      let response = await axios.request(options);
      let statusId = response.data.status?.id;

      // Procesado - tenemos un resultado
      if (statusId === 1 || statusId === 2) {
        // todavía procesando
        setTimeout(() => {
          checkStatus(token)
        }, 2000)
        return
      } else {
        setProcessing(false)
        setOutputDetails(response.data)
        showSuccessToast(`Compilado satisfactoriamente!`)
        console.log('response.data', response.data)
        return
      }
    } catch (err) {
      console.log("err", err);
      setProcessing(false);
      showErrorToast();
    }
  };

Para obtener los resultados de nuestro código que enviamos anteriormente, necesitamos sondear a la API submissions con un token que recibimos como respuesta.

Como vimos arriba, vamos a hacer una petición GET al endpoint. Una vez que tengamos una respuesta, vamos a verificar  statusId === 1 || statusId === 2. Pero ¿Qué significa?

Tenemos un total de 14 estados asociados con cualquier porción de código que enviamos a la API, y esos son:

export const statuses = [
  {
    id: 1,
    description: "In Queue",
  },
  {
    id: 2,
    description: "Processing",
  },
  {
    id: 3,
    description: "Accepted",
  },
  {
    id: 4,
    description: "Wrong Answer",
  },
  {
    id: 5,
    description: "Time Limit Exceeded",
  },
  {
    id: 6,
    description: "Compilation Error",
  },
  {
    id: 7,
    description: "Runtime Error (SIGSEGV)",
  },
  {
    id: 8,
    description: "Runtime Error (SIGXFSZ)",
  },
  {
    id: 9,
    description: "Runtime Error (SIGFPE)",
  },
  {
    id: 10,
    description: "Runtime Error (SIGABRT)",
  },
  {
    id: 11,
    description: "Runtime Error (NZEC)",
  },
  {
    id: 12,
    description: "Runtime Error (Other)",
  },
  {
    id: 13,
    description: "Internal Error",
  },
  {
    id: 14,
    description: "Exec Format Error",
  },
];

Así que, si  statusId ===1 o statusId ===2 significa que nuestro código todavía está procesando y necesitamos llamar a la API de nuevo para verificar si obtenemos algún resultado o no.

Por esto, tenemos un setTimeout() en la condición if que llama a la función checkStatus() otra vez, el cual internamente llama a la API nuevamente y verifica el estado.

Si el estado es algo más que 2 o 3 significa que la ejecución de nuestro código ha sido completada y tenemos un resultado. Sea un código successfully compiled o un código Time Limit Exceeded – o tal vez sea un Runtime Exception. El statusId representa cada escenario y podemos replicarlos también.

Por ejemplo, while(true) nos dará un error time limit exceeded:

O si hacemos un error en la sintaxis, obtendremos un error de compilación:

De cualquier forma, vamos a obtener un resultado. Y vamos a almacenar este resultado en nuestro estado outputDetails. Esto es para asegurar que tenemos algo para mostrar en la parte derecha de la pantalla (el cual es la Pantalla de Salida).

Componente Output Window

import React from "react";

const OutputWindow = ({ outputDetails }) => {
  const getOutput = () => {
    let statusId = outputDetails?.status?.id;

    if (statusId === 6) {
      // error de compilación
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {atob(outputDetails?.compile_output)}
        </pre>
      );
    } else if (statusId === 3) {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-green-500">
          {atob(outputDetails.stdout) !== null
            ? `${atob(outputDetails.stdout)}`
            : null}
        </pre>
      );
    } else if (statusId === 5) {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {`Time Limit Exceeded`}
        </pre>
      );
    } else {
      return (
        <pre className="px-2 py-1 font-normal text-xs text-red-500">
          {atob(outputDetails?.stderr)}
        </pre>
      );
    }
  };
  return (
    <>
      <h1 className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2">
        Output
      </h1>
      <div className="w-full h-56 bg-[#1e293b] rounded-md text-white font-normal text-sm overflow-y-auto">
        {outputDetails ? <>{getOutput()}</> : null}
      </div>
    </>
  );
};

export default OutputWindow;

Este es un componente directo que solamente muestra los escenarios apropiados de éxito o falla.

El método getOutput() determinará como se verá el color del texto y qué debería ser impreso.

• Si statusId es 6 – Tenemos un error de compilación. Para ello, la API regresa un compile_output que puede ser usado para mostrar el error.
• Si statusId es 3 – Tenemos un escenario de éxito, el cual es Accepted. La API regresa un stdout el cual significa Salida Estándar (Standard Output). Esto es usado para mostrar los datos el cual es devuelto (returned) del código que suplimos a la API.
• Si statusId es 5 – Tenemos un error Time Limit Exceeded. Simplemente mostramos que hay una condición de bucle infinito en el código o si excede el tiempo estándar de 5 segundos para la ejecución del código.
• Para cualquier otro estado, vamos a obtener un objeto estándar stderr que podemos usar para mostrar los errores.
• Nota el método atob() en uso. Esto es porque obtenemos la salida como una cadena base64. Para decodificarlo, usamos el método atob().

Aquí hay un escenario de éxito de un programa Binary Search en JavaScript:

Componente Output Details

El componente OutputDetails es un "mapeador" simple para mostrar los detalles asociados con un pedazo de código que inicialmente compilamos. Los datos ya están puestos en la variable de estado outputDetails.

import React from "react";

const OutputDetails = ({ outputDetails }) => {
  return (
    <div className="metrics-container mt-4 flex flex-col space-y-3">
      <p className="text-sm">
        Status:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.status?.description}
        </span>
      </p>
      <p className="text-sm">
        Memory:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.memory}
        </span>
      </p>
      <p className="text-sm">
        Time:{" "}
        <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
          {outputDetails?.time}
        </span>
      </p>
    </div>
  );
};

export default OutputDetails;

Los atributos time, memory y status.description todos son recibidos de la respuesta de la API los cuales luego son almacenados en outputDetails y mostrados.

Eventos del Teclado

Lo último en la aplicación es usar ctrl+enter para compilar nuestro código. Para esto, vamos a crear un hook personalizado (porque son increíbles y más limpios) para escuchar varios eventos del teclado en nuestra aplicación web.

// useKeyPress.js

import React, { useState } from "react";

const useKeyPress = function (targetKey) {
  const [keyPressed, setKeyPressed] = useState(false);

  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true);
    }
  }

  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false);
    }
  };

  React.useEffect(() => {
    document.addEventListener("keydown", downHandler);
    document.addEventListener("keyup", upHandler);

    return () => {
      document.removeEventListener("keydown", downHandler);
      document.removeEventListener("keyup", upHandler);
    };
  });

  return keyPressed;
};

export default useKeyPress;

// Landing.js

...
...
...
const Landing = () => {
    ...
    ...
      const enterPress = useKeyPress("Enter");
      const ctrlPress = useKeyPress("Control");
   ...
   ...
}

Aquí, estamos usando los eventos nativos de JavaScript Event Listeners para escuchar nuestra clave target el cual vamos a usar.

El Hook escucha a los eventos keydown y keyup. Inicializamos nuestro hook con una clave target de Enter y Control.

Ya que estamos verificando si el targetKey === key y estableciendo keyPressed respectivamente, podemos usar el booleano keyPressed regresado, el cual será true o false.

Ahora, podemos escuchar a estos eventos en el hook useEffect para asegurarnos de que ambos fueron presionados al mismo tiempo:

useEffect(() => {
    if (enterPress && ctrlPress) {
      console.log("enterPress", enterPress);
      console.log("ctrlPress", ctrlPress);
      handleCompile();
    }
  }, [ctrlPress, enterPress]);

Así que cuando sea que el usuario apriete control y enter uno después del otro o al mismo tiempo, el método handleCompile() será llamado.

Algunas cosas a tener en mente

Este fue un proyecto divertido con el cual trabajar. Pero el plan básico de Judeg0 tiene algunas limitaciones, a saber 100 peticiones por día.

Para solucionar esto, podrías crear tu propio servidor / droplet (en Digital Ocean) y auto alojar el proyecto de código abierto (tienen una documentación excelente para eso).

Conclusión

Al final, tenemos:

• Un editor de código que puede compilar a más de 40+ lenguajes
• Un conmutador de temas para cambiar la apariencia de nuestro editor de código
• Interactuar y Alojar APIs en RapidAPI
• Usar eventos del teclado en React usando hooks personalizados
• ¡Mucha y mucha diversión! ;)

Finalmente, si quieres profundizar en el proyecto, aquí hay algunas de las características que podrías considerar para implementar:

• Módulos de inicio de sesión y registro – así puedes guardar tu código en tu propio panel personal.
• Una forma de compartir el código con otras personas por internet.
• Página de perfil y personalizaciones.
• Programación en pareja en una porción de código único usando programación de sockets y transformaciones operacionales.
• Marcar porciones de código como favoritos.
• Panel personalizado de tus pedazos de código (que están guardados) - justo como CodePen.

Me encantó realmente codificar esta aplicación desde cero, y TailwindCSS es mi recurso favorito absoluto para estilar mis aplicaciones.

Si este artículo te fue de utilidad, deja un ⭐️ en el repositorio de GitHub.
Si tienes alguna pregunta, por favor contáctame por mi Twitter y/o Sitio web y me encantaría ayudarte.

Código Fuente | Demo en vivo