# 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


__Advertisement :)__

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

You will like those projects!

# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


## Horizontal Rules

___

---

***


## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar


## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

## Links

[link text](http://dev.nodeca.com)

[link with title](https://github.com/nodeca/babelfish/ "title text!")

Autoconverted link https://github.com/nodeca/babelfish (enable linkify to see)


## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"


Markdown Extensive Example


Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is necessary.

Ethereum is a technology that lets you send cryptocurrency to anyone, but in the first place, It also powers applications that everyone can use and no one can takedown. It's the world's programmable blockchain.

Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs that govern the behavior of accounts within the Ethereum state.

Pinata is a pinning service that allows users to host files on the IPFS network. The InterPlanetary File System (IPFS) is a protocol and peer-to-peer network for storing and sharing data in a distributed file system.

**What is this course covering?**

The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-world application.

Students will learn what ERC721 smart contract is and how to create one.

The frontend for dApps covered in the course is created with React JS library and Next JS framework. CSS and design are built with the Tailwind framework.

**NFT Marketplace Application:**

This central part of the course covers the creation of an interactive NFT marketplace. Clients of this platform will be able to purchase NFTs with Ether digital currency.

The application is created in the Next JS framework, built on top of the React JS.

The first part of the course covers the setup of the pages layouts, creation of the first pages, and components. The Tailwind CSS framework covers the styling part of the application.

Students will explore how to provide Web3 JS code into the application, code responsible for communication with a crypto wallet and, therefore, with the blockchain.

We will use the Provider/Consumer concept to provide this layer, which is very common in React JS. This will guarantee that all of the components and pages will be able to access functionalities responsible for communication to the blockchain.

The application's state and data management are handled through the SWR(stale while revalidate) library. This will provide a reactive feel to the application and a reactive rendering of components upon receiving new data.

After all, necessary communication with blockchain is achieved, the students will start to work on smart contract implementation.

The course follows the recognized ERC721 token standard.

The smart contract is an essential part of the project. It serves as the blockchain "storage" of NFTs and provides functionality to verify ownership of an NFT and linkage to the media storage.

The last part of the course covers preparing and storing data related to NFT. So-called NFT Metadata.

NFT metadata data will be stored on Pinata (IPFS) based storage. Students will learn to gather data from the form and later submit them to the Pinata storage. The following important part is to link this metadata and create an NFT.


**The most mentionable topics covered in this application are:**

* Next JS Integration with Web3 and Blockchain

* Reactivity with Hooks and SWR

* Creation of NFT(ERC721) Smart Contract

* NFT data manipulation and storage on Pinata

* Typescript

Learn how to use React / Next JS, Solidity, and Pinata(IPFS) to create NFT marketplace on Ethereum. All In Typescript.

NFT Marketplace in React, Typescript & Solidity - Full Guide


**What is Javascript?**

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.

**What are you going to work on?**

In this course, we will cover six big topic groups. Every section contains a lot of assignments and code exercises.

The final project is a web application to display products for users to buy. For the entire course length, you will work on one application. We will start simple with console application and finish with React JS, an excellent styled application.

You will see how your application evolves, what techniques are required, and how everything connects in the end. You will get a complete understanding of the programming process.

**1\. JS Basics**

In this part, you will learn the basics in the Javascript programming language, but you will also get programmatic thinking that can help you start with any programming language.

The focus of this section is to think like the programmers and not repeat code without understanding.

Some of the topics from this section are:

*   computing history, variables, primitive types, functions, parameters, 
*   objects, arrays, conditionals, logical operators, classes, inheritance, prototypes
*   debugging, scope, call stack

**2\. HTML Basics**

This part of the course covers the core part of HTML. You will learn and understand how to structurize HTML documents. 

This part covers:

*   dom (document object model), document object,
*   elements + functions

**3\. CSS Basics**

To make the website look professional, you need to apply "style." In this section, you will learn how to use stylings effectively.

You will now learn how to use the two most used stylings: flex and grid.

**4\. HTML + JS**

The central part of modern frameworks like Angular, Vue, or React is to create seamless interaction of JS with HTML without you even noticing.

This part will teach you how things work behind the scene. You will use javascript to render HTML elements dynamically.

The main topics of this section are:

*   HTML nodes, dynamic elements

*   "mini" JS framework, modularity, 

*   ES and Common modules

**5\. Web server  + Webpack**

In this part, we will first cover communication on the internet from the perspective of client->server. You will learn how your computer requests the remote server to display any website on the internet.

Then we will create our custom Web Server, which will serve our HTML project, which we created in the sections before.

Later in the section, we will dive into Webpack. Webpack is a  bundler, and we will use it to bundle our javascript code together. You will learn how to write a javascript, which was impossible to write before.

*   client->sever, servers
*   Node JS, Webpack, 

**6. React JS**

The final part of this course will cover React JS library. You will learn to use React JS to create web applications with ease. You will create a final version of your web app. In the end, everything will connect, and you will understand how React JS works.

*   React JS
*   Hooks, State
*   Reactivity

It will be a long journey, but you will become developers in the end.


Learn programming in JS language, HTML, and CSS. Create a Web Application made in React JS. The path to the final project includes many assignments, code exercises, and challenges.