Skip to content

lxdao-official/myfirstnft-frontend

Repository files navigation

My First NFT Frontend

MyFirstNFT is a non-profit instructional project for Web3 newbies. Get a FREE NFT while learning about Web3, NFT, and security. Buidl in LXDAO.

As it is a public goods, all of the source code are open sourced:

Enjoy!

Start the app

Get the code first:

git clone https://github.com/lxdao-official/myfirstnft-frontend.git
cd myfirstnft-frontend

Copy .env.sample and rename it to .env and put data in it, then:

yarn install
yarn run dev

Then open http://localhost:3000 start developing. And also you need to start backend app for minting. Check more on the MyFirstNFT Backend API: https://github.com/lxdao-official/myfirstnft-backend.

.env explanation

Example from the MyFirstNFT production environment:

NEXT_PUBLIC_GOOGLE_ANALYTICS=G-VPF0TRZGBT
NEXT_PUBLIC_CHAIN_ID=1
NEXT_PUBLIC_CONTRACT_ADDRESS=0xE1D831Ee54f88Ef03FD7F5a15dE943BAA4d19070
MFNFT_BACKEND_API=https://xxxx
NEXT_PUBLIC_INFURA_PROJECT_ID=10a6......68e3

Code of Conduct

  1. Please use English in this project by default (code comments, git commit message, variable name, etc).
  2. Please install prettier plugin and keep the same code style.
  3. Please have a discussion and confirmation first before introducing some new libraries or packages, keep them as simple as possible.

I18N

Please use English Text by default like the following:

import { t } from '@lingui/macro';

...
<Typography variant="h6" component="div" gutterBottom>
  {t`Connect Wallet`}
</Typography>
...

Note: For a long sentence, we can make a short key for translation mapping, but short sentence or title, which is not changed often, we can use it directly, rather than make a key.

Then run yarn run extract to extract all strings out of code, you will find your strings in /locale/en/messages.po file.

You can also find the same strings in /locale/zh/messages.po, so you need to add translation in that .po file, and run yarn run compile, this command will compile .po file into .js file so that front-end code can read it and apply it.

What is LXDAO?

LXDAO is an R&D-focused DAO in Web3. Our mission is: To bring together buidlers to buidl and maintain valuable projects for Web3, in a sustainable manner.

Buidl in LXDAO