# Course: Creating an NFT Contract and a React Webpage to View NFTs

Welcome to the course on how to create an NFT contract and a React webpage to view NFTs. This course assumes that you have basic knowledge of Solidity and React.

***Under construction <3***

## Lesson 1: Setting up your development environment

1.  Install development dependencies.
2.  Install VScode.
3.  Setting up Hardhat development environment.

Lesson 1 [here](https://webees.com.tw/blogs/solidity-dev-environment)!

## Lesson 2: Creating an NFT Contract

1.  Create a new Solidity file in your preferred editor.
2.  Define the NFT contract by importing the ERC721 standard contract.
3.  Create a constructor function to initialize the contract.
4.  Define the `tokenURI` function to return the unique token ID and metadata.
5.  Define the `mint` function to create new NFT tokens.
6.  Compile the Solidity code.
7.  Deploy the contract on a testnet or mainnet.
8.  Test the contract by minting and transferring NFTs.

## Lesson 3: Creating a React Webpage to View NFTs

1.  Create a new React project using your preferred tool.
2.  Install the `web3.js` library and the OpenZeppelin ERC721 contract package.
3.  Create a new component to display the NFT.
4.  Connect to the Ethereum network using `web3.js`.
5.  Use the OpenZeppelin contract package to get the NFT data.
6.  Display the NFT image and metadata on the webpage.
7.  Test the webpage by displaying NFTs from the contract.

Fast-track your NFT journey today!

Learn to create NFT contracts & React webpages in just 8 steps! Mint, transfer and display NFTs with Solidity & OpenZeppelin ERC721. Fast-track your NFT journey today.

NFT contract + React Website for fearless dummies


To develop Solidity smart contracts, we need to have Node.js installed on our system. This is necessary for a variety of purposes, such as deploying the smart contracts, testing them, running local blockchains, and more.

1.  Install Node.js:

You can download the latest version of Node.js from the official website: https://nodejs.org/en/download/.

2.  Install Yarn (**OPTIONAL**):

Once Node.js is installed, you can use one of the following methods to install Yarn:

a. Using npm:

Open a terminal or command prompt and run the following command:

    npm install -g yarn

b. Using Homebrew (**MacOS only**):

If you're using a MacOS, you can use Homebrew to install Yarn. Open a terminal and run the following command:

    brew install yarn

c. Using Chocolatey (**Windows only**):

If you're using a Windows system, you can use Chocolatey to install Yarn. Open a command prompt with administrative privileges and run the following command:

    choco install yarn

3.  Verify Yarn installation:

Once Yarn is installed, you can verify the installation by running the following command in a terminal or command prompt:

    yarn --version


This command should output the version nqumber of Yarn that you just installed. If the output shows an error or an unexpected result, try reinstalling Yarn or check the documentation for further troubleshooting steps.

![Yarn](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/3a.png "Yarn correct installation")

4.  How to Install VS Code:

a. Go to the official website of Visual Studio Code (https://code.visualstudio.com/).

b. Click on the "Download for Windows/Mac/Linux" button depending on your operating system.

![VSCode](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/4b.png "VSCode official download")

c. Wait for the download to complete.

d. Once the download is complete, open the downloaded file.

e. Follow the installation wizard, accept the license agreement and choose the installation folder.

5.  How to create a new folder for a project called "HelloNFTWorld":

a. Open Visual Studio Code.

b. Click on "File" in the top-left corner of the window.

c. Click on "Open Folder" from the drop-down menu.

d. Choose a location where you want to create a new folder.

e. Click on "New Folder" to create a new folder.

![New folder](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/5e.png "New folder creation")

f. Name the folder "HelloNFTWorld".

g. Click on "Select Folder" to open the folder in Visual Studio Code.

6.  How to Install [Hardhat](https://hardhat.org/hardhat-runner/docs/getting-started#overview) as a dev dependency using Yarn:

a. Open the terminal in Visual Studio Code, it is located in the Terminal submenu

![VSCode terminal](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/6a.png "Open terminal in VSCode")

b. Navigate to the "HelloNFTWorld" folder by typing cd HelloNFTWorld.

c. Type the following command to initialize the package.json file: 

    yarn init -y

![New project](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/6c.png "Initialize a node project with yarn")

A `package.json` file should have appeared in your working directory

d. Type the following command to install hardhat: 

    yarn add --dev hardhat

![Hardhat](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/6d.png "Add Hardhat as dependency")

e. Wait for the installation to complete.

![Hardhat](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/6e.png "Hardhat correct setup")

1.  How to using Hardhat initialize a new TypeScript project:

a. In the terminal, type the following command: 
    
    yarn hardhat

b. Follow the instructions on the terminal to set up the Hardhat project.

![Hardhat + Typescript](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/7b.png "New hardhat project options")

c. When asked to choose a preset, select "TypeScript".

![New Project initialization](https://gateway.pinata.cloud/ipfs/QmQbev4RCReK54ts6XVKMegi5PQuMGyx3dZ8XhZXj6wvt3/7c.png "Ready to rock and Roll")

d. Follow the rest of the instructions on the terminal to initialize the TypeScript project.

e. Once the initialization is complete, you can start working on your project in Visual Studio Code.




This tutorial would provides step-by-step guidance on how to set up a Solidity development environment with Hardhat and npm or yarn

Part 0 - Solidity development environment



Yarn, npm, and pnpm are all package managers for Node.js that help developers manage their project dependencies. While they share many similarities, there are some differences between the three:

1.  Performance: Yarn and pnpm are generally faster than npm when it comes to installing packages and resolving dependencies. Yarn uses a global cache to avoid downloading the same packages multiple times, while pnpm uses a shared store to avoid duplicating packages.

2.  Disk Space: pnpm is generally more space efficient than Yarn and npm as it can reuse the same packages across multiple projects, which can save a significant amount of disk space.

3.  Stability: Yarn and pnpm are considered to be more stable than npm, especially when it comes to resolving dependencies. Yarn uses a deterministic algorithm to ensure that the same set of dependencies is installed on every machine, which can help avoid dependency conflicts. pnpm has a similar deterministic approach, but also offers some additional features like automatic conflict resolution.

4.  Security: Yarn and pnpm have some security features that are not available in npm. For example, Yarn uses checksums to verify the integrity of packages during installation, which can help prevent malicious code from being installed. pnpm also provides automatic security audits of all installed packages.

5.  Configuration: Yarn and pnpm have more comprehensive and user-friendly configuration systems than npm. They allow you to specify dependencies, resolutions, and other settings in a single file, which can make it easier to manage your project's dependencies.

6.  Community: npm has a larger community than Yarn and pnpm, which means that it has more resources, tutorials, and support available. However, both Yarn and pnpm are becoming more popular, and they have growing communities of their own.

Overall, Yarn, npm, and pnpm are all useful tools for managing project dependencies, and the choice between the three depends on personal preference and the specific requirements of your project. If you're looking for faster installation times and more efficient disk space usage, then Yarn or pnpm may be a good choice. If you're looking for a larger community and more resources, then npm may be a better fit.

Consider these 6 factors when choosing a package manager

Yarn? NPMP? isn't it the same as NPM?


__Advertisement :)__

- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
  i18n with plurals support and easy syntax.

You will like those projects!

# how to use the node interpreter

read a dir
1.- run node

```bash
node
```

2.- declare the file manager & join tool to join strings

```bash
const fs = require("fs")
const {join} = require("path")
```
3.- read directories

```bash
fs.readdirSync(join(process.cwd(),"/content/blogs"))
```
4.- read a file

```bash
fs.readFileSync(join(process.cwd(),"/content/blogs/markdown-full-example.md"),"utf8")

```

Node emulator

**Employment period:** June 2022 ~ Present · Full time

**Key responsibilities:** Analyze and design web3 features, contracts deployment, management and operation, involvement in project planning & QA

**Motivations:** Web3 is an emerging technology that aims to create a decentralized web where users have greater control over their data, and trust is established through decentralized consensus mechanisms, rather than relying on centralized authorities. This technology has the potential to solve problems related to corruption, abuse of power, and lack of transparency by promoting trust, security, and accountability. Additionally, Web3 also enables new and exciting experiences such as the metaverse, which could revolutionize the way we interact with digital content and each other online.

**[1tm Landing Page](https://1cu.1tm.io/)**

**[Opensea  collections](https://opensea.io/1CUx1TM/created)**

**[1tm Legacy site](https://www.1tm.io/)**

Working as Solidity smart contract developer I implement web3 features in the current 1TM products

Sr. Blockchain Software Developer

**Employment period:** Jan 2020 ~ June 2021 · Full time

**Key responsibilities:** Flutter apps development and maintainance, Jenkins CI/CD pipeline & Scrum Master 

**Motivations:** Flutter had revolutionized the way mobile apps are built for the latest platforms, so implementing this helped the product achieve greater levels of client satisfaction; QA is as important as the development itself for it is an assurance that the product is up to the task to bring hospitability and comfort for the end user, Using Jenkins with Python and Docker to automate testing and deployment processes help improve the speed, efficiency, and reliability of the software development lifecycle.

**[SiDC website](https://sidc.com.tw/)**

**[SiDC Appstore](https://apps.apple.com/tw/developer/sidc-inc/id975032488)**

**[SiDC GooglePlay](https://play.google.com/store/apps/developer?id=Special+Instrument+Development+Co.,+LTD.&hl=zh_HK&gl=US)**

Develop Backend and Front end apps for room automation in hotels and smart houses in the Hospitality Industry

Jr. Flutter Software Developer

**Employment period:** Nov 2017 ~ Jan 2020 · Full time

**Key responsibilities:** Timeframe tasks completion, networking consultant and project staff training and handling

**Motivations:** Task management is a hot topic in most companies because it is important to be able to track progress. To handle the job of over 20 employees working full-time on construction sites, I developed a standard operating procedure supported by the Trello platform. Additionally, I provided support to the networking team with my knowledge and workforce to fulfill their goals. During my free time, I trained Google Assistant using Dialogflow and created several Firebase functions that connect the assistant to our backend processes. As a result, we gained voice control over the IoT site amenities.

**[SiDC website](https://sidc.com.tw/)**

**[SiDC Appstore](https://apps.apple.com/tw/developer/sidc-inc/id975032488)**

**[SiDC GooglePlay](https://play.google.com/store/apps/developer?id=Special+Instrument+Development+Co.,+LTD.&hl=zh_HK&gl=US)**

Timeframe tasks completion, networking consultant and project staff training and handling

Welcome to the Web3 Hive: A buzzing community of dedicated bees sharing knowledge and experience

Newest Blogs(See All)