2. Configurando el frontend

Este es el segundo capítulo del tutorial sobre cómo construir una dApp end-to-end en Aptos donde ya has creado un smart contract y ahora estás configurando el frontend.

Configurando el frontend

create-aptos-dapp ya ha creado el frontend por nosotros con un layout básico y una implementación de Wallet usando la librería aptos-wallet-adapter.

1. Corre: npm run dev

   En este punto, deberías tener tu app corriendo en http://localhost:5173, que muestra el layout del template por defecto.

2. En el directorio frontend, encuentra todos los archivos del frontend. Vamos a limpiarlo un poco.

3. Abre el archivo App.tsx y actualiza su contenido para que sea:

import { Header } from "@/components/Header";
import { TopBanner } from "@/components/TopBanner";

function App() {
  return (
    <>
      <TopBanner />
      <Header />
      <div className="flex items-center justify-center flex-col">
        <div>My app goes here</div>
      </div>
    </>
  );
}

export default App;

Una vez que guardes los cambios, deberías ver que el contenido de la app ha cambiado en el browser y muestra My app goes here.

La UI de nuestra dApp

Primero construiremos el layout de la UI de la dApp. Tenemos dos estados de UI para la app:

• Cuando una account aún no ha creado una lista (a la izquierda).
• Cuando una account ha creado una lista y ahora puede añadirle tareas (a la derecha).

Ahora tenemos un cliente funcional con un botón para conectar Wallet y un modal para seleccionar wallets. Siéntete libre de jugar con él y conectar una wallet.

Luego, aprende a hacer fetch de data desde la chain en el capítulo 3.