Mintbase Frontend Challenge

Challenge Goal

Create a simple interface using Mintbase technology.

Documentation

• Getting Started: https://docs.mintbase.io/dev/getting-started
• MintbaseUI: https://github.com/mintbase/mintbase-ui
• MintbaseUI Storybook: https://ui.mintbase.io
• MintbaseJS: https://github.com/mintbase/mintbase-js
• MintbaseJS Docs: https://mintbase.github.io/mintbase-js/
• Create your NEAR testnet wallet: https://wallet.testnet.near.org/
• GraphQL:
  • Copy this endpoint https://mintbase-testnet.hasura.app/v1/graphql
  • Paste it here https://graphiql-online.com/

User Story

A user wants to see a list of the last NFTs (limit by 10) minted on Mintbase by the wallet mb-engineering.testnet, with the following information: title, image and the owner of the NFT.

To access this information, the user needs to connect his NEAR Wallet.

Page design to re-create

https://www.figma.com/file/b4k7ahgVcsQhFfUAZHAyCs/Mintbase-Frontend-Challenge?node-id=32%3A380

Requirements

• User must be able to connect/disconnect his NEAR Wallet.
• Use Typescript
• Use GraphQL query to fetch the last 10 NFTs.
• For the design recreation you can use mintbase UI components and TailwindCSS.
• Responsive behaviour

Run the project

• Clone the project
• Install dependencies npm i
• Run the project npm run dev

Be creative! Enjoy!