Conversation with Merlin [email protected] · Wed Dec 13 2023

Tengo una prueba tecnica para un puesto de trabajo donde se va a medir la calidad del código, y my code will be manually reviewed and evaluated by our engineers based on the criteria below: The code is clean and easy to understand You model the problem properly, including classes / interfaces, componentes extension when applies, etc. You avoid duplication and encourage extension for similar use cases Your logic is properly abstracted in classes (or equivalent), functions, variables, etc. Your solution is automated (i.e. you don’t manually call the API to create the 100+ entities required for Phase 2) You leverage components for the frontend elements to reduce duplication and improve readability Your frontend code is easy to follow, extend and reuse The UI looks pretty. Though no need to make it pixel-perfect! Just generally looking fine is good enough, we don’t want you to spend more time than needed for the evaluation Quiero desarrollarlo en React con typescript con principios solid y tdd. Ayudadme paso a paso a crearlo: La documentación es la siguiente: Megaverse API docs The Megaverse service allows you to generate different astral objects: Polyanets, Soloons and Comeths! The megaverse service is a REST API. All API routes below refer to a single route: https://challenge.crossmint.io/api/... IMPORTANT: All APIs take a required parameter 'candidateId' Polyanets POST /api/polyanets with arguments 'row' and 'column' for their position in the map DELETE /api/polyanets with arguments 'row' and 'column' will delete a Polyanet if you made a mistake Soloons POST /api/soloons with arguments 'row' and 'column' for their position in the map. Additionally you should provide a 'color' argument which can be "blue", "red", "purple" or "white" DELETE /api/soloons with arguments 'row' and 'column' will delete a Polyanet if you made a mistake Cometh POST /api/comeths with arguments 'row' and 'column' for their position in the map. Additionally you should provide a 'direction' argument which can be "up", "down", "right" or "left" DELETE /api/comeths with arguments 'row' and 'column' will delete a Polyanet if you made a mistake Goal Map There is one extra endpoint you might find helpful! It' the /api/map/[candidateId]/goal, where [candidateId] is your candidate ID. It will return you the goal map for your current challenge phase. It might be easier to parse than the HTML in our page, but heads-up it's not straightforward either. But we're sure you can figure it out! :) La prueba es la siguiente: Create your own megaverse* *Megaverse is like Metaverse but cooler because you create it! Welcome to our Crossmint coding challenge, in which you will help us mint a new megaverse into existence! Megaverses are 2D spaces comprised of combinations of different astral objects: 🪐POLYanets with 🌙SOLoons around them and ☄comETHs floating around. Your job as the master of the megaverse will be to create one with some given parameters and shapes. You will use a megaverse creator API to help you with such legendary quest. The challenge is composed of 2 phases. In the first one you will learn how to interact with the API and create some 🪐POLYanets and validate them. In the second one you will create a bigger megaverse with some peculiar shape. Important things to know By the end of the challenge, you will be asked to submit the code you used to solve it. This code will be manually reviewed and evaluated by our engineers, so here are the criteria we will be mainly using for:The code is clean and easy to understand You model the problem properly, including classes / interfaces, extension when applies, etc. Errors should be considered, the program should be resilient You avoid duplication and encourage extension for similar use cases Your logic is properly abstracted in classes (or equivalent), functions, variables, etc. Your solution is automated (i.e. you don't manually call the API to create the 100+ entities required for Phase 2) We expect the problem to be a little over-engineered, take a little time to show off what you know. But this should be done to a reasonable amount, don't go overboard.

La fase uno tiene que seguir estas instrucciones: Phase 1: Do a 🪐POLYanet cross In this phase you will use the megaverse service API to create 🪐POLYanets forming an X-shape like the following: 🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌 🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌 🌌🌌🪐🌌🌌🌌🌌🌌🪐🌌🌌 🌌🌌🌌🪐🌌🌌🌌🪐🌌🌌🌌 🌌🌌🌌🌌🪐🌌🪐🌌🌌🌌🌌 🌌🌌🌌🌌🌌🪐🌌🌌🌌🌌🌌 🌌🌌🌌🌌🪐🌌🪐🌌🌌🌌🌌 🌌🌌🌌🪐🌌🌌🌌🪐🌌🌌🌌 🌌🌌🪐🌌🌌🌌🌌🌌🪐🌌🌌 🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌 🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌🌌 Here you have the basic API specification you will need: Docs. Note that for this phase you won't need the Soloons or Comeths endpoints. Ayudame con toda la implementación , paso a paso , siguiendo las mejores prácticas siguiendo los principios de clean arquitectura, Test Driven Development (TDD) y patrones de diseño react typescript. Creame la estructura del proyecto y el codigo. Crear las variables de entorno

Entendido, vamos a abordar esto paso a paso, siguiendo los principios de arquitectura limpia, Test Driven Development (TDD), y patrones de diseño react typescript. Dado que se trata de un proceso largo y complejo, te proporcionaré una estructura general y ejemplos de cómo podrías comenzar.

1. Configurar el entorno de desarrollo:

  • Inicializa tu proyecto con create-react-app con TypeScript:

    npx create-react-app my-megaverse-app --template typescript

  • Instala Axios para realizar llamadas HTTP:

    npm install axios

  • Instala las librerías para TDD como Jest y Testing Library:

    npm install --save-dev @testing-library/react @testing-library/jest-dom

2. Estructura del Proyecto:

Organiza tu proyecto en una estructura de carpetas que separe claramente la lógica de manera coherente, por ejemplo:

my-megaverse-app/
├── public/
├── src/
│   ├── api/
│   ├── components/
│   ├── models/
│   ├── services/
│   ├── utils/
│   ├── views/
│   └── App.tsx
└── ...
  • api/: Aquí podrías colocar tus funciones de llamadas a la API.
  • components/: Componentes reutilizables de React.
  • models/: Tipos o interfaces de TypeScript.
  • services/: Servicios que contienen la lógica de negocio.
  • utils/: Funciones de ayuda que podrían ser usadas en varios lugares del proyecto.
  • views/: Los componentes específicos de las páginas de tu aplicación.

3. Modelado de Datos y Servicios:

  • Define tus modelos basándote en los objetos astrales (Polyanets, Soloons, Comeths) e interfaces para las respuestas de la API y solicitudes.

    // models/astralObjects.ts
export interface Polyanet {
  row: number;
  column: number;
}

  • Crea los servicios que utilizarán las funciones de la api para interactuar con el backend.

    // services/megaverseService.ts
import axios from 'axios';
import { Polyanet } from '../models/astralObjects';

const BASE_URL = 'https://challenge.crossmint.io/api';

export const createPolyanet = async (candidateId: string, polyanet: Polyanet) => {
  const response = await axios.post(`${BASE_URL}/polyanets`, {
    ...polyanet,
    candidateId,
  });
  return response.data;
};

4. Test Driven Development (TDD):

  • Empieza escribiendo las pruebas para tus componentes y servicios.

    // tests/megaverseService.test.ts
import { createPolyanet } from '../services/megaverseService';

describe('Megaverse Service', () => {
  it('creates a Polyanet correctly', async () => {
    // Aquí iría tu mock de axios.post y la afirmación pertinente.
  });
});

  • Escribe pruebas para cada uno de los casos de uso que realizará tu aplicación.

  • Crea tu lógica de negocio y componentes de React para pasar las pruebas.

5. Variables de Entorno:

  • Crea un archivo .env en la raíz de tu proyecto con tus variables de entorno para almacenar datos sensibles como el candidateId. 
    REACT_APP_CANDIDATE_ID=yourCandidateId
  • Accede a esta variable en tu código a través de process.env.REACT_APP_CANDIDATE_ID.

6. Develop the Frontend:

  • Diseña tus componentes utilizando los patrones de React y TypeScript de manera que promuevan la reutilización y mantenibilidad.

  • Mantén la lógica de estado y efectos lateral separadas de la UI utilizando hooks como useState y useEffect.

  • Implementa la lógica para que tu frontend llame al servicio para crear y eliminar objetos astrales siguiendo las instrucciones de la API.

Recuerda ir iterativamente, comenzando con la fase 1 y siguiendo el ciclo de TDD:

  1. Escribe una prueba.
  2. Verifica que la prueba falla.
  3. Escribe el código para pasar la prueba.
  4. Verifica que todas las pruebas pasen.
  5. Refactoriza si es necesario, asegurándote de que las pruebas sigan pas

challenge.crossmint.io