Mini Project: Diploma Checker

Build a small page that looks up any NEAR testnet account and shows whether it holds a Retr0 Academy diploma. This is a complete, useful dApp you can run entirely in the Playground with view calls only. After it works, you can optionally add NEAR Connect to sign in and deep-link to mint.

What you will ship

1. An input for a testnet account id
2. A Verify button
3. A result panel: valid diploma (track, score, date) or a clear "no diploma yet"
4. A link to the public verify page /verify?account=...

Starter (open this in the Playground and finish it)

The example below already performs the RPC call. Your job is to improve the UX: validate the account id, show a loading state, format the score, and handle errors without looking broken.

<main>
<p class="eyebrow">Retr0 Academy</p>
<h1>Diploma checker</h1>
<p>Look up any testnet account. This is a view call — no wallet needed.</p>
<div class="row">
  <input id="account" value="demo-learner.retr0school.testnet" spellcheck="false" aria-label="NEAR account id" />
  <button type="button" id="go">Verify</button>
</div>
<pre id="out">Press Verify.</pre>
<p id="link"></p>
</main>

Stretch goals

• Style a "holder" card when valid is true (score, date, token id if the view returns it)
• Reject obviously invalid ids before calling RPC (NEAR account ids are lowercase and contain a . or are 64-character implicit ids)
• Add a Connect button with NEAR Connect (previous lesson) and default the input to the signed-in account
• After a pass on the diploma quiz, mint from /diploma and check your account in this app

When the checker works in the Playground, use Open in Code E if you want a multi-file project to share.

Exercise

Finish the checker in the Playground. Verify demo-learner.retr0school.testnet (should be valid) and a made-up account (should be empty or an error). Then add the public verify link and one stretch goal.